# Blocks (/product/blocks)



A **block** is a component tree kikstart publishes as a shadcn registry item. You install one with the shadcn CLI and the files land in your own source tree, yours to edit. Blocks are free and the registry needs no key.

The registry is built but not yet hosted; the pages here run the real components so you can see what an item gives you before it is installable.

They are the same components kikstart's own admin runs on. A block therefore has to work with no tenant, no database and no message catalogue — each of those arrives through a context the block declares and its host fills.

## The items

Five items render something. Four are the libraries underneath them, installed automatically as dependencies of the ones you pick.

| Item          | What it is                                                                          |
| ------------- | ----------------------------------------------------------------------------------- |
| `grid`        | AG Grid, TanStack and list surfaces with cursor pagination and column persistence   |
| `filter`      | The filter sidebar, its pills, operators and sort controls                          |
| `form`        | React Hook Form and Zod fields, the modal and page shells, autosave, multi-select   |
| `surface`     | Routes one form between a dialog, a sheet and a page                                |
| `main-menu`   | The public mega-menu: desktop sections with featured items, and its mobile drawer   |
| `utils`       | The filter, grid, sort and pagination contracts the blocks share, plus the copy bag |
| `hooks`       | Debounce, latest-ref, change-effect, cursor-pages and revalidate-session            |
| `ui-extended` | The base-ui and ReUI ports the blocks build on                                      |
| `export`      | The CSV, Excel and PDF writers the grid calls                                       |

They are not peers. `grid` composes `filter` and `form` and carries three times their surface; `filter` depends on no other block.

## What a block may import

An npm package, a shadcn `ui` primitive, and other block files by relative path. Nothing else — no framework data layer, no translation library, no workspace package. That is what makes the files portable: they resolve the same way in your tree as in kikstart's.

## How your data reaches a block

Through a context the block declares and you fill.

**Copy.** Every string a block draws comes from `useCopy()`, which resolves against the bag shipped with `utils`. Override a string, or the whole bag, by mounting your own resolver; the block never learns what language it is in.

**Configuration.** A grid reads its columns, filters and view settings from a context rather than a prop threaded through every component between the page and the cell. Fill it from wherever your settings live.

Both crossings point inward, and both are optional: a block dropped in with no provider renders in English against its own defaults. Those defaults are read-only for a grid — adding, editing, deleting and selecting are each a flag you switch on through the configuration context, so a grid that only lists needs nothing and a grid that writes says so.

- [Grid](/product/blocks/grid) — Admin data tables and card surfaces under one set of chrome.

- [Form](/product/blocks/form) — Fields, validation, the surface shells and the submit contract.

- [Filter](/product/blocks/filter) — The filter sidebar, its controls, sorting and the criteria they produce.

- [Surface](/product/blocks/surface) — One body, rendered as a dialog, a sheet or a page of its own.

- [Main menu](/product/blocks/main-menu) — A public mega-menu that collapses to a drawer when it stops fitting.