║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Introduction description: basecn offers shadcn/ui components built on Base UI. Copy, paste, and customize.

basecn brings you the shadcn/ui components you know and love, rebuilt on Base UI.

This is what basecn offers:

• shadcn/ui Components: The same beautiful components you know, with familiar APIs and styling.
• Base UI Foundation: Built on Base UI for rock-solid accessibility and performance.
• Multiple Examples: Various implementations and patterns for each component.
• Same Philosophy: Copy, paste, and customize - no lock-in, full source code ownership.

Why basecn?

basecn provides shadcn/ui-style components built on Base UI instead of Radix UI:

• Familiar APIs: Similar props and styling approach to shadcn/ui components.
• Familiar Patterns: If you know shadcn/ui, you'll feel right at home with basecn.
• Base UI Foundation: Built on Base UI for superior accessibility and performance.
• Easy Migration: Straightforward to switch from shadcn/ui with minimal changes.

Same Philosophy, Better Foundation

basecn maintains the exact shadcn/ui principles you love:

• Copy and Paste: Full component source code that you own and control.
• Customizable: Modify any part of a component to fit your design system.
• TypeScript First: Full type safety with excellent IntelliSense support.
• Tailwind Styled: Easy customization with utility classes.
• No Lock-in: Components are yours to modify and extend as needed.

Component Examples

basecn provides multiple examples for each component showing different use cases:

• Basic Usage: Standard implementations matching shadcn/ui patterns.
• Variant Styles: Different styling options and visual states.
• Interactive States: Loading, disabled, error, and success states.
• Accessibility Features: Keyboard navigation and screen reader examples.

Each example comes with complete source code and demonstrates Base UI's accessibility features.

Getting Started

Ready to use shadcn/ui components with Base UI's foundation? Browse the component documentation to explore implementations and examples.

Each component page includes:

• Easy Installation: Install any component with a single command using the shadcn CLI
• Multiple Examples: Different use cases and styling options
• API Documentation: Props and methods for each component

basecn is shadcn/ui on Base UI. Same components, better foundation.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║