Installation

Shadcn UI Kit items are plain React and TypeScript files styled with Tailwind CSS. They drop into any project that is set up for shadcn/ui. Admin dashboards and templates are complete projects, so they do not need this setup. See Admin Dashboards and Templates instead.

Requirements

  • A React project. The kit is built and tested with Next.js 16 (App Router), React 19, Tailwind CSS v4 and TypeScript.
  • shadcn/ui initialized in the project, so components.json, the @/components/ui folder and the theme variables in your global CSS exist.

1. Create a Next.js project

npx create-next-app@latest my-app

Choose TypeScript, Tailwind CSS and the App Router when asked.

2. Initialize shadcn/ui

npx shadcn@latest init

This creates components.json, adds the cn() helper and writes the theme variables to your global CSS. You can replace those variables later with a theme from the Theme Generator.

3. Add your first item

Free items install without an account. For example, the first hero block:

npx shadcn@latest add @shadcnuikit/hero1

For the @shadcnuikit prefix to work, add the registry to components.json once. The shadcn CLI page shows the exact snippet and how to add an API key for premium items.

Copying code instead

Every preview has a Get the Code button. It shows the install command for npm, pnpm, yarn and bun, and the source files with a copy button. If you copy the files by hand, also add the shadcn/ui components and npm packages the file imports, for example npx shadcn@latest add button card and any library such as recharts or motion.

IntroductionLicense & Access