A complete React component system with visual form builder, 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.
Gallery layouts and image presentation patterns. Masonry, grid, carousel, and lightbox variations for showcasing visual content.
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
Conditional Logic
Show/hide fields based on other field values
Auto-Populate
Watch fields with transform constraints
Dependent Options
Cascading dropdowns (Country → State)
Form Hydration
Load dropdown options from backend APIs
Dual Schema
Runtime or compile-time Zod validation
Async & Infinite
API-fetched and paginated field types
Live Preview
Test validation and submit in real-time
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.