shadcn/ui component library

What is shadcn/ui

shadcn/ui is not an npm package. It is a collection of accessible, well-designed React components that you copy into your own source tree and own completely. There is no node_modules/shadcn-ui dependency — the components live in app/components/ui/ and are first-class project code.

Each component is built on top of three utility libraries:

• class-variance-authority (CVA) — defines variant maps (e.g. button size/color combinations) as typed objects
• clsx — conditionally joins CSS class strings
• tailwind-merge — intelligently merges Tailwind classes so later classes override earlier ones without conflicts

These three are combined in a single cn() helper at app/lib/utils.ts:

import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

How components work

A shadcn/ui component is a regular React component that uses cva() to define its visual variants and cn() to merge user-supplied classes with the defaults. For example, the Button component defines variants like default, destructive, outline, ghost and sizes like sm, default, lg, icon.

Because the components are owned source code, you can modify them freely — change colors, add variants, adjust padding. There is no upstream package to keep in sync.

Available components

The following 11 shadcn/ui components are installed in gpn-yp-site-worker/app/components/ui/:

1. button.tsx — Button with 6 variants (default, destructive, outline, secondary, ghost, link) and 4 sizes (default, sm, lg, icon). Exports Button and buttonVariants.

1. card.tsx — Compound card with Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter.

1. input.tsx — Styled text input with focus ring and disabled state.

1. badge.tsx — Inline label with 6 variants (default, secondary, destructive, outline, success, warning).

1. checkbox.tsx — Simple checkbox with focus ring styling.

1. select.tsx — Native HTML select wrapper with consistent styling.

1. slider.tsx — HTML5 range input with primary accent color.

1. alert.tsx — Alert banner with 4 variants (default, destructive, success, warning). Compound: Alert, AlertTitle, AlertDescription.

1. breadcrumb.tsx — Semantic breadcrumb navigation. Compound: Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator.

1. pagination.tsx — Page navigation controls. Compound: Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis.

1. separator.tsx — Visual separator with horizontal/vertical orientation and ARIA role.

Adding new components

To add a new shadcn/ui component:

1. Visit the shadcn/ui documentation for the component you need
2. Copy the component source into app/components/ui/
3. Adjust imports to use the local cn() helper from ~/lib/utils
4. Adapt colors and spacing to match the project theme in app/globals.css

Do not install shadcn/ui as an npm package. The components are source code, not a dependency.

Design system page

All components can be previewed at the /design-system route (also available at /admin/components). This page renders every registry entry from the component registry at app/components/directory/registry.ts.