Knowing how to use shadcn/ui is one of the fastest ways to make a product look intentional rather than generic. shadcn/ui gives you beautifully structured React components that you own outright, drop into your codebase, and style to match your brand. This article walks founders and vibe coders through installation, theming, and customisation so your product looks world class from day one, not after a costly design overhaul.
What is shadcn/ui and why should founders use it?
shadcn/ui is a collection of accessible, composable React components built on top of Radix UI primitives and styled with Tailwind CSS. Unlike a traditional component library, you copy each component directly into your project. That means no locked-in version upgrades, no fighting a third-party API, and complete control over every pixel. For founders building their first product, that control is genuinely freeing.
Most AI-generated UIs pull from the same generic defaults. Buttons look flat, spacing feels random, and nothing quite hangs together. shadcn/ui solves that by giving you a consistent design language baked in before you write a single line of custom CSS. If you are already learning to vibe code your first product, this is the component system worth building on.
- Components are copied into your repo, so you own and edit them freely
- Radix UI handles accessibility (keyboard nav, ARIA, focus management) out of the box
- Tailwind CSS means styling stays co-located and easy to read
- A growing ecosystem of themes and third-party extensions exists around it
shadcn/ui also pairs well with Next.js, Vite, and Remix, so it fits most modern React stacks without friction. You can browse the full component catalogue and official docs at ui.shadcn.com.
How to use shadcn/ui: installation step by step
Installing shadcn/ui takes under five minutes if you already have a React project with Tailwind set up. The CLI handles the heavy lifting, so you do not need to manually wire up dependencies. Here is the exact flow to follow.
Prerequisites
Before you run the init command, make sure your project has Node 18 or above, Tailwind CSS configured, and a path alias set up (typically @/ pointing to your src or root folder). If you are starting from scratch, the easiest route is npx create-next-app@latest with the Tailwind option selected.
Running the CLI
Open your terminal in the project root and run npx shadcn@latest init. The CLI asks you a few questions: your preferred style (Default or New York), your base colour, and whether you use CSS variables. Choose CSS variables if you plan to support a dark mode or want easy theme switching later. The command then writes a components.json config file and patches your global CSS with the design tokens shadcn/ui needs.
Adding your first component
Run npx shadcn@latest add button to pull the Button component into components/ui/button.tsx. Import it with import {"{ Button }"} from "@/components/ui/button" and drop it into any page. You will immediately notice the typography, padding, and focus ring all feel considered. Repeat the add command for any component you need: card, dialog, input, badge, and so on.
- Run npx shadcn@latest add [component] for each piece you need
- All files land in components/ui/ and are fully editable
- No extra config is needed between installs
- Check components.json if a path ever resolves incorrectly
Theming and customisation: making shadcn/ui feel like your brand
Theming in shadcn/ui works through CSS custom properties defined in your global stylesheet. When you run init, it writes a set of variables like --background, --foreground, --primary, and --radius into your CSS. Changing your brand colour is as simple as updating --primary and its foreground counterpart.
This approach is what separates a product that looks intentional from one that looks like every other AI-scaffolded app. Take ten minutes at the start of your project to set your colour palette, border radius, and font, and every component you add from that point inherits your brand automatically. That is the compounding benefit of a token-based system.
Setting up a custom colour palette
shadcn/ui uses HSL values for its colour variables. Pick your primary brand colour, convert it to HSL using a tool like ColorHexa, then paste the values into both the light and dark blocks in your global CSS. Change --radius to suit your brand: 0.25rem feels sharp and technical, 0.75rem feels friendly and modern.
Swapping the default font
shadcn/ui does not impose a font. Add your chosen typeface via Next.js Font Optimization or a standard Google Fonts import, then apply it to the body in your global CSS. The components inherit it instantly. For a polished result, pair a geometric sans-serif for headings with a neutral sans for body text. Check the broader guide on how to make your website look professional for more on typography decisions.
- All colour tokens live in one place, making rebranding trivial
- Dark mode is a single CSS block swap, not a component rewrite
- Border radius tokens keep every corner consistent across the product
- Font changes propagate everywhere without touching component files
Prompts that help AI generate better shadcn/ui code
The quality of AI-generated UI code rises sharply when your prompt names shadcn/ui explicitly and describes the component structure you want. Vague prompts produce vague results. Specific prompts produce code you can actually ship. Below are prompt patterns that work well for founders building with AI assistance.
Pairing good prompts with the right component library is exactly how you avoid the generic AI aesthetic. For a deeper dive on prompting strategy, the article on how to prompt AI for UI design covers this in full.
- "Build a pricing card using shadcn/ui Card, Badge, and Button components. Use a two-column grid on desktop. Apply a --primary border on the recommended tier."
- "Create a responsive nav using shadcn/ui Sheet for the mobile drawer and NavigationMenu for desktop. Include logo on the left and CTA button on the right."
- "Generate a settings form using shadcn/ui Form, Input, Select, and Switch. Group fields under labelled sections with a sticky Save button at the bottom."
- "Build a data table with shadcn/ui Table and add a Skeleton loading state. Include sorting on the Name and Date columns."
- "Style a hero section using shadcn/ui typography classes. H1 in --foreground, subtitle in --muted-foreground, and a primary Button with a ghost variant beside it."
The common thread in each prompt: name the library, name the specific components, and describe the layout and visual hierarchy. That level of specificity cuts revision cycles in half.
Going beyond shadcn/ui with custom components
shadcn/ui covers the functional layer, but custom animated and decorative components push your product into world-class territory. Once your base system is solid, you can layer in motion, texture, and personality without rebuilding anything from scratch.
ReactBits.dev is one of the best resources for this. It offers a library of drop-in React components including animated backgrounds, scroll effects, text animations, and interactive cards, all built to sit alongside shadcn/ui. Pick one or two effects that reinforce your brand and apply them sparingly. Restraint is what makes a UI feel premium rather than chaotic.
You can also explore the best UI component libraries for developers to compare other options that complement shadcn/ui. The goal is always the same: start with a consistent functional foundation, then add character on top.
| Layer | Tool | What it gives you |
|---|---|---|
| Functional components | shadcn/ui | Accessible, branded UI primitives you own |
| Animation and motion | ReactBits.dev | Drop-in animated components and scroll effects |
| Icons | Lucide React | Consistent icon set, already used by shadcn/ui |
| Fonts | Google Fonts / Next.js Font | Brand typography with zero layout shift |
| Colour tokens | CSS custom properties in global CSS | One-place theming across every component |
Common mistakes when learning how to use shadcn/ui
The most common mistake founders make when learning how to use shadcn/ui is overriding component styles with inline CSS instead of editing the component file or updating a CSS token. Inline overrides accumulate fast and make your codebase impossible to maintain. Because shadcn/ui components live in your repo, you are meant to edit them directly.
A second mistake is installing every component upfront. Add components only when you need them. Unused components sitting in your codebase just add noise. A third is skipping the components.json path setup, which causes import errors that feel mysterious until you trace them back to a misconfigured alias. Check the official installation docs if your imports are not resolving.
- Edit the component file directly rather than overriding with inline styles
- Add components on demand, not all at once
- Confirm your path alias matches what is set in components.json
- Use the cn() utility for conditional class merging, not string concatenation
- Keep your CSS variables consistent between the light and dark blocks
If you are building a product as a non-technical founder and find the setup overwhelming, the guide on how to build an app as a non-technical founder walks through the broader context of choosing tools and getting started without a deep engineering background.
Frequently Asked Questions
Is shadcn/ui a component library or a framework?
shadcn/ui is neither a traditional library nor a framework. It is a collection of copy-paste components built on Radix UI and styled with Tailwind CSS. You run a CLI command to copy each component directly into your project, which means you own the code fully and can modify it without version constraints or peer-dependency conflicts.
Do I need to know Tailwind CSS to use shadcn/ui?
A basic understanding of Tailwind helps, but you do not need to be an expert. Most customisation happens by editing CSS variables in your global stylesheet, not by writing Tailwind classes from scratch. If you can read and tweak class names like text-sm or rounded-md, you have enough Tailwind knowledge to work with shadcn/ui confidently.
Can I use shadcn/ui with Vite instead of Next.js?
Yes. shadcn/ui works with any React project that supports Tailwind CSS and path aliases. The official docs include installation guides for Next.js, Vite, Remix, and Astro. The CLI process is nearly identical across all of them. The main difference is how you configure the path alias in your vite.config.ts or equivalent config file.
How do I add dark mode to a shadcn/ui project?
Dark mode in shadcn/ui works through a second CSS variable block scoped to .dark on the root element. When you run the init CLI and choose CSS variables, this block is written automatically. You then toggle the dark class on your HTML element, usually with a state variable or a library like next-themes, and every component switches colour instantly with no extra work.
What if I want someone to build this for me?
If setting up shadcn/ui, writing prompts, and customising components sounds like more than you want to take on right now, that is completely reasonable. Reach out or book a call to talk through what you are building. Even a short conversation can clarify the fastest path to a product that looks genuinely polished, without you having to figure it all out alone.
