Libraries

External libraries that components in this registry depend on or are designed to work with. Install them in your project when using the relevant components.

Styling

• Tailwind CSS — The core styling system. All components are styled with Tailwind CSS 4 using CSS variables for theme switching.

• shadcn/ui — The registry model this library is built on. Components are installed via the shadcn CLI and copied directly into your project.

• class-variance-authority — Variant logic for components. Used to define size, variant, and state combinations with full TypeScript support.

• tailwind-merge — Merges Tailwind classes without conflicts. Used internally by cn() in every component.

• clsx — Conditional class names. Used alongside tailwind-merge in the cn() utility.

Icons

• Lucide React — Icon library used across all components. The default icon set for this registry.

Components

• Radix UI — Headless UI primitives. All interactive components are built on Radix — it handles accessibility, keyboard navigation, and ARIA automatically.

• cmdk — Command menu primitive. Used by the Command component.

• vaul — Drawer component built for mobile-first interactions. Used by the Drawer component.

• input-otp — OTP input field. Used by the Input OTP component.

• Embla Carousel — Carousel engine. Used by the Carousel component.

• react-resizable-panels — Resizable panel layouts. Used by the Resizable component.

• react-day-picker — Calendar and date picker. Used by the Calendar component.

• Sonner — Toast notifications. Used by any component that triggers user feedback messages.

Data

• @tanstack/react-table — Headless table engine. Used by the Data Table element.

• Recharts — Chart and data visualisation library. Used by the Chart component.

• date-fns — Date formatting and manipulation utilities. Used by calendar and date-related components.

Animation

• Motion — Animation library (Framer Motion). Used for UI transitions, page animations, and interactive motion effects.

Utilities

• next-themes — Dark/light mode management. Handles theme switching and system preference detection.

• Jotai — Atomic state management. Used for persisted UI preferences such as the selected package manager.

• react-hotkeys-hook — Keyboard shortcuts. Used to bind navigation shortcuts across docs pages.