Shadcn UI Kit: 550+ Free UI Components, Blocks & Dashboard

Shadcn UI Kit by Bundui is a React and Next.js UI kit for building dashboards, landing pages, and app screens with shadcn/ui and Tailwind CSS.

Choose from 550+ free component variants across 51 categories, install individual blocks as editable TypeScript files, or run the free Next.js admin starter.

Features

• Live component previews at desktop, tablet, and mobile widths, with light and dark themes.
• Radix UI and Base UI compatibility for controls that use those headless primitives.
• Copyable React source and namespaced shadcn registry commands for individual components and blocks.
• A free Next.js admin starter with a sidebar, area chart, sortable table, user pages, and settings forms.
• Tailwind CSS v4 theme variables and a free Theme Generator that exports light and dark CSS tokens.

How To Use It

1. Initialize shadcn/ui

In an existing Next.js project with Tailwind CSS and the App Router, initialize shadcn/ui if components.json does not exist:

npx shadcn@latest init

For a new Next.js application, the shadcn CLI can create and configure the project directly:

npx shadcn@latest init -t next

2. Configure the Shadcn UI Kit Registry

Merge the registries entry into the existing components.json. Keep your aliases, style, and other configuration keys:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

3. Basic Usage: Install a Free Hero Block

hero1 imports the shadcn/ui Button, next/link, and lucide-react. Install the Button component before the hero. Verify that lucide-react is present in your project if the import fails:

npx shadcn@latest add button
npx shadcn@latest add @shadcnuikit/hero1

4. Basic Usage in Next.js

The registry writes components/hero1.tsx and exports HeroSection as the default component. Render it in app/page.tsx:

import HeroSection from "@/components/hero1";
export default function HomePage() {
  return (
    <main>
      <HeroSection />
    </main>
  );
}

5. Install an Accordion Variant

Use the first accordion variant for a short FAQ section. It imports the core shadcn/ui Accordion components, so install the base Accordion first:

npx shadcn@latest add accordion
npx shadcn@latest add @shadcnuikit/accordion1

Import the default export in app/help/page.tsx:

import FaqAccordion from "@/components/accordion1";
export default function HelpPage() {
  return (
    <main className="mx-auto max-w-xl py-12">
      <h1 className="mb-6 text-2xl font-semibold">Help Center</h1>
      <FaqAccordion />
    </main>
  );
}

6. Run the Free Admin Dashboard

To inspect the complete starter, clone the public GitHub project.

git clone https://github.com/bundui/shadcn-ui-kit.git
cd shadcn-ui-kit
pnpm install
pnpm dev

Visit http://localhost:3000/admin for the dashboard. The demo has statistics cards, an area chart, a sortable data table, a users page, profile settings, login and registration screens, and 404 and 500 error pages.

Available Components

Free Blocks and Examples

Alternatives and Related Resources

• 200+ Extended UI Components & Blocks for shadcn/ui – Shadcn Space
• Shadcn Dashboard Kit for Tailwind CSS Admin UIs
• 170+ Shadcn UI Blocks & Free Templates for React/Next.js – 7Ovr
• Modern Accessible shadcn/ui Blocks for Next.js & React