Bricked UI - registry + Svelte

The shadcn registry source for Bricked UI: 92 pixel-art components for React, plus a Svelte 5 port (50 components) under svelte/. This repo holds the source. The built JSON is published through the website at https://bricked-ui.vercel.app/r/.

Layout

ui/
  registry.json            # catalog: every item, its files and dependencies
  components.json          # shadcn aliases (@/components, @/lib/utils, ...)
  registry/bricked-ui/     # one .tsx per component + pixel-icon, styles
  svelte/                  # Svelte 5 port (bun + svelte-check + svelte-package)
    package.json           # name: bricked-ui-svelte
    src/lib/components/    # one .svelte per component (PixelIcon, Button, ...)
    src/lib/icons.ts       # ICONS grid + PixelIconName
    src/lib/utils.ts       # cn()
    src/lib/bricked.css    # framework-agnostic bk-* stylesheet (mirrors registry bricked.css)
    src/lib/index.ts       # barrel exports
  lib/utils.ts             # cn() (React)
  DESIGN.md                # the full style specification

Install a piece

React (shadcn):

bunx shadcn registry add @bricked=https://bricked-ui.vercel.app/r/{name}.json  # once
bunx shadcn add @bricked/button

Every component lists bricked-css in registryDependencies, so the bk-* stylesheet lands on the first add — only bricked-globals (the Tailwind v4 theme) is a separate step. Then import both in your CSS entry.

Svelte:

bun add bricked-ui-svelte   # or copy ui/svelte/src/lib/components/*.svelte

<script>
  import { Button } from "bricked-ui-svelte";
  import "bricked-ui-svelte/bricked.css";
</script>

<Button icon="rocket">Launch</Button>

Or without a namespace:

bunx shadcn add https://bricked-ui.vercel.app/r/button.json

Add a component

1. Drop my-thing.tsx into registry/bricked-ui/, following the house pattern: cva variants (size: sm/md/lg, variant: primary/dark), an icon prop (any PixelIconInput — registry name or custom grid), className merged with cn().
2. Register it in registry.json (name, type, title, description, files with paths relative to ui/, plus dependencies / registryDependencies as needed — every component keeps bricked-css there so the stylesheet ships with it). Related files ship as one item - presets are usage examples, not items.
3. Validate and publish the JSON:

bun install
bun run check   # tsc --noEmit over registry + lib
bun run build   # shadcn build --output ../website/public/r

bun run build writes one JSON per item plus the catalog straight into the website repo, so the site serves exactly what was validated here.

Conventions

• No border-radius, no borders, no blur - depth comes from hard inset bevels.
• Corners are cut staircases (bk-cut); motion is steps() only.
• Text on orange is always ink (#2b1100), never white.
• Icons are crisp pixel grids (pixel-icon.tsx) — 930 glyphs in the registry: 7x7 basics, 16x16 brand marks (youtube, discord, x, instagram, spotify, …), and 662 icons adapted from Streamline's free Pixel set at 42x42 (CC BY 4.0 — credit: Streamline, streamlinehq.com). PixelIcon also renders caller-supplied PixelIconGrid rows (grid prop), and every icon prop takes PixelIconInput (name or grid). New hand-drawn glyphs are 7x7 and must follow the same rules.
• See DESIGN.md for the complete spec: tokens, pixel units, motion, per-component recipes and the new-component checklist.