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.

Data Table Variants

26 production-ready patterns — pick one, see the live preview, copy the code

Build your own

Simple Contact List

Basic table with search and pagination — ideal starter.

Contacts

A simple list of contacts.

		Phone
Alice Johnson	alice@example.com	+1 555-0101
Bob Smith	bob@example.com	+1 555-0102
Carol White	carol@example.com	+1 555-0103
David Brown	david@example.com	+1 555-0104
Eva Martinez	eva@example.com	+1 555-0105
Frank Lee	frank@example.com	+1 555-0106
Grace Hop	grace@example.com	+1 555-0107
Henry Ford	henry@example.com	+1 555-0108

Showing 1–8 of 8

1 / 1

Source Code

Install & set up

Everything this table needs: 2 generated files to copy and 23 shared engine files the CLI can install for you.

Data Source

Choose how data is loaded — only the matching helpers are generated.

Static Data

Pass Row[] as a prop. Sort/filter/paginate happens client-side.

API / Server-side

Generates useTableData with refetch + feature-aware mutators.

Install it with the CLI

recommended

Installs every file below and its packages in one command. The steps after this are only for doing it by hand.

npx afnoui add tables/tables-simple-list

Writes to 4 places

Or install the packages yourself

Only needed if you copied the files by hand instead of running the command above.

Runtime dependencies

npm install @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-dropdown-menu @radix-ui/react-progress @radix-ui/react-radio-group @radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-tooltip @tanstack/react-virtual class-variance-authority clsx lucide-react react tailwind-merge

Dev dependencies

npm install -D @types/react typescript

Generated files

Generated files are yours to copy and edit; shared engine files are installed once and reused.

Generated per table(2)

Shared engine — copy once(23)

Generated per table

Strongly-typed config object + Row interface for this table.

src/components/tables/tableConfig.ts

import type { TableBuilderConfig, TableRow } from "./types";

export interface Row extends TableRow {
  id: string;
  "name": string;
  "email": string;
  "phone": string;
}


export const tableConfig: TableBuilderConfig = {
  "title": "Contacts",
  "description": "A simple list of contacts.",
  "direction": "ltr",
  "density": "comfortable",
  "pageSize": 8,
  "sortMode": "client",
  "paginationMode": "client",
  "expandableLayout": "details",
  "expandableIconStyle": "chevron",
  "expandableIconPosition": "first",
  "paginationLayout": "full",
  "pageSizeOptions": [
    5,
    10,
    20,
    50,
    100
  ],
  "virtualRowHeight": 44,
  "virtualMaxHeight": 520,
  "enableDnD": false,
  "enableHover": true,
  "enableSearch": true,
  "enableExport": false,
  "enableFooter": false,
  "enableStriped": false,
  "enableBordered": false,
  "enableMultiSort": false,
  "enablePagination": true,
  "enableInlineEdit": false,
  "enableRowGrouping": false,
  "enableBulkActions": false,
  "enableAggregation": false,
  "enableRowSelection": false,
  "enableStickyHeader": false,
  "enableColumnResize": false,
  "enableColumnFilters": false,
  "enableNestedHeaders": false,
  "enablePinnedColumns": false,
  "enableVirtualization": false,
  "enableExpandableRows": false,
  "enableColumnVisibility": false,
  "columns": [
    {
      "id": "c1",
      "key": "name",
      "label": "Name",
      "type": "text",
      "sortable": true,
      "filterable": true,
      "visible": true,
      "align": "left"
    },
    {
      "id": "c2",
      "key": "email",
      "label": "Email",
      "type": "email",
      "sortable": true,
      "filterable": true,
      "visible": true,
      "align": "left"
    },
    {
      "id": "c3",
      "key": "phone",
      "label": "Phone",
      "type": "text",
      "sortable": false,
      "filterable": false,
      "visible": true,
      "align": "left"
    }
  ],
  "stickyMaxHeight": 600
} as const satisfies TableBuilderConfig;