ui-library

A public component / block registry, modeled on shadcn-ui's distribution model. Lets external developers pull Supabase-flavoured components, blocks, and Supabase-integrated examples directly into their own projects.

Purpose

Two audiences:

1. Internal — a sandbox for new components before they land in packages/ui.
2. External — a publishable registry that npx shadcn add ... can consume.

Directory layout

apps/ui-library/
├── app/                    # Next.js App Router site
├── components/             # Site chrome
├── content/docs/           # MDX docs per component
├── config/                 # Sidebar config
├── contentlayer.config.js  # Contentlayer schema
├── registry/               # Component definitions (full source + dependencies)
├── __registry__/           # Generated registry artifact
├── scripts/                # build-registry helpers
├── supabase/               # Local Supabase project for live previews
├── components.json         # shadcn-style registry metadata
└── public/

How it works

Components are authored under registry/. pnpm --filter ui-library build:registry produces a JSON registry consumed by the shadcn CLI. The site at apps/ui-library renders previews and doc pages so users can browse the registry before installing.

Some examples wire up real Supabase calls (auth UI, password reset, magic-link, etc.). The local supabase/ directory contains a project bootstrapped for those previews.

Local dev

cd apps/ui-library
pnpm i
pnpm dev      # → http://localhost:3000

The site uses Contentlayer for MDX, so a separate content watch task may be useful during deep edits.

Integration points

• Shares many primitives with packages/ui but is a distinct distribution surface.
• Examples that use Supabase rely on the embedded local project under apps/ui-library/supabase/.
• Shares Tailwind tokens with the rest of the workspace.

Entry points for modification

• Add a new registry component → add a folder under registry/, an MDX doc under content/docs/, register it in config/docs.ts, and run pnpm build:registry.
• Update the registry metadata that the shadcn CLI consumes → edit components.json.
• Try a component live → run pnpm dev and navigate to its preview page.