shadcn/ui

Beautifully designed components built with Radix UI and Tailwind CSS

button

Copy-paste components with zero dependencies. Full control over your code.

ReactTailwind CSSRadix UIAccessible

๐ŸŽฎ Playground

Preview
<Button variant="default" size="default" />
Props
Use cases
  • โ€ขAdmin dashboards
  • โ€ขLanding pages
  • โ€ขDesign systems
Good for
  • โœ“Teams wanting full code ownership
  • โœ“Tailwind CSS projects
  • โœ“Accessibility-first development
Not good for
  • โœ—Projects needing pre-built themes
  • โœ—Non-React frameworks
Installation
$ npx shadcn@latest add button
Example
import { Button } from "@/components/ui/button"

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

"Unlike Chakra UI or MUI, shadcn/ui gives you the source code directly."

Trust Metrics

82K

GitHub Stars

450K

Weekly Downloads

Last Commit:last year
Used by
VercelSupabaseCal.com