Development · Framework
Building via shadcn Registry Blocks
A workflow for assembling apps by pulling registry JSON blocks via CLI
A development pattern introduced by shadcn that treats app development like component shopping across distributed registries. By referencing public or self-hosted registry JSON files via the shadcn CLI, developers can instantly install pre-wired dashboards, third-party authentication flows, custom stats blocks, and themes directly into their codebase.
The framework
The thread's workflow (1-8/n):
1. Add the dashboard block from shadcn/ui: a registry-item JSON (dashboard-template, type registry:block) whose registryDependencies can point at a URL like https://ui.shadcn.com/r/styles/new-york-v4/dashboard-01.json.
2. Grab a custom stats block from @ephraimduncan — e.g. https://blocks.so/r/stats-07.json (blocks.so).
3. Add Supabase auth (@supabase): sign up, sign in, reset password and session handled — install via `npx shadcn@latest add https://supabase.com/ui/r/password-based-auth-nextjs.json` (includes the Supabase client; skip overwriting it when installing).
4. A custom theme from tweakcn by @iamsahaj_xyz.
5. Run `shadcn init` with the custom template.
6. Done: dashboard, Supabase auth, blocks and custom theme all wired up.
7-8. Add the custom stats block; swap in a new theme by running a command.
Closing thesis: "All this from a flat JSON file. A file that can be shared, extended and even generated by LLMs. With all these new registries popping up, building will feel like 'component shopping'. Pick, Generate, Mix and Build. Code is Yours."
What it's for
- Assemble a complete dashboard shell by pulling remote block schemas into a project
- Add full-stack Supabase authentication with one CLI command pointing to an official JSON block
- Swap UI themes and custom component styles using community registry endpoints
- Distribute reusable, self-contained UI blocks and templates using flat JSON manifests
Key points
- CLI installation directly from remote JSON URLs via npx shadcn add
- Decentralized block distribution where any developer or company can host a registry
- Self-contained component definitions including dependencies and styling
- Full code ownership with zero black-box runtime dependencies
- Support for LLM-generated registry blocks and configurations
Pricing
Free
Details
- Type
- Framework
- Category
- Development
- Topic
- UI Components
- Open source
- Yes
- Platforms
- Command line
- For
- Frontend and full-stack web developers building with React, Next.js, and Tailwind CSS
- Alternative to
- Tailwind UI, MUI Templates
- Tags
- shadcn, react, nextjs, tailwind, ui blocks, developer workflow
Why it was saved
- @shadcn: Shows that any feature (dashboard, auth, stats, theme) can be added with one CLI command pointing at a registry JSON URL, and that these flat JSON files can be shared, extended, or generated by LLMs.
Compare
Related
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animation library for React, Vue, and vanilla JavaScript
Open-source animated and interactive React UI components and backgrounds
Curated directory of crafted React, Tailwind, and shadcn UI components.
Open-source animated React icons built with Lucide and Motion
Updated