Install React blocks with the shadcn CLI

Every block on this site is a registry item: one command installs it into your own repository, as code you then own.

A shadcn registry is JSON over HTTP, and the CLI that reads it does not care which library the code imports. Each item installs 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:

Terminal

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.

The blocks

Each one has a page of its own with the block running in light and dark and every file it writes — all of them are in the gallery. A whole page installs the same way, its design and its blocks with it, from the templates.

React invoice data grid

A virtualized invoice table with search, column filters, grouping, totals, an editable amount, copy and paste, and CSV/XLSX export.

Terminal

npx shadcn@latest add https://www.box-kite.dev/r/data-grid.json

React settings form

A settings panel of real form controls: text fields, a searchable select, a radio group, a slider and a switch, read on submit with no state.

Terminal

npx shadcn@latest add https://www.box-kite.dev/r/settings-form.json

React admin dashboard layout

The frame an admin app hangs off: a sidebar, a header with search, a theme toggle and an account menu, and a row of stat tiles.

Terminal

npx shadcn@latest add https://www.box-kite.dev/r/dashboard-shell.json

React product grid with filters

A React product grid with category and colour filters, sorting, an announced result count and cards that are one link each, light and dark.

Terminal

npx shadcn@latest add https://www.box-kite.dev/r/product-grid.json

React product image gallery

A React product image gallery: one large view and thumbnails that choose it, built as tabs so the arrow keys move between pictures.

Terminal

npx shadcn@latest add https://www.box-kite.dev/r/product-gallery.json

React product variant picker

Colour swatches and sizes as native radio groups, a quantity stepper and an Add to cart button, styled with :has(:checked) and no state.

Terminal

npx shadcn@latest add https://www.box-kite.dev/r/variant-picker.json

React cart items list

The lines of a React shopping cart: a picture, the options chosen, a quantity stepper, the line price and a remove button.

Terminal

npx shadcn@latest add https://www.box-kite.dev/r/cart-items.json

React order summary

A React order summary: subtotal, discount, shipping, tax and total from the cart, a discount code field and a free-shipping progress bar.

Terminal

npx shadcn@latest add https://www.box-kite.dev/r/order-summary.json

React credit card form

A React credit card form: number, name, expiry and security code, formatted as typed, checked on blur, with a card that fills in above.

Terminal

npx shadcn@latest add https://www.box-kite.dev/r/credit-card-form.json

React address form

A React shipping address form with the autocomplete tokens browsers fill from, a searchable country select and errors read aloud.

Terminal

npx shadcn@latest add https://www.box-kite.dev/r/address-form.json

React shipping method selector

Delivery options as selectable cards in React: a native radio group, one tab stop, the chosen card styled with :has(:checked).

Terminal

npx shadcn@latest add https://www.box-kite.dev/r/shipping-method.json

Where the JSON comes from

The blocks and templates are ordinary sources in the library's own repository, under registry/. They are type-checked by the same tsc run as the library, rendered on their pages from those same files, and inlined into the item JSON at build time. A block that stops compiling cannot be published, and what you install is what is running on its page.

The catalog is at https://www.box-kite.dev/registry.json, and each item at /r/<name>.json.

The components themselves are a package, not a registry item: install @box-kite/react and import Button, Dialog or DataGrid directly. A block is for the composition above them — the part that is always half yours.