Component Architecture

Overview

shadcn/ui gives you owned components (copied into your repo, not imported from a package). That means architecture is your job: build a thin layer of app-specific components on top of the primitives, use cva for variants, and resist abstracting until a pattern repeats. Good structure keeps a SaaS UI consistent without a maze of props.

When to use

• Deciding how to structure or compose UI components.
• A component has grown a dozen boolean props.
• You're copy-pasting the same markup across pages.

Variants with cva, not boolean soup

import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";