{"id":50126060,"url":"https://github.com/craftled/ui","last_synced_at":"2026-05-23T20:01:35.896Z","repository":{"id":359835666,"uuid":"1247474661","full_name":"craftled/ui","owner":"craftled","description":"Craft-led, shadcn-native component library. Charts, blocks, shaders, and primitives — copy/paste with shadcn CLI.","archived":false,"fork":false,"pushed_at":"2026-05-23T17:48:35.000Z","size":546,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-23T18:24:03.169Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ui.craftled.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/craftled.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-23T11:15:50.000Z","updated_at":"2026-05-23T17:48:38.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/craftled/ui","commit_stats":null,"previous_names":["craftled/ui"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/craftled/ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftled%2Fui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftled%2Fui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftled%2Fui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftled%2Fui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/craftled","download_url":"https://codeload.github.com/craftled/ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftled%2Fui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33410345,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T18:09:33.147Z","status":"ssl_error","status_checked_at":"2026-05-23T18:09:31.380Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-23T20:01:35.197Z","updated_at":"2026-05-23T20:01:35.887Z","avatar_url":"https://github.com/craftled.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Craftled UI\n\nA craft-led, shadcn-native component library. Charts, blocks, shaders, and primitives — copy/paste with the shadcn CLI.\n\n**[ui.craftled.com](https://ui.craftled.com)** · [Components](https://ui.craftled.com)\n\n![Craftled UI](https://ui.craftled.com/opengraph-image)\n\n## What this is\n\nCraftled UI sits on top of the shadcn ecosystem. Every primitive is shadcn-style — TSX you own, Tailwind classes you can edit, Radix for the unsexy a11y plumbing. No runtime dependency on a published `@craftled/ui` package. You install components by URL through the shadcn CLI, and they land in your repo as plain files.\n\nThe library is opinionated about taste, not architecture. The atomic primitives (`button`, `card`, `input`, `label`, `separator`, `skeleton`, `chart`) mirror shadcn's New York style with a few craft-led tweaks. The blocks on top — dashboards, charts, CTAs, testimonials, paper-design shaders — are the value-add: production-ready compositions you can drop into a site in under a minute.\n\n## Install\n\nYou'll need [Bun](https://bun.com) (or `pnpm`/`npm`) and a Tailwind v4 project with the [shadcn CLI](https://ui.shadcn.com/docs/cli) initialized.\n\n### Direct URL (simplest)\n\n```bash\nbunx shadcn@latest add https://ui.craftled.com/r/button.json\n```\n\nEvery component has a registry JSON at `ui.craftled.com/r/\u003cname\u003e.json`. Block items automatically pull in their primitive `registryDependencies` (e.g. installing `dashboard-finance` brings `card`, `chart`, and Recharts with it).\n\n### Registered namespace (cleaner for multiple components)\n\n```bash\nbunx shadcn@latest registry add @craftled=https://ui.craftled.com/r/{name}.json\nbunx shadcn@latest add @craftled/dashboard-finance\nbunx shadcn@latest add @craftled/featured-halftone\n```\n\n### Live previews\n\nEvery component renders standalone at `ui.craftled.com/preview/\u003cname\u003e` — same component, isolated page, no chrome. Useful for sharing in design reviews.\n\n## What's inside\n\n### Primitives (13)\n\n`accordion` · `button` · `card` · `chart` · `dialog` · `dropdown-menu` · `input` · `label` · `navigation-menu` · `separator` · `skeleton` · `tabs` · `tooltip`\n\nDrop-in replacements for the shadcn New York equivalents. The Button is opinionated — a layered ring + shadow treatment lifted from production work — but the rest mirror upstream so you can mix and match without surprises. Most are thin wrappers over Radix; `chart` resolves to shadcn's upstream chart wrapper.\n\n### Charts (2)\n\n- **`chart-area-gradient`** — Recharts area chart with gradient fill, themed for both modes.\n- **`chart-stems`** — Sparse stem-and-leaf chart for low-density dashboards.\n\n### Dashboards (2)\n\n- **`dashboard-finance`** — KPI cards + a financial chart tile. Drop-in for a Stripe-style overview.\n- **`dashboard-net-worth`** — Multi-account net worth view with a stacked area chart.\n\n### CTAs (4)\n\n`cta-gradient` · `cta-newsletter` · `cta-ebook` · `cta-app-stack`\n\nProduction-grade marketing CTAs. Each one ships with a demo that uses real-looking content, not lorem ipsum.\n\n### Featured / shader blocks (8)\n\n`featured-halftone` · `featured-halftone-dots` · `featured-dithering` · `featured-fluted-glass` · `featured-grain-gradient` · `featured-mesh-gradient` · `featured-color-panels` · `featured-logo-spotlight`\n\nWebGL shader blocks via [`@paper-design/shaders-react`](https://shaders.paper.design). Each one renders an image (or a generative surface, for `mesh-gradient` / `grain-gradient` / `color-panels`) with a real shader pass and exposes the right knobs (intensity, scale, color mix). Use them as hero panels, OG images, or as background atmosphere.\n\nAll seven photo + generative shader blocks (everything except `featured-logo-spotlight`, which composes the mesh-gradient) accept a shared text-overlay API for placing a title on top of the shader:\n\n- `titleText` — string drawn over the shader\n- `titlePosition` — one of nine grid positions (`top-left` / `top-center` / `top-right` / `center-left` / `center` / `center-right` / `bottom-left` / `bottom-center` / `bottom-right`), defaults to `bottom-left`\n- `titleSize` — title font size in px; the eyebrow scales as `max(11, titleSize * 0.4)`, defaults to `30`\n- `titleColor` — optional inline hex color that wins over `titleClassName` via CSS specificity\n\n### Navigation (1)\n\n- **`navbar`** — Sticky top navbar with brand mark, center nav using NavigationMenu (flat links + rich icon/description dropdowns), CTA buttons, and a scroll-aware backdrop blur. Mobile menu uses Accordion. Position prop (`fixed` / `absolute` / `sticky` / `static`) so you can drop it on a real page or showcase it inside a card. Dogfooded as the SiteHeader on `ui.craftled.com`.\n\n### Editorial blocks (6)\n\n- **`featured-event`** — Highlight reel for events / launches.\n- **`featured-integrations`** — Orbit-style logo carousel for ecosystem pages.\n- **`featured-story`** — Magazine-style story card with optional link wrapping.\n- **`annotated-figure`** — Marketing figure with callouts.\n- **`testimonial-video`** — Video thumbnail + quote, with optional play target.\n- **`carousel-do-dont`** — Side-by-side do/don't pattern with inline-editable content.\n\n## Local development\n\n```bash\nbun install\nbun dev                  # next dev (Turbopack) on http://localhost:3000\nbun run build            # next build (production)\nbun run registry:build   # rebuild all /r/*.json registry items\nbun run check            # ultracite check (biome + opinionated rules)\nbun run fix              # ultracite fix (auto-fix safe issues)\n```\n\nThe `/` route is the gallery, `/preview/[name]` renders any component standalone with Preview/Code tabs (Shiki dual-theme), and `/compose` is a kitchen-sink page exercising every primitive together for visual regression checks. Editing a primitive or block hot-reloads everywhere it's used.\n\n`/raw/[name]` is the no-chrome iframe target for the full-bleed preview shell — its own root layout, no SiteHeader. Don't link to it from docs; it exists for the iframe.\n\n### Add a new component\n\n1. Drop your source at `registry/new-york/blocks/\u003cname\u003e/\u003cname\u003e.tsx`.\n2. Add a sibling `\u003cname\u003e.demo.tsx` exporting a default demo composition.\n3. Register it in `registry.json` with `registryDependencies` for any shadcn primitives you reuse.\n4. `bun run registry:build` → preview at `/preview/\u003cname\u003e`.\n\n## Stack\n\n- **[Next.js 16](https://nextjs.org)** App Router + Turbopack\n- **[React 19.2](https://react.dev)**\n- **[Tailwind CSS v4](https://tailwindcss.com)** (CSS-first, oklch, container queries)\n- **[shadcn CLI](https://ui.shadcn.com)** for distribution\n- **[Radix UI](https://www.radix-ui.com)** primitives where needed\n- **[Recharts 3](https://recharts.org)** for charts\n- **[paper-design/shaders-react](https://shaders.paper.design)** for shader blocks\n- **[Bun](https://bun.com)** as runtime + package manager\n- **[Biome v2](https://biomejs.dev)** + **[Ultracite](https://www.ultracite.ai)** for lint + format\n- **[TypeScript 6](https://www.typescriptlang.org)**\n\n## Stand on the shoulders of giants\n\nCraftled UI is shadcn-native, not a fork. We use shadcn's CLI, registry format, and primitives directly. The custom work is:\n\n1. **Craft-led variants** of the atomic primitives where we have an opinion (Button's layered ring, Card's surface treatment).\n2. **Production-quality blocks** assembled from those primitives, written to be deleted from your repo when you outgrow them.\n\nSpecial thanks to **[@shadcn](https://x.com/shadcn)** for the registry pattern that makes any of this possible, **[Paper Design](https://paper.design)** for the shaders, and **[Recharts](https://recharts.org)** for being the only chart library that survives every React major bump.\n\n## Known issues\n\nThe shader blocks emit unhandled rejections in headless browsers without GPU passthrough (Puppeteer / Playwright CI). Real users on any modern desktop or mobile browser are unaffected. See [KNOWN_ISSUES.md](./KNOWN_ISSUES.md) for details and the planned `ShaderErrorBoundary` fix.\n\n## License\n\n[MIT](./LICENSE) — use it for anything.\n\n---\n\nMade with care by [Craftled](https://craftled.com). Issues and PRs welcome at [github.com/craftled/ui](https://github.com/craftled/ui).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcraftled%2Fui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcraftled%2Fui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcraftled%2Fui/lists"}