Introduction
Kadal UI is a set of open-source React components for the parts of an app where people spend their day: the screens with real data on them. The first component is a data grid: sorting, faceted filters, fuzzy search, grouping with aggregation, 50,000 virtualized rows, inline editing, spreadsheet-style keyboard ranges and clipboard, export, saved views, and more, typed end to end.
It is not an npm dependency you configure from the outside. It is a
shadcn registry: npx shadcn@latest add @kadal/data-grid
copies the TypeScript source into your project, where it is yours to read, change and delete. The
@kadal/ui package on npm is only the CLI that makes that one command shorter.
| Aarav Iyer | aarav.iyer@corp.example | Churned | Team | $0.00 | Dec 31, 2024 |
| Kavya Bose | kavya.bose@example.com | Active | Pro | $12.00 | Feb 20, 2024 |
| Yuki Rossi | yuki.rossi@mail.test | Churned | Pro | $0.00 | Jul 13, 2026 |
| Olivia Das | olivia.das@example.com | Churned | Team | $0.00 | Aug 21, 2025 |
| Ananya Rossi | ananya.rossi@corp.example | Churned | Pro | $0.00 | Mar 3, 2026 |
| Mia Dubois | mia.dubois@team.dev | Invited | Team | $696.00 | Jan 9, 2023 |
| Vihaan Reddy | vihaan.reddy@corp.example | Active | Free | $0.00 | Aug 13, 2026 |
| Nia Müller | nia.muller@mail.test | Paused | Free | $0.00 | Oct 24, 2026 |
| Theo Müller | theo.muller@corp.example | Paused | Enterprise | $3,160.00 | Nov 16, 2024 |
| Sofia Sharma | sofia.sharma@example.com | Active | Free | $0.00 | Feb 3, 2023 |
import { DataGrid, createDataGridColumns } from "@/components/ui/data-grid";
import { makePeople, PLAN_OPTIONS, STATUS_OPTIONS, type Person,} from "@/lib/data-grid-demo-data";
const col = createDataGridColumns<Person>();
const columns = col.columns([ col.text("name", { header: "Name" }), col.link("email", { header: "Email", href: (v) => `mailto:${v}` }), col.enum("status", { header: "Status", options: STATUS_OPTIONS }), col.enum("plan", { header: "Plan", options: PLAN_OPTIONS }), col.currency("mrr", { header: "MRR", currency: "USD" }), col.date("joinedAt", { header: "Joined" }),]);
const data = makePeople(120, 7);
/** The smallest useful grid: columns, data, and nothing else. */export default function DataGridBasic() { return <DataGrid name="basic" data={data} columns={columns} getRowId={(row) => row.id} />;}What it is built on
Section titled “What it is built on”| TanStack Table v9 | The headless core: row models, state in a TanStack Store, feature-typed APIs, tree-shaken to the features the grid registers. |
| shadcn/ui on Base UI | The menus, popovers, selects, checkboxes and buttons, in the flavour shadcn now ships by default. |
| TanStack Virtual | Only the rows in view are in the DOM once the row count passes a threshold. |
dnd kit (@dnd-kit/react) |
Dragging headers to reorder columns. |
| Tailwind CSS v4 | Styling through your own theme tokens: the grid looks like the rest of your app because it is the rest of your app. |
Who it is for
Section titled “Who it is for”- Teams on shadcn/ui who need more than the data-table recipe and don’t want a 200 kB vendor grid with a licence key.
- Admin consoles, back offices, analytics and ops tools, where the same grid is open all day and every shortcut saves a minute.
- Anyone who has fought a grid’s prop API to change one label.
Where to go next
Section titled “Where to go next”- Installation: the one command, and what it does to your project.
- Your first grid in 5 minutes: columns, data, a page with a grid on it.
- Data grid: every feature, one page each, with a live example and its code.
- Type safety: how the column builder and TanStack v9’s features keep everything typed.
- Playground: edit the examples in the browser.
Licence and support
Section titled “Licence and support”MIT. Report bugs and request features on GitHub, ask in Discussions or the Kadal Discord, and if the grid saves you a week, consider sponsoring the time that keeps it maintained.