s11a

A copy-in component library — my own components, yours to use. Not a dependency to install and pin: the source is copied into your project (via the shadcn CLI or the docs), and from then on it's just code in your repo, edit it however you like.

~160 components across six families:

• writing — prose blocks, blog-index widgets, post chrome, data-viz, endmatter (52)
• travel — a system of scrapbook artifacts: postcards, tickets, diary entries, receipts, and more (57)
• chat — one Bubble component styled to match eleven real platforms — iMessage, WhatsApp, Telegram, Slack, Discord, Reddit, Instagram, Messenger, Tinder, Bumble, Hinge (2)
• receipts — printed-receipt documents: bills, invoices, tickets (5)
• fitness — CSS gym objects: dumbbell, kettlebell, grippers, and more (6)
• objects — CSS/SVG desk objects & devices: phones, laptops, cameras, awards, stationery (36)

Built on one small design system (@sa/theme): a Rams-restraint skeleton, a Wes-Anderson palette, one marigold accent, quiet by default, dark or light.

Add a component

npx s11a add postcard

The s11a CLI is a 2.7 kB wrapper around the shadcn CLI — s11a list shows every component. The long form works too:

npx shadcn@latest add https://ui.shreshtharora.com/r/postcard.json

Every component is prop-driven with sensible defaults, so it renders out of the box and is fully overridable. Dependencies (shared primitives, the theme) are pulled in automatically.

Repo layout

This is a pnpm + Turborepo workspace.

apps/ui/          the docs + registry site (ui.shreshtharora.com)
  registry/       the component source of truth, grouped by family
  scripts/        build-registry.ts — compiles registry/ into shadcn-schema
                  JSON under public/r/<name>.json (the URLs the CLI fetches)
packages/theme/   the shared design system (tokens, @theme bridge, utilities)

Develop

pnpm install
pnpm dev          # docs site on :3001 (regenerates the registry first)
pnpm build        # production build (both packages)
pnpm lint
pnpm typecheck
pnpm --filter @sa/ui test   # component tests (Vitest + Testing Library)

The registry JSON and the live-preview import map are generated from apps/ui/registry/ on every dev/build (they're gitignored — the .ts manifest and the component files are the source of truth).

Releasing

Releases are tag-driven: pnpm release bumps the version, generates notes, tags, and pushes; a GitHub Action then builds, deploys to Cloudflare, and publishes the GitHub Release. See RELEASING.md.

License

MIT © Shreshth Arora