Components
The shared components kikstart's admin and storefront are built on, running live.
These are the components every kikstart surface is built on: the grid, the filter, the form, the surface and the main menu. The pages here run the real components against demo data.
| Component | 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 |
They are not peers. grid composes filter and form and carries three times their surface; filter depends on neither.
Copy. Every string comes from the message catalogue through next-intl, so a tenant's text overrides reach it like any other string. A filter or column label may be a message path or literal text; a path that exists is translated and anything else is drawn as written.
Configuration. A grid reads its columns, filters and view settings from a context, filled from the module's settings row, rather than from a prop threaded through every component between the page and the cell. Adding, editing, deleting and selecting are each a flag switched on there, so a grid that only lists needs nothing and a grid that writes says so.
Admin data tables and card surfaces under one set of chrome.
Fields, validation, the surface shells and the submit contract.
The filter sidebar, its controls, sorting and the criteria they produce.
One body, rendered as a dialog, a sheet or a page of its own.
A public mega-menu that collapses to a drawer when it stops fitting.