What is shadcn?

shadcn/ui is a collection of beautifully designed, accessible, and customizable React components integrated into Frontend Accelerator. Unlike traditional component libraries, shadcn components are copied directly into your project, giving you full ownership and control over the code.

Key features:

• Copy-paste components: Components are added to your codebase, not installed as dependencies
• Full customization: Modify any component to match your exact requirements
• Radix UI primitives: Built on top of Radix UI for accessibility and functionality
• Tailwind styling: Styled with Tailwind CSS utilities for consistent design
• TypeScript support: Fully typed components with IntelliSense support
• Dark mode: Built-in dark mode support across all components
• Accessible: WCAG-compliant with keyboard navigation and screen reader support

Integrated Components:

Frontend Accelerator includes shadcn components in /components/ui/:

• Button, Input, Form, Select, Checkbox
• Dialog, Sheet, Popover, Tooltip
• Card, Badge, Avatar, Separator
• Alert, Toast notifications
• And many more...

Usage Example:

import { Button } from "@/components/ui/button"

export function MyComponent() {
  return <Button variant="default">Click me</Button>
}

AI-Friendly: The component structure is explicit and self-documenting. Each component file contains its variants, props, and styling logic in one place. AI tools can easily understand the component API, suggest appropriate variants, and generate new components following the same patterns.