UI Components

Installing a component

Inside a Grit project, the CLI writes the component into the right app for your architecture:

grit ui list                           # everything in the registry
grit ui list --category ecommerce      # narrow it down
grit ui add marketing-pricing-sections-three-tiers-with-toggle
grit ui add application-ui-tables-sortable-table-with-selection \
  application-ui-authentication-sign-in-card-with-oauth

A name is its category, then its group, then the component: ecommerce-product-grids-grid-with-ratings. Running grit ui list is the only reliable way to spell one.

Files land in components/grit-ui/ inside apps/web, falling back to apps/admin or a flat frontend/ depending on how the project was scaffolded. An existing file is never overwritten without --force — once you have edited a component, it is your code.

Outside a Grit project

Every component is a shadcn registry item, so the registry works with any React project that has Tailwind — no Grit required:

npx shadcn@latest add https://ui.gritframework.dev/r/marketing-hero-sections-split-with-code.json

That single command writes the component, merges Grit's design tokens into your globals.css, and adds the colour scale to your tailwind.config.ts. Both are needed: the tokens supply the palette, and the scale is what makes classes like text-text-muted resolve.

What is in the registry

The registry endpoints

The registry is plain JSON over HTTP, so anything that speaks the shadcn format can consume it — your own tooling included.

https://ui.gritframework.dev/r/registry.json   # the index
https://ui.gritframework.dev/r/<name>.json     # one item, source inlined

Each item carries its source in files[0].content rather than a path to fetch separately, which is what lets a single request produce a working component.

Components are yours

Nothing here is a dependency. There is no grit-ui package in your package.json, no version to keep up with, and no upgrade that can change a component out from under you. The trade is the usual one for generated code: improvements to a component do not reach copies you already installed. Re-run grit ui add --force if you want the newer version and have not edited yours.

They use Grit's design tokens, so in a scaffolded project they match the admin panel and auth pages out of the box.