Components
47Every component ships with AI context packs. Install one, and AI tools know how to use it on-brand.
Atoms12
button
Primary actions with variant, size, and loading state
npx shadcn add .../button.jsonbadge
Status indicators with semantic color variants
npx shadcn add .../badge.jsoninput
Text input with glass variant and icon slots
npx shadcn add .../input.jsonicon
Icon wrapper with named map and size presets
npx shadcn add .../icon.jsonswitch
Toggle control with three size variants
npx shadcn add .../switch.jsonavatar
Profile image with fallback initials
npx shadcn add .../avatar.jsonlabel
Form label with required indicator
npx shadcn add .../label.jsontextarea
Resizable text area with error state
npx shadcn add .../textarea.jsonseparator
Horizontal or vertical divider
npx shadcn add .../separator.jsonprogress
Progress bar with semantic color states
npx shadcn add .../progress.jsonskeleton
Loading placeholder with shape variants
npx shadcn add .../skeleton.jsontooltip
Portal-based tooltip with auto-positioning
npx shadcn add .../tooltip.jsonMolecules10
card
Content container with glass and interactive variants
npx shadcn add .../card.jsonmodal
Dialog with portal, focus trap, and compound API
npx shadcn add .../modal.jsontabs
Tabbed navigation with underline and pill styles
npx shadcn add .../tabs.jsontoast
Notification with variant styling and auto-dismiss
npx shadcn add .../toast.jsondropdown
Select with single/multi-select and search
npx shadcn add .../dropdown.jsonaccordion
Collapsible content with animated transitions
npx shadcn add .../accordion.jsoncommand-box
Copyable command display with clipboard
npx shadcn add .../command-box.jsontheme-toggle
Dark/light mode toggle button
npx shadcn add .../theme-toggle.jsoncode-block
Syntax-highlighted code with copy button
npx shadcn add .../code-block.jsonnoise-overlay
Subtle noise texture overlay
npx shadcn add .../noise-overlay.jsonBlocks4
nav
Responsive navigation with mobile drawer
npx shadcn add .../nav.jsonhero
Page hero with badge, title, and CTA buttons
npx shadcn add .../hero.jsonsection
Layout section with container options
npx shadcn add .../section.jsonfooter
Site footer with link columns and social icons
npx shadcn add .../footer.jsonUtilities10
animated-text
Text with entrance and exit animations
npx shadcn add .../animated-text.jsonshape
Decorative geometric shapes
npx shadcn add .../shape.jsoncharacter
Character avatar with expressions
npx shadcn add .../character.jsonspeech-bubble
Speech bubble with tail positioning
npx shadcn add .../speech-bubble.jsonscroll-indicator
Scroll progress indicator
npx shadcn add .../scroll-indicator.jsonhamburger-icon
Animated hamburger menu icon
npx shadcn add .../hamburger-icon.jsonmobile-drawer
Mobile slide-out drawer
npx shadcn add .../mobile-drawer.jsonerror-boundary
Error boundary with fallback UI
npx shadcn add .../error-boundary.jsoncomposite-shape
Composed geometric shapes
npx shadcn add .../composite-shape.jsonnav-link
Navigation link with active state
npx shadcn add .../nav-link.jsonHooks11
use-theme
Dark/light mode management
npx shadcn add .../use-theme.jsonuse-media-query
Responsive breakpoint detection
npx shadcn add .../use-media-query.jsonuse-reduced-motion
Respects prefers-reduced-motion
npx shadcn add .../use-reduced-motion.jsonuse-keyboard-shortcuts
Keyboard shortcut registration
npx shadcn add .../use-keyboard-shortcuts.jsonuse-toast
Toast notification state management
npx shadcn add .../use-toast.jsonuse-count-up
Animated number counting
npx shadcn add .../use-count-up.jsonuse-scroll-reveal
Scroll-triggered reveal animations
npx shadcn add .../use-scroll-reveal.jsonuse-stagger-list
Staggered list entrance animations
npx shadcn add .../use-stagger-list.jsonuse-page-transition
Page transition animations
npx shadcn add .../use-page-transition.jsonuse-text-reveal
Character-by-character text reveal
npx shadcn add .../use-text-reveal.jsonuse-button-pulse
Button pulse attention animation
npx shadcn add .../use-button-pulse.json