DEV Community

Alex Spinov
Alex Spinov

Posted on

shadcn/ui Has Free Beautiful Components — Copy-Paste React UI Without Dependencies

#opensource #react #webdev #ui

A developer evaluated component libraries. Material UI added 300KB to the bundle. Chakra UI had opinions about everything. Headless UI had no styles.

shadcn/ui is not a component library. It is a collection of beautifully designed, accessible components that you copy into your project. No npm dependency. Full ownership.

What shadcn/ui Offers for Free

  • 40+ Components - Button, Dialog, Table, Form, Calendar, Charts, and more
  • Copy-Paste - Components live in YOUR codebase, not node_modules
  • Tailwind CSS - Styled with Tailwind, fully customizable
  • Radix UI - Built on accessible Radix primitives
  • Dark Mode - Theme support out of the box
  • TypeScript - Full type safety
  • CLI - npx shadcn@latest add button to add components
  • Themes - Multiple color themes

Quick Start 

npx shadcn@latest init
npx shadcn@latest add button dialog table
Enter fullscreen mode Exit fullscreen mode 
import { Button } from '@/components/ui/button'
export default function Page() {
  return <Button variant="outline">Click me</Button>
}
Enter fullscreen mode Exit fullscreen mode

You own the code. Customize anything. No library updates to worry about.

Website: ui.shadcn.com - The most popular React component collection

Need to monitor and scrape data from multiple web services automatically? I build custom scraping solutions. Check out my web scraping toolkit or email me at spinov001@gmail.com for a tailored solution.

Top comments (0)