Fluxo UIFluxo UIv0.4.1
Fluxo UI

Fluxo UI

React Component Library

A comprehensive, accessible React component library built with TypeScript. Includes 80+ components, a custom state management solution, 12 color themes, dark mode support, and full keyboard navigation. Hover over any component card below for a quick interactive preview.

Get StartedBrowse Components
80+
Components
Production-ready UI components
TS
TypeScript
Full type safety and IntelliSense
A11Y
Accessible
WAI-ARIA compliant components
12
Themes
Color themes with dark mode

All Components

Hover over any component to see a live interactive preview. Click to view full documentation.

✎

Form Inputs

13

Text Input

Single-line text field with validation and icons

Numeric Input

Number input with step buttons and formatting

Masked Input

Input with format masks (phone, date, etc.)

Password

Password field with visibility toggle and strength

Textarea

Multi-line text area with auto-resize

Field Label

Accessible form field labels and hints

Input Group

Group inputs with addons and buttons

Slider

Single/range slider with marks and labels

Rating

New

Star/heart/thumb rating with fractional precision

Signature Pad

New

Canvas signature capture with smooth strokes, color and thickness variants

Week Day Selector

New

Compact weekday picker with single or multi-day selection

Password Strength

New

Configurable strength meter with allowed-aware tips

Password Requirements

New

Live rules checklist with confirm-password and bundled strength meter

☑

Selection

11

Checkbox

Standard checkbox with label and indeterminate

MultiState Checkbox

Cycle through multiple states on click

Radio Button

Single-selection radio groups

Input Switch

Toggle switch with on/off states

Select Button

Button-style single/multi selection

Toggle Button

Pressable toggle with icon support

Dropdown

Single select dropdown with search

Multiselect

Multi-item selection with chips

Autocomplete

Input with filtered suggestions

List Box

Scrollable selection list

Chips

Tag-style input for multiple values

⏰

Date, Time & Color

4

Date Range Picker

Date range selection with presets

Time Picker

New

12/24 hour time picker with step increments

Color Picker

New

HSV canvas with hex/RGB inputs and swatches

Calendar

Full-featured event calendar

▦

Data & Reports

6

Table

Data grid with sort, filter, pagination

Pivot Table

Aggregation, pivoting, expand/collapse

TreeView

Hierarchical tree with expand/collapse

Report Builder

Visual report designer with datasource plugins, parameters, and JSON export

Report Builder Examples

New

Worked examples: parameter filtering, row/column groups, visibility, cell items, drill-through

Report Viewer

Renders report definitions with sorting, drill-through, PDF export, and parameters

✎

Editors

4

Markdown Editor

Markdown editor and preview with toolbar, upload, and split view

HTML Editor

New

WYSIWYG rich text editor with full formatting, tables, images, and sanitized preview

JSON Editor

Interactive JSON viewer and editor

Diff Viewer

High-performance text diff with unified, split, inline variants and large-file virtualization

▮

Charts & Boards

7

Gantt Chart

Project timeline and task visualization

Kanban Board

Drag-and-drop task board with columns

Timeline

Vertical/horizontal event sequence

Progress Bar

Determinate and indeterminate progress

Countdown Timer

New

Progress-aware countdown with circular, linear, segmented, and numeric variants

Knob

New

Circular value indicator with optional drag editing

Activity Gauge

New

Concentric multi-series ring chart

▯

Codes

3

QR Code

New

Encode any string with optional logo overlay

QR Scanner

New

Scan QR codes with the device camera using the native BarcodeDetector API

Barcode

New

6 symbologies with built-in validation

▢

Media

6

Avatar

New

Circular image / initials / icon with status dots and group overflow

Carousel

Image/video slider with thumbnails

Lightbox

Hover/click preview with zoom-out

Image Editor

Crop, rotate, blur, annotate images

Canvas Draw

Drawing and annotation overlay

File Upload

Drag-and-drop file upload zone

