# Blocks, installed by the shadcn CLI _Box Kite 2.1.0 · a markdown copy of https://www.box-kite.dev/registry/_ Finished sections you install into your own repository and then own — a data grid, a settings form and a dashboard shell. A shadcn registry is JSON over HTTP, and the CLI that reads it does not care which library the code imports. These three items install the `@box-kite/react` package and drop wired code beside it — so the parts you will change are yours from the first commit, and the parts you will not stay a dependency you can upgrade. ## Two ways in Point the CLI straight at an item, from any project that has a `components.json`: ```shell npx shadcn@latest add https://www.box-kite.dev/r/data-grid.json ``` Or register the namespace once, and then name the block rather than its address. Add this to `components.json`: ```javascript { "registries": { "@box-kite": "https://www.box-kite.dev/r/{name}.json" } } ``` After that, `npx shadcn@latest add @box-kite/data-grid` — and `npx shadcn@latest search @box-kite` lists what is here. The CLI expects a `components.json` carrying a `tailwind` key, and empty strings satisfy it — these blocks write no CSS file and import no stylesheet, because every style in them is a prop. ## Invoices data grid A virtualized data grid wired to sample invoices: search, column filters, grouping, totals, an editable amount that is validated, range selection with copy and paste, and CSV/XLSX export. ```shell npx shadcn@latest add https://www.box-kite.dev/r/data-grid.json ``` [Open in v0](https://v0.dev/chat/api/open?url=https%3A%2F%2Fwww.box-kite.dev%2Fr%2Fdata-grid.json) [The item JSON](https://www.box-kite.dev/r/data-grid.json) 2 files · installs @box-kite/react ## Invoices Search the table, filter a column, group by Team from a column menu, edit an amount, select a block of cells and copy it, or export what is on screen. Invoices Reference Customer Team Status Amount Issued Select... Select... INV-2480 Ardent Supply Northern paid $400 2026-01-01 INV-2481 Beacon Freight Southern pending $537 2026-02-08 INV-2482 Corvus Analytics Eastern overdue $674 2026-03-15 INV-2483 Delta Hardware Western paid $811 2026-04-22 INV-2484 Evergreen Mills Northern pending $948 2026-05-02 INV-2485 Fairline Media Southern overdue $1,085 2026-06-09 INV-2486 Granite Foods Eastern paid $1,222 2026-07-16 INV-2487 Harbour Logistics Western pending $1,359 2026-08-23 INV-2488 Ardent Supply Northern overdue $1,496 2026-09-03 INV-2489 Beacon Freight Southern paid $1,633 2026-10-10 INV-2490 Corvus Analytics Eastern pending $1,770 2026-11-17 INV-2491 Delta Hardware Western overdue $1,907 2026-12-24 INV-2492 Evergreen Mills Northern paid $2,044 2026-01-04 INV-2493 Fairline Media Southern pending $2,181 2026-02-11 INV-2494 Granite Foods Eastern overdue $2,318 2026-03-18 INV-2495 Harbour Logistics Western paid $2,455 2026-04-25 INV-2496 Ardent Supply Northern pending $2,592 2026-05-05 INV-2497 Beacon Freight Southern overdue $2,729 2026-06-12 INV-2498 Corvus Analytics Eastern paid $2,866 2026-07-19 INV-2499 Delta Hardware Western pending $3,003 2026-08-26 INV-2500 Evergreen Mills Northern overdue $3,140 2026-09-06 INV-2501 Fairline Media Southern paid $3,277 2026-10-13 INV-2502 Granite Foods Eastern pending $3,414 2026-11-20 INV-2503 Harbour Logistics Western overdue $3,551 2026-12-27 INV-2504 Ardent Supply Northern paid $3,688 2026-01-07 INV-2505 Beacon Freight Southern pending $3,825 2026-02-14 INV-2506 Corvus Analytics Eastern overdue $3,962 2026-03-21 INV-2507 Delta Hardware Western paid $4,099 2026-04-01 INV-2508 Evergreen Mills Northern pending $4,236 2026-05-08 INV-2509 Fairline Media Southern overdue $4,373 2026-06-15 All invoices 200 $1,001,500 Rows: 200 Selected: 0 **invoices-grid.tsx** ```jsx 'use client'; import Box from '@box-kite/react'; import DataGrid, { type CellModel, type GridDefinition } from '@box-kite/react/components/dataGrid'; import Flex from '@box-kite/react/components/flex'; import { H2, P } from '@box-kite/react/components/semantics'; import { type Invoice, invoices } from './invoice-rows'; /** * An invoices table with what a real one needs: search, per-column filters, grouping from the column * menu, totals, an editable amount that is validated, a block of cells to copy, and CSV/XLSX export. * * None of it is configuration to keep in sync — the grid is one `def` object. Swap `invoices` for your * own rows and edit the columns. */ const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }); const STATUS_STYLES = { paid: { bgColor: 'emerald-100', color: 'emerald-700', theme: { dark: { bgColor: 'emerald-950', color: 'emerald-300' } } }, pending: { bgColor: 'amber-100', color: 'amber-700', theme: { dark: { bgColor: 'amber-950', color: 'amber-300' } } }, overdue: { bgColor: 'rose-100', color: 'rose-700', theme: { dark: { bgColor: 'rose-950', color: 'rose-300' } } }, } as const; // A cell renderer is a component defined outside the render: a new identity on every render remounts // the whole column on every scroll. function StatusCell({ cell }: { cell: CellModel }) { const status = cell.value as Invoice['status']; return ( {status} ); } // `fontVariantNumeric` has no prop of its own, so it goes through `css` — still one shared class, not // a style attribute. function AmountCell({ cell }: { cell: CellModel }) { return ( {money.format(cell.value as number)} ); } const definition: GridDefinition = { rowKey: 'id', title: 'Invoices', topBar: true, bottomBar: true, globalFilter: true, rowSelection: { pinned: true }, rangeSelection: true, footer: { label: 'All invoices' }, export: { fileName: 'invoices' }, visibleRowsCount: 12, rowHeight: 44, columns: [ { key: 'reference', header: 'Reference', width: 120, filterable: true }, { key: 'customer', header: 'Customer', width: 170, filterable: true }, { key: 'team', header: 'Team', width: 130, filterable: { type: 'multiselect' } }, { key: 'status', header: 'Status', width: 120, filterable: { type: 'multiselect' }, Cell: StatusCell, aggregate: 'count' }, { key: 'amount', header: 'Amount', width: 130, align: 'end', editable: true, filterable: { type: 'number' }, aggregate: 'sum', Cell: AmountCell, AggregateCell: ({ cell }) => ( {cell.value === null ? '' : money.format(Number(cell.value))} ), // An export runs no React, so the column says what it writes rather than exporting the renderer. exportValue: (row) => row.amount, exportFormat: '#,##0', }, { key: 'issued', header: 'Issued', width: 120 }, ], // One function both judges an edit and is told about it: a string is a refusal, and the message is // what the cell shows. onCellEdit: ({ value }) => { const amount = Number(value); if (!Number.isFinite(amount) || amount <= 0) return 'An invoice is worth more than nothing.'; if (amount > 100_000) return 'Anything over $100,000 needs an approval.'; }, }; export default function InvoicesGrid() { return (

