A complete React component system with visual form builder, ui builder, chart library, theme customization lab, and production-ready code export. Built with Radix UI primitives and Tailwind CSS.
Add components and forms directly to your project using the Afno UI CLI. Works with npm, pnpm, yarn, and bun.
Initialize Afno UI in your project
Sets up Tailwind CSS, CSS variables, utility functions, and the base design system.
Add UI components
Install individual components. Each component includes its source code, types, and variants.
Add specific variants (optional)
Install specific component variant styles, sizes, and configurations.
Initialize the Form System
Installs shared types, hooks, and utils, then one stack from the registry (default: React Hook Form with ReactHookForm / ReactHookFormField and field components). Use --tanstack, --action, or --stack tanstack|action for the other stacks. Adds Zod and the matching runtime deps (e.g. react-hook-form, @tanstack/react-form).
Add a form template
Adds a registry form variant (under components/ui/forms/). If the form system is not installed yet, the CLI installs the stack first (default RHF; pass the same --stack / --tanstack / --action flags as with form init).
From form building to component theming — a complete toolkit for React developers.
Drag-and-drop form builder with 25+ field types including async, infinite scroll, and combobox variants. Export production-ready React + TypeScript code.
Live CSS variable editor for every component. Edit colors, spacing, typography, and see changes in real-time across the entire design system.
Pre-built form examples: contact, login, payment, survey, multi-step, and more — same JSON field config with React Hook Form, TanStack Form, or ActionForm (`npx afnoui form init --stack …`).
Analytics dashboard with stats cards, data tables, recent activity feed, and quick actions. Complete with responsive layout and charts.
Bar, Line, Pie, and Area charts with 25+ variants — hover tooltips, gradient fills, sparklines, exploded slices, and full RTL/LTR support.
Button, Card, Dialog, Tabs, Accordion, Tooltip, and many more — each with a dedicated preview page showing all variants and states.
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
Add fields, configure properties, set up conditional logic and validation rules — all through the visual builder interface.
See your form live with full validation. Test conditional visibility, dependent dropdowns, and auto-populate transforms.
Copy the generated TypeScript code into your project. Choose runtime or compile-time schema. Add hydration for backend data.
Start with the form builder, explore components, or install via CLI.