For many React developers, shadcn/ui is no longer just a way to install a Button or Dialog component.
The source-code-first approach has expanded into a broader development ecosystem covering complete sections, application interfaces, pages, templates, dashboards, animations, design systems, CLI registries, and AI tooling.
Shadcn Space now has more than 1,000 shadcn/ui resources available for React and Next.js development.
The collection includes 490+ components, 479+ blocks, 81 animated blocks, 28+ pages, and 12+ templates.
The Current Resource Count
| Resource Type | Count |
|---|
| Components | 490+ |
| Blocks | 479+ |
| Animated Blocks | 81 |
| Pages | 28+ |
| Templates | 12+ |
| Total Resources | 1,090+ |
The latest update on October 6, 2026, introduced animated blocks and 56+ new blocks and components.
Beyond the main resource count, the dashboard collection includes 3 dashboards, 14+ apps, and 197+ dashboard components.
The Figma system contains 200+ component variants and 479+ blocks.
The Important Part Is the Implementation Model
A large resource library is only useful if developers can work with the resulting code.
That is where the shadcn approach matters.
Resources are installed through the shadcn CLI and become source files inside the application.
Developers can then:
This approach is particularly useful for teams that do not want to treat UI code as an opaque dependency.
Technology Stack
The GitHub repository is 98.7% TypeScript.
| Technology Layer | Implementation |
|---|
| Language | TypeScript and TypeScript v5 |
| Frameworks | React 19.2.6, Next.js 16.1.1, React + Vite |
| Styling | Tailwind CSS v4 and CVA |
| Primitives | Base UI and Radix UI |
| Animation | Framer Motion |
| Forms | React Hook Form and Zod |
| Tables | TanStack Table |
| Authentication | Supabase Auth, NextAuth, Firebase Auth |
This gives developers a familiar stack when extending existing React and Next.js projects.
Components for Detailed UI Requirements
The Shadcn UI Components library contains 490+ components across 71+ categories.
The collection covers standard elements such as Button, Card, Input, Calendar, Badge, and Button Group.
It also includes specialized components such as:
Input OTP
Input Mask
Sortable
Stepper
Code Block
The components support common interaction states and keyboard navigation, along with light and dark themes.
Best For: Building application interfaces at the component level.
Blocks for Larger Interface Sections
The Shadcn UI Blocks library contains 479+ blocks across 39+ categories.
The collection is organized around real application requirements.
Marketing sections include Hero, Feature, Pricing, Testimonials, and CTA.
Authentication sections include Login, Register, and Two Factor.
Ecommerce blocks cover Checkout, Product Quick View, Coupon, and Receipt.
Dashboard resources include Statistics, Charts, Widgets, and TanStack Datatable.
Application resources include Chat, Notes, Email, Kanban, Calendar, and User Profile.
Developers can also open blocks in v0 to test and modify layouts.
Best For: Building complete page sections with existing implementation patterns.
Templates for Complete Websites
The Shadcn UI Templates collection includes 12 templates.
| Use Case | Templates |
|---|
| SaaS | Saazio, Atomist |
| Agency and Studio | Awake, Digital Arc, Studiova |
| Real Estate | Homely |
| Local Services | Gleamer |
| Crypto | Crypgo |
| Portfolio | Typefolio, Resume |
| AI Dashboards | AI Chatbox, AI Agent Ops |
Three templates are free, and nine are Pro.
Figma files are included with the templates.
Best For: Starting websites and larger projects with an established structure.
Animated Interfaces
The Shadcn Animated Blocks collection contains 81 animated blocks.
It covers:
Hero sections
Logo clouds
Integrations
Pricing
Timelines
Galleries
Login interfaces
The workflow is designed to work with AI development tools such as Lovable, Gemini, Bolt, and v0.
Best For: Motion-heavy landing pages and product interfaces.
Dashboards and Internal Applications
The Shadcn Admin Dashboard includes 3 dashboards, 14+ applications, and 197+ dashboard components.
There are Next.js and React + Vite versions.
The stack includes React 19, Next.js, TypeScript v5, Supabase Auth, NextAuth, and Firebase Auth.
The dashboard also includes:
TanStack Table
Dnd Kit
Tiptap
next-intl
ApexCharts
Recharts
Five layout variants
AI prompts
Agents.md
The Agents.md file gives AI coding tools additional context about the application's structure.
Best For: SaaS administration, CRM systems, ecommerce back offices, analytics dashboards, and internal tools.
Pages for Product Websites
The Shadcn UI Pages collection provides 28+ complete pages.
Available page types include:
Landing pages
Blog pages
Pricing pages
FAQ pages
Changelog pages
Contact pages
Integration pages
Error pages
About Us pages
The pages target the Next.js App Router and support npm, pnpm, yarn, and bun.
Best For: Completing the standard page structure of a product or marketing website.
The ecosystem includes several tools that extend the core resource library.
Visual Builder
The Shadcn Builder allows developers to arrange blocks visually, edit content, preview pages, save progress, and export React code.
Best For: Testing page architecture before coding.
The Shadcn AI Form Builder generates forms from natural language.
It uses shadcn/ui components with React Hook Form and Zod.
Best For: Creating structured forms without manually writing the initial component and validation setup.
Figma
The Shadcn Figma UI Kit provides 200+ component variants and 479+ blocks.
Its variables map to shadcn/ui tokens.
The free Figma kit includes blocks, components, and landing page templates.
Best For: Keeping design and implementation aligned.
MCP and Registry-Aware AI
The Shadcn MCP Server connects AI coding tools with the live registry.
MCP Endpoint:
https://mcp.shadcnspace.com/mcp
The available operations include:
List blocks
List components
Search resources
Create UI
The server works with Cursor, VS Code, Claude Code, Windsurf, Antigravity, Lovable, Bolt, and v0.
The main advantage is that AI agents can work from actual registry data instead of generating UI APIs entirely from model assumptions.
CLI Installation
The Shadcn CLI registry can be configured through components.json.
Add the following configuration to components.json:
JSON
{
"registries": {
"@shadcn-space": {
"url": "https://shadcnspace.com/r/{name}.json"
}
}
}
Step 2: Install a Component
Bash
npx shadcn@latest add @shadcn-space/button-06
Step 3: Install a Block
Bash
npx shadcn@latest add @shadcn-space/hero-01
The CLI places the source files in the application and installs the required packages.
Base UI or Radix UI?
The choice of primitive library affects component implementation.
The Radix UI and Base UI comparison explains the differences.
Base UI can work well when developers need more control over markup and behavior.
Radix UI can work well when teams want established structures and defaults.
For existing Radix projects, the Radix to Base UI migration guide explains the required changes.
Next.js Setup
Step 1: Initialize the Project
Bash
npx shadcn@latest init --preset b0 --base base --template next
Add the registry configuration to components.json:
JSON
{
"registries": {
"@shadcn-space": {
"url": "https://shadcnspace.com/r/{name}.json"
}
}
}
Step 3: Install a Component
Bash
npx shadcn@latest add @shadcn-space/button-06
For Pro resources, configure the required email and license key.
Once the first resource is installed, the same workflow can be used for blocks and other registry resources.
Developer Checklist
Use this checklist when integrating the resources into a project.
Select Base UI or Radix UI.
Initialize Next.js and shadcn/ui.
Confirm components.json.
Configure the registry.
Configure Pro credentials when necessary.
Protect .env files.
Install a component.
Install a block.
Connect the MCP endpoint.
Add the free Figma UI kit.
Inspect the generated source code.
Use the migration guide when moving from Radix UI.
Frequently Asked Questions
How many shadcn/ui resources are available?
There are more than 1,090 resources, including 490+ components, 479+ blocks, 81 animated blocks, 28+ pages, and 12+ templates.
Can I use the shadcn CLI?
Yes. Configure the @shadcn-space registry and install resources using the standard shadcn CLI workflow.
Yes. The MCP server exposes live registry data that supported AI development tools can search and use.
Final Takeaway
The 1,000+ milestone shows that source-code-first UI can scale beyond a component collection.
The same approach now covers individual components, complete sections, pages, templates, dashboards, animations, design resources, CLI installation, and AI-assisted development.
For React and Next.js developers, the practical advantage is control over the code after installation.
Start with the Shadcn UI components or Shadcn UI blocks, install what your project needs, and then connect the MCP server for registry-aware AI assistance.
The full source is available on GitHub, with design resources available through the Figma UI kit.