l8components

• Components: every shadcn/ui component, grouped by category, with live examples and the full source.
• Blocks: ready-made, animated sections built with Motion. The home page is assembled from them.

Everything is installed with the shadcn CLI from our own registry, namespace @l8.

Use the registry in a projectCopy Anchor Link

Add the registry to your project's components.json (replace the URL with wherever this site runs):

{
  "registries": {
    "@l8": "http://localhost:3000/r/{name}.json"
  }
}

Then apply the theme once and add what you need:

npx shadcn@latest add @l8/theme
npx shadcn@latest add @l8/button @l8/card
npx shadcn@latest add @l8/hero

Dependencies between items (for example @l8/sidebar needing @l8/button) are installed automatically.

Run locallyCopy Anchor Link

pnpm install
pnpm dev     # docs only, http://localhost:3000
pnpm build   # builds the registry (public/r) and the site
pnpm start

The registry JSON is generated by pnpm registry:build: scripts/build-registry.mjs writes registry.json from the files in components/ui, components/blocks, hooks and lib/highlighter.tsx, then shadcn build writes public/r/*.json.

Add a blockCopy Anchor Link

1. Write it in components/blocks/<name>.tsx (use @container queries so it fits both the docs frame and full pages).
2. Create content/docs/blocks/<name>.mdx and add it to content/docs/blocks/meta.json.

Add a componentCopy Anchor Link

1. Write it in components/ui/<name>.tsx.
2. Put an example in components/<name>-example.tsx.
3. Create content/docs/components/<name>.mdx (copy an existing page as a template) and list it under a category in content/docs/components/meta.json.

New files are picked up by the registry automatically on the next pnpm registry:build.