☰

Navigation

5

Tab View

Tabbed content with multiple variants

Stepper

Multi-step wizard navigation

Breadcrumb

Navigation breadcrumb trail

Menu Nav

Multi-level menu navigation

Step Tour

Guided UI walkthroughs

⚠

Feedback

6

Snackbar

Toast notifications

Notification Center

Dropdown notification panel

Page Banner

Page-level message banners

Tooltip

Hover/focus information popups

Shimmer / Skeleton

Loading placeholders and skeletons

Empty State

New

Placeholder for empty data, errors, and first-run states

◇

Overlays

5

Modal

Dialog overlays with backdrop

Drawer

Slide-in panel from any edge

Popover

Click-triggered content popovers

Confirm Popover

Inline confirmation dialogs

Context Menu

Right-click context menus

▦

Layout

5

Splitter

Resizable split panels

Collapsible Panel

Expand/collapse sections & accordion

Accordion

Multi-item collapsible panel group with single/multi expand and five visual variants

Card

Content container with header, body, footer, cover media, and five visual variants

Docked Layout

VS Code-style panel layout — dock, auto-hide, float, resize, and re-dock panels

☝

Actions & Interaction

11

Button

Primary action element with variants

Split Button

New

Primary action paired with a related-actions menu

Fab & Speed Dial

Floating action buttons

Dock

New

Floating bar of icons with magnification and auto-hide

Command Palette

New

Modal launcher with fuzzy search and recents

Scroll To Top

New

Floating FAB that returns the user to the top

Drag & Drop

Draggable and droppable containers

Sortable

Drag-to-reorder lists and grids

Deferred View

Lazy-render with visibility detection

Infinite Scroll

Load-more on scroll with indicators

Animate On View

Scroll-triggered CSS animations

Hooks & Utilities

View all with examples →
useDebounce

Debounce value changes with configurable delay

useMobile

Detect mobile viewport with auto-resize

useClickOutside

Detect clicks outside a referenced element

useKeyboard

Register global keyboard event handlers

withFieldLabel

HOC to add label, error, hint to any input

showSnackbar

Trigger toast notifications imperatively

showTooltip

Show tooltips programmatically

showContextMenu

Open context menus on right-click

State Management

A lightweight, TypeScript-first state management solution with batched updates, computed properties, and middleware support.

Basic Store

Simple state container with batched updates, computed properties, and path subscriptions

Slices

Compose multiple slices into one store with bidirectional sync — usable standalone too

Middleware

Undo/redo, persistence, validation, throttle, debounce, broadcast, and logging

Model Store

Entity-based store with CRUD, persistence, validation, and list management

Dependency Injection

A class and factory based DI container with singleton, scoped, and transient lifetimes, parameterized factories, circular dependency detection, and React integration.

Class & Factory Registration

Register service classes with static dependency arrays or plain factory functions. Chainable API with interface support.

Lifetime Management

Singleton, scoped, and transient lifetimes. Parameterized factories for user-scoped services.

React Integration

ServiceProvider with default params, ServiceScope, useService hook, useContainer, and withServices HOC.

AI Integration

Built-in MCP Server for AI Assistants

Fluxo UI ships with a bundled Model Context Protocol server so Claude Code, GitHub Copilot, Cursor, and every other MCP-compatible assistant can generate correct Fluxo UI code on the first try — with accurate component names, import paths, props, examples, and theme tokens. No extra install, no separate package, always version-locked to the library you have.

Zero Extra Install

Bundled inside the fluxo-ui npm package. If you have the library, you have the MCP server.

Version-Locked

The index is regenerated on every build, so agents never suggest props from a version you do not have.

Local Only

Runs over stdio on your machine. No hosting, no accounts, no network calls, no telemetry.

View MCP Integration Guide →

Quick Start

1. Install
npm install fluxo-ui
2. Import & Use
import { Button } from 'fluxo-ui';

<Button label="Click me" />