# AfnoUI — full reference for AI agents > 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. This document is the complete, machine-readable description of AfnoUI. It is generated from the same source as the site's structured data, so every statement here matches what the site itself claims. - Homepage: https://afnoui.com - Index version of this file: https://afnoui.com/llms.txt - Source code: https://github.com/AFNOUI/AFNO_UI - npm package: afnoui — https://www.npmjs.com/package/afnoui - Registry the CLI reads: https://afnoui.com/registry - License: MIT (free and open source) ## What AfnoUI is AfnoUI is a registry-driven React + TypeScript component library and CLI. Rather than shipping a runtime package, the `afnoui` CLI copies component source into your repository, so you own and can edit every file. On top of the component layer it provides visual builders that generate production code: forms, data tables, kanban boards, and flow/tree diagrams. Stack: Next.js 15, React 19, TypeScript, Tailwind CSS v4, Radix UI primitives, Zod validation, and a choice of React Hook Form, TanStack Form, or React's useActionState for forms. ## What makes it different - **You own the code.** Components are written into your repo as source, not imported from `node_modules`. There is no runtime dependency on AfnoUI. - **Edits are never silently overwritten.** The CLI records a hash of every file it writes in `afnoui.json`. If you have changed one of those files, a re-install stops and asks; only `--force` overwrites. Files AfnoUI never wrote are never touched, and `--dry-run` previews every write. - **No third-party drag-and-drop library.** All drag interactions — sortable lists, kanban boards, table row and column reorder, nested trees — are built on raw pointer events, so nothing like @dnd-kit enters your dependency tree. Mouse, touch, and pen are supported by the same code path, with axis-aware autoscroll, an activation distance so plain clicks still fire, and Escape to cancel a drag. - **No charting dependency.** All 17 chart types across 93 variants are built from scratch, with full RTL and LTR support. - **Builds round-trip as JSON.** Every builder exports its complete state — the configuration, the data, and any custom cell or card renderers — as one JSON document, and imports it back to the identical build, including the template variant it started from. Nothing is stored on a server; the JSON belongs to you and can live in a repo or an issue. - **Builds are validated before export.** Each builder runs a Build health check and reports real configuration faults with their fix: duplicate field names or column ids, conditional fields watching a field that no longer exists, columns whose data key is absent from the rows, kanban cards pointing at a deleted column, columns over their WIP limit, flow nodes with a route action but no href. These are precisely the faults that would otherwise appear as broken generated code inside your project. ## Builders ### Visual Form Builder URL: https://afnoui.com/form-builder Build React forms visually — drag and drop 25+ field types including async, infinite-scroll, combobox, and dependent dropdowns. Add conditional logic and Zod validation, preview live, then export production-ready React + TypeScript for React Hook Form, TanStack Form, or Action Form. Topics: visual form builder, React form builder, drag and drop form builder, form generator React TypeScript, conditional logic forms, dependent dropdowns, Zod form validation, React Hook Form builder, TanStack Form builder How to use it: 1. Pick a starting point — choose a template from the header dropdown, or start from the blank form. 2. Drag field types from the palette onto the canvas. 25+ types are available, including async selects, infinite-scroll comboboxes, and dependent dropdowns. 3. Select any field to edit its label, name, validation, conditional visibility, and watch bindings in the properties panel. 4. Open the Preview tab to fill the form in with React Hook Form, TanStack Form, or Action Form, and read the Build health panel for anything that needs fixing. 5. Open the Export Code tab and copy the generated React + TypeScript, or install the engine with `npx afnoui form init`. **Which form libraries can the AfnoUI Form Builder export to?** The same form config exports to React Hook Form, TanStack Form, and React's useActionState (Action Form). You can switch libraries in the Preview tab and compare before exporting; the Zod schema is shared across all three. **How does conditional field logic work in the AfnoUI Form Builder?** Each field can declare a condition naming another field, an operator (equals, notEquals, contains, notEmpty, empty, in, isTrue, isFalse) and a value. The field renders only when the condition passes. The Build health panel flags any condition that points at a field which no longer exists, so a broken rule cannot ship silently. --- ### Table Builder URL: https://afnoui.com/table-builder Design production React data tables visually — column sorting, filtering, expandable rows, and pagination — then export type-safe React + TypeScript. Part of AfnoUI's registry-driven component system, installable with npx afnoui add. Topics: table builder React, React data table generator, data grid builder, sortable filterable table React, expandable rows table, TypeScript data table How to use it: 1. Choose a template from the header dropdown to start from a realistic table, or begin with the default. 2. Define your columns in the Columns editor — key, type, sorting, filtering, pinning, aggregation, and per-column cell renderers. 3. Toggle table features in the Settings panel: search, pagination, virtualization, row selection, expandable rows, inline edit, grouping, and nested headers. 4. Load your own rows via JSON → Sample data, or press Generate 1k rows to stress-test virtualization. 5. Check the Build health panel, then export from the Export tab or install the engine with `npx afnoui table init`. **Can I load my own data into the AfnoUI Table Builder?** Yes. The JSON dialog has a Sample data tab that takes a plain array of row objects and swaps the rows without touching your column definitions or settings. Rows missing an id, or sharing one, are repaired automatically and reported. **How does the AfnoUI table handle very large datasets?** Enable virtualization to render only the visible rows using TanStack Virtual, or enable pagination to page through them. The Build health panel warns when both are on at once (a page is small enough that virtualizing adds cost without benefit) and when hundreds of rows are rendering with neither enabled. --- ### Kanban Builder URL: https://afnoui.com/kanban-builder Build drag-and-drop kanban boards visually and export production React + TypeScript — with a custom drag-and-drop engine and no @dnd-kit dependency. Configure columns, cards, and drag behavior, then install into your project with the afnoui CLI. Topics: kanban builder React, React kanban board, drag and drop board React, kanban board generator, no dnd-kit kanban, React board TypeScript How to use it: 1. Pick a board template from the header dropdown — sprint board, bug tracker, CRM pipeline, hiring pipeline, and more. 2. Edit columns in the settings panel: title, accent colour, and an optional WIP limit. 3. Choose a layout — classic board, compact grid, swimlanes, timeline, or calendar — and select which optional card fields to surface. 4. Add and edit cards in the Cards editor, or drag them between columns on the board itself. 5. Read the Build health panel, then export from the Export tab or install the engine with `npx afnoui kanban init`. **Does the AfnoUI kanban board use @dnd-kit or react-beautiful-dnd?** Neither. Drag and drop is built directly on pointer events, so it works with mouse, touch, and pen with no third-party drag library in your dependency tree. It includes axis-aware autoscroll, an activation distance so plain clicks still fire, and Escape to cancel a drag. **What are WIP limits in the AfnoUI Kanban Builder?** A WIP (work-in-progress) limit caps how many cards a column should hold. Turn on WIP limits in settings and set a limit per column; the board renders an over-limit column in its warning state, and the Build health panel lists exactly which columns are over and by how much. --- ### Tree Builder URL: https://afnoui.com/tree-builder Create interactive tree and node-graph structures visually — hierarchies, org charts, and flow-style diagrams — and export React + TypeScript. Built on AfnoUI's accessible, themeable component system. Topics: tree builder React, node graph editor React, React tree component, hierarchy diagram builder, org chart React, flow diagram React How to use it: 1. Choose one of 30+ workflow templates from the searchable header dropdown. 2. Select any node to edit its label, badge, icon, colour, edge label, and per-node dataset. 3. Set what each node does when clicked — open a dialog, drawer, or panel, navigate to a route, or show a data table. 4. Pick a layout and connector style, and enable pan and zoom for larger flows. 5. Review the Build health panel, then export the generated files from the Export Code tab or install the engine with `npx afnoui tree init`. **What can a node do when clicked in the AfnoUI Flow Builder?** Each node declares a click action: none, a dialog, a drawer, a side panel, a route navigation, or a data table rendered in a dialog or panel. Dialog, drawer, and panel actions carry their own title and body. The Build health panel flags route actions with no href and dialogs with neither a title nor a body. **Can the AfnoUI Flow Builder attach data to individual nodes?** Yes. Every node can carry its own dataset, surfaced through the node data table, alongside tags used by the graph toolbar's chip filters and a sort key for custom ordering. ## All features ### Visual Form Builder URL: https://afnoui.com/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. ### Table Builder URL: https://afnoui.com/table-builder Build production data tables with sorting, filtering, expandable rows, and pagination, then export React + TypeScript. ### Kanban Builder URL: https://afnoui.com/kanban-builder Design drag-and-drop kanban boards visually with no @dnd-kit dependency, and export production React + TypeScript. ### Tree Builder URL: https://afnoui.com/tree-builder Build interactive tree and node-graph structures visually and export React + TypeScript. ### Schema Engine URL: https://afnoui.com/schema-engine Model database tables, columns, and relations visually and export DDL — the first tool in a wider data toolkit. ### Drag & Drop URL: https://afnoui.com/dnd 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. ### Component Lab URL: https://afnoui.com/lab Live CSS-variable theme editor for every component with design-token export across the whole system. ### Chart Library URL: https://afnoui.com/charts 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. ### 30+ UI Components URL: https://afnoui.com/components Accessible, themeable components — Button, Card, Dialog, Tabs, Accordion, Tooltip, Combobox, Command, and more. ## CLI reference `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`). Every command also accepts `--dry-run`, `--force`, and `--debug`. ## Frequently asked questions ### 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.