Guide for building UI components with shadcn/ui and Base UI primitives. Use when creating, modifying, or reviewing React components.
This skill provides guidance for building accessible, themeable UI components using shadcn/ui with Base UI primitives.
This skill documents component patterns for shadcn/ui projects using either Radix or Base UI primitives.
Typical stack:
tw-animate-css for animationsclass-variance-authority (CVA) for variantsimport { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
function MyComponent({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="my-component"
className={cn("base-styles", className)}
{...props}
/>
)
}
const variants = cva("base-styles", {
variants: {
variant: { default: "...", secondary: "..." },
size: { sm: "...", md: "...", lg: "..." },
},
defaultVariants: { variant: "default", size: "md" },
})
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out",
"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
"data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95"
)}
Use semantic color variables (not raw values):
bg-background, text-foreground - Base colorsbg-primary, text-primary-foreground - Primary actionsbg-muted, text-muted-foreground - Subdued contentbg-destructive - Destructive actions@file baseui/overview.md - Design philosophy and compound components@file baseui/setup.md - Project setup with shadcn create@file baseui/migration.md - Radix to Base UI migration patterns@file components/index.md - Component catalog overview@file components/forms.md - Field, Input, Checkbox, Select patterns@file components/overlays.md - Dialog, Popover, Tooltip, Sheet@file components/navigation.md - Sidebar, Tabs, Menu patterns@file components/feedback.md - Toast, Alert, Skeleton patterns@file tailwind/patterns.md - CSS variables, theming, utilities@file animations/tw-animate.md - tw-animate-css patterns@file animations/motion.md - Framer Motion integration@file type-safety/patterns.md - TypeScript interfaces, generics, props@file blocks/patterns.md - Using shadcn blocks for common layoutsbunx --bun shadcn@latest add <name>src/components/ui/ following existing patternsdata-slot attribute for styling hooksconst)data-slot attributesclassName="dark" on parent)tw-animate-css classes with data-[state=*] selectors@file animations/tw-animate.md for patterns