Beautifully designed components built with Radix UI and Tailwind CSS.
Warning This is work in progress. I'm building this in public. You can follow the progress on Twitter @shadcn.
- Toast
- Toggle Group
- Toolbar
-
Toggle -
Navigation Menu -
Figma
Starting a new project? Check out the Next.js template.
npx create-next-app -e https://github.com/shadcn/next-template
- Radix UI Primitives
- Tailwind CSS
- Fonts with
@next/font
- Icons from Lucide
- Dark mode with
next-themes
- Automatic import sorting with
@ianvs/prettier-plugin-sort-imports
- Class merging with
tailwind-merge
- Animation with
tailwindcss-animate
- Conditional classes with
clsx
- Variants with
class-variance-authority
- Automatic class sorting with
eslint-plugin-tailwindcss
This project is configured to use pnpm .
Use pnpm install
to download dependencies.
Duplicate .env.example
and rename it to .env.local
(modify the default 3000
port according to your situation.)
Run pnpm dev
, then you can see it at localhost:3000
Failed to fetch Inter
from Google Fonts.
pnpm run build exited
shadcn-ui#62
Licensed under the MIT license.