A complete React component system with five visual builders — forms, tables, kanban, trees, and schemas — plus a 17-type chart library, a drag-and-drop engine with no third-party dependency, a live theme lab, and a CLI that writes production TypeScript straight into your project. Built on Radix UI and Tailwind CSS v4.
npx afnoui initSets up Tailwind CSS v4, CSS variables, the cn helper, and the base design system. Add --dnd to include the drag-and-drop engine up front.
350+
Variants
30+
Components
17
Chart types
9
DnD patterns
6
Engine systems
Pick your package manager, then browse the commands by what you are trying to do. Source is written into your project — never added as a runtime dependency.
Three commands take you from an empty project to components you own the source of. Run them in order the first time.
npx afnoui initScaffolds afnoui.json, sets up Tailwind CSS v4, CSS variables, and the cn helper. Add --dnd to include the drag-and-drop engine up front.
npx afnoui add button card dialog tabsWrites component source, types, and variants into your project. Nothing becomes a runtime dependency.
npx afnoui add button/variantsPull one variant instead of a whole component — styles, sizes, states, and layout presets.
Append these to any command above.
--dry-runPreview every write and install without touching disk or your package manager.
--forceOverwrite managed files even where you have edited them.
--debugPrint stack traces, registry fetch URLs, and the detected package manager.
AfnoUI records a hash of every file it writes in afnoui.json. If you have changed one of those files since, a re-install stops and asks before touching it — and only --force overwrites. Files AfnoUI never wrote are left alone entirely.
Every command, flag, and example in one place:
npx afnoui helpFive visual builders, a chart library, a drag-and-drop engine, and a themeable component set — one registry behind all of it.
Drag-and-drop form builder with 25+ field types including async, infinite scroll, and combobox variants. Export production-ready React + TypeScript for React Hook Form, TanStack Form, or Action Form.
Compose data tables visually — sorting, filtering, pagination, expandable rows, custom cell renderers, and a row-action API. Exports the same engine the 26 registry table variants are built on.
Design drag-and-drop boards with 1:1 drag previews and edge-correct drop resolution. Reusable, per-card, or JSX-dialog card renderers — and no @dnd-kit anywhere.
Build hierarchies and node graphs on a pannable canvas with computed layouts, a graph toolbar, and nested drag reordering. Exports as a self-contained TreeCanvas engine.
Model tables, columns, and relations visually, then export DDL. The first piece of a wider data toolkit — JSON ↔ CSV / YAML converters are next.
17 chart types — bar, line, area, pie, radar, scatter, gauge, funnel, treemap, candlestick, waterfall, heatmap, sankey, and more — across 93 variants with full RTL/LTR support and no charting library.
Sortable lists, multi-list transfer, trash zones, nested trees, image grids, and table row reorder — built on raw pointer events, so nothing third-party ships with it.
Live CSS variable editor for every component. Edit colors, spacing, typography, and see changes in real-time across the entire design system.
Button, Card, Dialog, Tabs, Accordion, Tooltip, Combobox, Command, and many more — each with a dedicated preview page showing all variants and states.
Every variant is a real, working page you can preview here first — then pull into your project with a single command.
Contact, login, payment, survey, multi-step, and more — one JSON field config across three form stacks.
From simple lists to server-driven CRM grids with row actions and custom cell renderers.
Sprint boards, pipelines, and swimlanes with drag-and-drop already wired up.
Org charts, file trees, mind maps, and node graphs on a pannable canvas.
17 types — bar, line, area, pie, radar, gauge, sankey, candlestick, and more.
Sortable lists, multi-list transfer, trash zones, nested trees, and table row reorder.
JSON-driven forms with validation, conditional logic, and hydration — all configurable through a visual interface.
4 Layouts
Single, Multi-Tab, Wizard, Compact
Dependent Options
Cascading dropdowns (Country → State)
Async & Infinite
API-fetched and paginated field types
Dual Schema
Runtime or compile-time Zod validation
Live Preview
Test validation and submit in real-time
Form Hydration
Load dropdown options from backend APIs
Auto-Populate
Watch fields with transform constraints
Conditional Logic
Show/hide fields based on other field values
Design it here, install it there, then it is simply your code.
Open one of the five builders, or browse 350+ variants. Every one is a live, working page here — not a screenshot.
Fields, columns, cards, nodes, relations. Conditional logic, validation, custom renderers, and row actions — all configured in the UI.
Copy the generated TypeScript, or run one add command and the CLI writes the variant, its engine, and its npm deps into your project.
It is your source from that moment — no runtime dependency, and re-installs never overwrite what you have edited without --force.
What AfnoUI is, how the CLI behaves, and how it compares.
Start in the UI Lab, open a builder, or install straight from the CLI.