Invoices

Search the table, filter a column, group by Team from a column menu, edit an amount, select a block of cells and copy it, or export what is on screen.

); } ``` **invoice-rows.ts** ```jsx /** The rows the block is wired to. Replace this file with your own fetch — the grid reads plain objects. */ export interface Invoice { id: number; reference: string; customer: string; team: string; status: 'paid' | 'pending' | 'overdue'; amount: number; issued: string; } const TEAMS = ['Northern', 'Southern', 'Eastern', 'Western']; const STATUSES = ['paid', 'pending', 'overdue'] as const; const CUSTOMERS = [ 'Ardent Supply', 'Beacon Freight', 'Corvus Analytics', 'Delta Hardware', 'Evergreen Mills', 'Fairline Media', 'Granite Foods', 'Harbour Logistics', ]; /** * Two hundred invoices generated from the index, so the block has something to sort, filter, group and * total without shipping a data file — and every reload shows the same table. */ export const invoices: Invoice[] = Array.from({ length: 200 }, (_, index) => ({ id: index + 1, reference: `INV-${(2480 + index).toString()}`, customer: CUSTOMERS[index % CUSTOMERS.length], team: TEAMS[index % TEAMS.length], status: STATUSES[index % STATUSES.length], amount: 400 + ((index * 137) % 9600), issued: new Date(Date.UTC(2026, index % 12, ((index * 7) % 27) + 1)).toISOString().slice(0, 10), })); ``` ## Settings form A settings panel of real form controls — text fields, a searchable select, a radio group, a slider and a switch — that reads its own fields on submit, so none of it needs state. ```shell npx shadcn@latest add https://www.box-kite.dev/r/settings-form.json ``` [Open in v0](https://v0.dev/chat/api/open?url=https%3A%2F%2Fwww.box-kite.dev%2Fr%2Fsettings-form.json) [The item JSON](https://www.box-kite.dev/r/settings-form.json) 1 file · installs @box-kite/react ## Settings Every control here is a native element with its name attached, so the keyboard, the focus ring and the screen reader are the platform's. Display nameEmail AboutShown on your public profile. Time zone Europe/Chisinau ThemeFollow the systemLightDark Row density How tall a row is in tables across the app. Email me when something needs a decision **settings-form.tsx** ```jsx 'use client'; import Button from '@box-kite/react/components/button'; import Dropdown from '@box-kite/react/components/dropdown'; import Flex from '@box-kite/react/components/flex'; import Form from '@box-kite/react/components/form'; import RadioGroup from '@box-kite/react/components/radioGroup'; import { H2, Label, P, Span } from '@box-kite/react/components/semantics'; import Slider from '@box-kite/react/components/slider'; import Switch from '@box-kite/react/components/switch'; import Textarea from '@box-kite/react/components/textarea'; import Textbox from '@box-kite/react/components/textbox'; import { toast } from '@box-kite/react/components/toaster'; import { type ReactNode } from 'react'; /** * A settings panel: text fields, a searchable select, a radio group, a slider and a switch, each a real * form control. `Form` reads its own fields when it submits, so none of this needs state — `values` is * built from the elements carrying a `name`. * * `` has to be mounted once near the root of the app for the confirmation to show. */ export interface Settings { name: string; email: string; bio: string; timezone: string; theme: string; density: string; notify: boolean; } const TIMEZONES = ['Europe/Chisinau', 'Europe/London', 'America/New_York', 'Asia/Tokyo']; /** * A text field and its name. The control sits *inside* the `