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.

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

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

A sidebar that collapses to icons npx shadcn add sidebar-07 ... A sidebar with submenus npx shadcn add sidebar-03 ... A login page with a muted background color npx shadcn add login-03 ... A login …

Try our hand-picked themes. Copy and paste them into your project. New theme editor coming soon.

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

# Initialize a project from a local file npx shadcn init ./template.json # Add a component from a local file npx shadcn add ./block.json ... - import * as AlertDialogPrimitive from "@radix-ui/react-dialog" + …

Learn how to use CSS Variables and color utilities for theming in shadcn/ui.

Customize everything. Pick your component library, icons, base color, theme, fonts and create your own version of shadcn/ui.

Install and configure shadcn/ui for Laravel