design-systems

When to use: Most projects, especially with Tailwind CSS

Design Systems Reference

shadcn/ui (PRIMARY CHOICE)

When to use: Most projects, especially with Tailwind CSS

URL: https://ui.shadcn.com

Characteristics:

• Excellent accessibility defaults (built on Radix UI)
• Copy-paste into your project (not npm package)
• Tailwind CSS based
• Fully customizable source code
• TypeScript support

Installation:

npx shadcn-ui@latest init
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add dialog

Pros:

• Own the code (no external dependencies)
• Accessible by default
• Great TypeScript support
• Extensive component library
• Active development

Cons:

• Requires Tailwind CSS
• Need to copy each component
• Updates require manual copying

daisyUI

When to use: Rapid prototyping, semantic HTML preference

URL: https://daisyui.com

Characteristics:

• Tailwind CSS plugin
• Semantic component names
• Theme system built-in
• Works with pure HTML or frameworks

Installation:

npm install -D daisyui

Pros:

• Fast to prototype
• Multiple themes out of the box
• Works with plain HTML
• Small footprint

Cons:

• Less customizable than shadcn
• Fewer components
• Some accessibility gaps

HeroUI

When to use: Product interfaces, modern design needs

URL: https://heroui.com

Characteristics:

• Modern, polished design
• Strong design language
• Good for product UIs
• React-based

Installation:

npm install @heroui/react

Pros:

• Beautiful out of the box
• Consistent design system
• Good documentation

Cons:

• More opinionated
• Harder to customize deeply
• Smaller community than shadcn

Comparison Table

| Feature | shadcn/ui | daisyUI | HeroUI | |---------|-----------|---------|--------| | Accessibility | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | | Customization | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | | Components | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | | Setup Speed | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | | TypeScript | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | | Documentation | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ |

Recommendation Flow

Need accessibility? → shadcn/ui
Need speed? → daisyUI  
Need polish? → HeroUI
Need customization? → shadcn/ui
Using Tailwind? → shadcn/ui or daisyUI
Not using Tailwind? → HeroUI