A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.

shadcn/ui is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code.

Here you can find all the components available in the library. We are working on adding more components.

How to install dependencies and structure your app.

Install and configure shadcn/ui for Next.js.

{ "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": false, "tsx": true, "tailwind": { "config": "", "css": "src/styles/globals.css", "baseColor": "neutral", "cssVariables": …

A dashboard with sidebar, charts and data table npx shadcn add dashboard-01 ... A sidebar that collapses to icons npx shadcn add sidebar-07 ... A sidebar with submenus npx shadcn add …

How to use shadcn/ui with Tailwind v4 and React 19.

A collection of ready-to-use chart components built with Recharts. From basic charts to rich data displays, copy and paste into your apps.

A vertically stacked set of interactive headings that each reveal a section of content.