# AfnoUI > AfnoUI is the open-source React + TypeScript builder platform — drag-and-drop form, table, kanban, tree, and chart builders plus drag-and-drop utilities, 30+ accessible Radix UI + Tailwind CSS v4 components, and a live theme lab. Install with one command: npx afnoui add. Stack: Next.js 15, React 19, TypeScript, Tailwind CSS v4, Radix UI, Zod, React Hook Form / TanStack Form. License: Open source (MIT). Homepage: https://afnoui.com Full corpus for AI agents: https://afnoui.com/llms-full.txt Registry (wire format the CLI fetches): https://afnoui.com/registry CLI package (npm): afnoui — https://www.npmjs.com/package/afnoui Source: https://github.com/AFNOUI/AFNO_UI Reddit: https://reddit.com/user/AfnoUI Instagram: https://instagram.com/afno.ui ## CLI commands - `npx afnoui init` — Initialize AfnoUI in a project — sets up Tailwind CSS, CSS variables, utilities, and the base design system. - `npx afnoui add button card dialog tabs` — Add UI components. Each component is written into your project with its source, types, and variants. - `npx afnoui add button/variants` — Add specific component variants (styles, sizes, states). - `npx afnoui form init` — Initialize the form system. Defaults to React Hook Form; use --tanstack or --action for other stacks. Adds Zod and matching deps. - `npx afnoui table init` — Install the complete shared table engine — types, utils, default cell renderers, the row-action layer, and runtime deps. - `npx afnoui kanban init` — Install the complete shared kanban engine — board and card runtime, card renderers, and the drag-and-drop primitives. - `npx afnoui tree init` — Install the complete shared tree and node-graph engine — TreeCanvas, layout computation, graph types, and GraphToolbar. - `npx afnoui dnd init` — Install the drag-and-drop primitives (components/dnd/*) — pointer-event based, with no third-party DnD library. - `npx afnoui chart init` — Install the complete chart system — chart primitives plus every one of the 17 chart types in the registry. - `npx afnoui add forms/forms-contact` — Add a ready-made variant. Works for every category: forms/, tables/, kanban/, tree/, charts//, and dnd/. The matching engine and the variant's npm dependencies are installed automatically. - `npx afnoui list variants` — List every category and variant slug in the registry. Use `npx afnoui list` for base components, and add --json to either for scriptable output. - `npx afnoui update` — Update installed components to the latest registry version. - `npx afnoui doctor` — Check your setup and registry connectivity. - `npx afnoui diagnose` — Repair stale install locks and expired registry cache entries. - `npx afnoui clean` — Interactively remove UI components, the form system, form variants, and afnoui.json. - `npx afnoui help` — Show the full command reference with a copy-pasteable example for every command. Every command also accepts --dry-run, --force, and --debug. Works with npm, pnpm, yarn, and bun (`npx` / `pnpm dlx` / `yarn dlx` / `bunx`). ## Features - Visual Form Builder — Drag-and-drop form builder with 25+ field types (async, infinite-scroll, combobox, dependent dropdowns), conditional logic, and Zod validation. Exports production React + TypeScript. https://afnoui.com/form-builder - Table Builder — Build production data tables with sorting, filtering, expandable rows, and pagination, then export React + TypeScript. https://afnoui.com/table-builder - Kanban Builder — Design drag-and-drop kanban boards visually with no @dnd-kit dependency, and export production React + TypeScript. https://afnoui.com/kanban-builder - Tree Builder — Build interactive tree and node-graph structures visually and export React + TypeScript. https://afnoui.com/tree-builder - Schema Engine — Model database tables, columns, and relations visually and export DDL — the first tool in a wider data toolkit. https://afnoui.com/schema-engine - Drag & Drop — Nine drag-and-drop patterns — sortable lists, multi-list transfer, trash zones, nested trees, image grids, table row reorder — built on raw pointer events with no third-party DnD library. https://afnoui.com/dnd - Component Lab — Live CSS-variable theme editor for every component with design-token export across the whole system. https://afnoui.com/lab - Chart Library — 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, built from scratch with zero charting dependencies. https://afnoui.com/charts - 30+ UI Components — Accessible, themeable components — Button, Card, Dialog, Tabs, Accordion, Tooltip, Combobox, Command, and more. https://afnoui.com/components ## FAQ ### What is AfnoUI? AfnoUI is an open-source, registry-driven React + TypeScript component library and CLI. It provides accessible Radix UI + Tailwind CSS v4 components plus visual builders for forms, tables, kanban boards, trees, and database schemas, a 17-type chart library, a dependency-free drag-and-drop engine, and a live theme lab. ### How do I install AfnoUI? Run `npx afnoui init` to set up Tailwind, CSS variables, and the base design system, then `npx afnoui add button card dialog` to add components. It works with npm, pnpm, yarn, and bun (npx / pnpm dlx / yarn dlx / bunx). ### What CLI commands does AfnoUI have? Setup: `afnoui init` (design system; add --dnd for the drag-and-drop engine). Install: `afnoui add ` and `afnoui add /` for variants. Engine systems: `afnoui form init`, `table init`, `kanban init`, `tree init`, `dnd init`, and `chart init` each install the complete shared system for that category. Discover: `afnoui list` and `afnoui list variants`. Maintain: `afnoui update`, `afnoui doctor`, `afnoui diagnose`, and `afnoui clean`. Run `afnoui help` for the full reference. Every command accepts --dry-run, --force, and --debug. ### Is AfnoUI free and open source? Yes. AfnoUI is free and open source. The CLI writes component source directly into your project, so you own and can edit the code — it is not a runtime dependency. ### Will the AfnoUI CLI overwrite my changes? No. AfnoUI records a hash of every file it writes in afnoui.json. If you have edited one of those files since it was installed, a re-install stops and asks before touching it, and only --force overwrites. Files AfnoUI never wrote are left alone entirely, and --dry-run previews every write and install without touching disk. ### How is AfnoUI different from shadcn/ui? Like shadcn/ui, AfnoUI copies source into your repo instead of shipping a black-box package. It goes further with visual builders (form, table, kanban, tree, schema), a 17-type chart library, a drag-and-drop engine with no third-party dependency, and a live theme lab, all driven by a hosted registry the CLI fetches from at install time. ### Which frameworks and tools does AfnoUI use? AfnoUI targets Next.js 15 and React 19 with TypeScript, Tailwind CSS v4, and Radix UI. Forms use Zod with React Hook Form, TanStack Form, or Action Form. ### Can I build forms without writing code? Yes. The Visual Form Builder lets you drag and drop 25+ field types, add conditional logic and dependent dropdowns, and export production-ready React + TypeScript with runtime or compile-time Zod validation. ### Can I save a build and come back to it later? Yes. Every builder has a JSON button that exports the complete build as a single JSON document — configuration, data, and any custom cell or card renderers. Paste that JSON back into the Import tab and you get the exact same build, including the template variant it started from. Nothing is stored on a server, so the JSON is yours to keep in a repo, a ticket, or a gist. ### Does AfnoUI check my build for mistakes before I export? Yes. Each builder runs a Build health check over your configuration and lists real problems with the exact fix: duplicate field names or column ids, conditional fields watching a field that no longer exists, columns whose data key is missing from the rows, kanban cards pointing at a deleted column, columns over their WIP limit, and flow nodes with a route action but no href. These are the mistakes that would otherwise surface as broken generated code in your project. ## Notes - You own the source: the CLI writes components into your repo (not a runtime dependency). - The CLI fetches generated registry JSON from https://afnoui.com/registry at install time, so components stay current. - Every builder exports its complete state as one JSON document and imports it back exactly — configuration, data, and custom renderers — so a build can be saved in a repo or a ticket rather than a server. - Every builder runs a Build health check that names configuration mistakes and their fix before you export.