Skip to main content
The FlowX.AI React UI Toolkit provides a complete set of production-ready components designed to help you build modern, accessible web applications quickly and efficiently.

​
Available components

The React UI Toolkit includes the following components:

​
Layout components

  • Accordion - Collapsible content panels with support for multiple items, completion states, and custom icons
  • Card - Container component with header, title, subtitle, and content sections
  • Chat - Full-featured chat interface with messages, input, header, and reasoning components

​
Form components

  • Button - Customizable buttons with multiple variants (fill, ghost, text) and icon support
  • Checkbox - Single and grouped checkbox inputs with custom icons
  • Radio - Radio button inputs with grouping and custom styling
  • Text Entry - Input fields with prefix/suffix support, icons, and clear functionality
  • Switch - Toggle switches with checkbox and toggle variants

​
Display components

  • Icon - SVG icon component with built-in icon set and custom path support
  • Message - Notification messages with different types (success, warning, error, info) and display modes

​
Additional components

  • Breadcrumbs - Navigation breadcrumb trails
  • Chip - Small elements for tags and labels
  • Date Picker - Date selection with locale support
  • Document Viewer - PDF and document viewing
  • File Upload - Single and bulk file upload components
  • Modal - Overlay dialogs
  • Select - Dropdown select with multi-select support
  • Slider - Range input slider
  • Spinner - Loading indicators
  • Stepper - Multi-step form navigation
  • Tab Bar - Tabbed content containers
  • Table - Data table component
  • Toast - Temporary notification messages
  • Tooltip - Contextual information overlays

​
Key features

​
TypeScript support

All components are built with TypeScript and include comprehensive type definitions for better development experience and type safety.

​
Accessibility

Components follow WAI-ARIA best practices and include proper keyboard navigation, focus management, and screen reader support.

​
Customization

Each component accepts standard React props and className for easy styling integration with your design system.

​
Performance

Optimized with React.memo and forwardRef for efficient rendering and ref forwarding.

​
Component naming convention

All components follow the Flx prefix naming convention:
  • Standard component: FlxButton, FlxCard, FlxIcon
  • Memoized variant: MemoFlxButton, MemoFlxCard, MemoFlxIcon
Use the memoized variants when you need to prevent unnecessary re-renders in performance-critical scenarios.

​
Getting started

To begin using the React UI Toolkit, follow the installation guide to add the package to your project. Then, explore the individual component documentation to learn about available props, usage patterns, and examples.

Build docs developers (and LLMs) love

Get started for freeTalk to us