Stop overthinking your UI components

Just Fucking Use shadcn

You've spent years building buttons from scratch, fighting CSS specificity, and maintaining component libraries nobody asked for. That ends today.

CN

Your component library is a disaster.

You've been building UI components for how long now? And you're still sitting there, reinventing the wheel for every fucking project.

your-component-graveyard.tsx
// TODO: add accessibility later
// TODO: fix dark mode
// TODO: make responsive
// FIXME: why is this breaking in Safari???
// NOTE: copied from Stack Overflow, don't touch

You've got 15 different button variants, 4 modal implementations, and a "design system" that's really just a folder called components-v2-final-FINAL. Half of it doesn't work on mobile. The other half fails WCAG.

This is the hell you chose. And for what? "Full control"? Give me a break.

What the fuck is shadcn?

shadcn is a collection of beautifully designed, accessible components that you copy and paste into your project. Not a library. Not a framework. Just code you own.

terminal
npx shadcn@latest add button

And here's what you get:

Accessible. Themeable. Customizable. You own the code. It just fucking works.

Why it's fucking great

You own the code

No node_modules black box. No waiting for library updates. No "sorry, that's not supported" bullshit. The code is in your project. Change whatever you want.

Accessibility built-in

Built on battle-tested primitives - choose between Radix UI or Base UI. Keyboard navigation, screen reader support, focus management - all handled. Stop pretending you were going to add that yourself.

Dark mode in seconds

No CSS variable nightmares. No theme context hell. Just add the dark class to your HTML and everything works.

Tailwind under the hood

Styled with Tailwind CSS. Which means you already know how to customize it. No proprietary styling API to learn.

AI speaks shadcn fluently

Every AI model knows shadcn. Claude, GPT, Copilot - they've all been trained on it. Ask for a component and get production-ready code instantly. This is the future of UI development: you describe what you want, AI builds it with shadcn. No more Googling docs.

Build your own shadcn (the Registry)

Here's the part most people miss: shadcn isn't just a bunch of components. It's a distribution system. With the Registry, you can publish your own components, blocks, and patterns so your whole team can install them with the CLI.

That means you can build your own internal "shadcn": opinionated defaults, real accessibility, your design tokens, your components - and still keep the best part: everything gets copied into the app.

registry.json
{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "your-registry",
  "homepage": "https://your-company.com",
  "items": []
}

The ecosystem is fucking massive

shadcn isn't just one library. It's an entire ecosystem of registries built by the community. Whatever you need, there's probably a registry for it.

8bitcn

Need retro 8-bit styled components? There's a registry for that.

React Bits

Need high-quality animations and effects? There's a registry for that.

AI Elements

Need AI-focused UI components? There's a registry for that.

nuqs

Need type-safe URL search params? There's a registry for that.

Tailark

Need landing page blocks and templates? There's a registry for that.

And that's just the beginning. The shadcn registry format is open, so anyone can build and share components.

"But wait..."

"Copy-paste is bad practice!"

Is it? You used to copy-paste from Stack Overflow every day. At least this code is tested, accessible, and well-designed. Plus you can actually modify it without forking a repo.

"I need a full component library!"

Cool, install gazillion components you'll never use. Or just add what you need, when you need it. Revolutionary concept, I know.

"It's just UI primitives!"

Wrong. Look at what you get:

CategoryComponents
FormsInput, Select, Checkbox, Radio, Switch, Slider
FeedbackAlert, Toast, Dialog, Sheet, Tooltip
Data DisplayTable, Card, Avatar, Badge, Calendar
NavigationTabs, Menu, Breadcrumb, Pagination, Command

When should you use shadcn?

  • Building a new React project? Use shadcn.
  • Building with AI? Use shadcn.
  • Need accessible components? Use shadcn.
  • Want dark mode that works? Use shadcn.
  • Tired of fighting your component library? Use shadcn.
  • Want to actually ship? Use shadcn.

Stop overthinking. Start building.

shadcn isn't perfect. Nothing is. But it solves real problems that UI development has had for years. So stop reading comparison articles, stop watching YouTube videos, stop asking Twitter.

Just fucking use shadcn.

Get started

Inspired by justfuckingusetailwind.com, motherfuckingwebsite.com, and all the other "just fucking use" sites.