Tailwind CSS
/Advanced
shadcn/ui
Definition
An incredibly popular collection of beautifully designed, accessible components built using Tailwind CSS and Radix UI.
Explain Like I'm New
It's not a component library that you install via npm (like Material UI). It is a website where you literally copy-paste the raw React + Tailwind code for a 'DatePicker' directly into your own project, giving you 100% control to edit the Tailwind classes.
Real World Example
Running `npx shadcn-ui@latest add button` in your terminal. It downloads a `Button.tsx` file into your project containing a fully accessible button pre-styled with Tailwind and CVA.
Common Use Cases
- •Rapid MVP development
- •Enterprise Design Systems
Interactive Example
/* The philosophy of shadcn/ui: You own the code. It belongs in YOUR components folder. components/ui/button.tsx */ import { cva } from "class-variance-authority" import { cn } from "@/lib/utils" // Look! It's just raw Tailwind classes that you can edit anytime! const buttonVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", { variants: { variant: { default: "bg-primary text-primary-foreground shadow hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-transparent hover:bg-accent", }, size: { default: "h-9 px-4 py-2", sm: "h-8 rounded-md px-3", lg: "h-10 rounded-md px-8", }, }, defaultVariants: { variant: "default", size: "default" }, } ) export function Button({ className, variant, size, ...props }) { return <button className={cn(buttonVariants({ variant, size, className }))} {...props} /> }
Interview Questions
basic
- Do you install shadcn/ui as an `npm` dependency?
intermediate
- Why is shadcn/ui called a 'copy-paste' library, and why is this an advantage?