What is shadcn/ui?

Shadcn/ui is a re-usable components built using Radix UI and Tailwind CSS.

• Radix UI - Unstyled, accessible components for building high‑quality design systems and web apps in React.
• Tailwind CSS - A utility-first CSS framework packed with utility CSS classes that can be used to build any design.

Why use shadcn/ui?

With shadcn/ui you can pick the component you need. Copy and Paste in your code and have the ability to customize the component as you like.

Benefits

There are a lot of benefits when using shadcn/ui as it uses Radix UI under the hood that provides a lot of accessibilities improvements but also other benefits like:

• Custom Components included in your database.
• Style components easily with Tailwind CSS.
• Extend the component functionality as you like.

How to use it?

There are two options to use shadcn/ui:

1. Copy/Paste the desired component.
2. Using the CLI (easy to use after configuration)

I'm going to show an example of how to use shadcn/ui with Vite but you can see the list of supported frameworks and the configuration steps Here.

Create Vite project

Install

npm create vite@latest

√ Select a framework: » React
√ Select a variant: » TypeScript

Add Tailwind CSS

This is essential because all the components are styled with Tailwind CSS so we need to make sure it's installed and then generate the tailwind.config.js and postcss.config.js files.

Install

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Edit tsconfig.json

Under the compilerOptions in the tsconfig.json file, we need the following code to resolve paths without any issues.

Edit Path

{
  "compilerOptions": {
	  "baseUrl": ".",
	  "paths": {
	     "@/*": ["./src/*"]
	  }
  }
}

Update vite.config.ts

We need to import path in vite.config.ts file and to resolve paths without errors we need to add Node.js types.

Install

# (so you can import "path" without error)
npm i -D @types/node

Import path

import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

Edit settings.json

The auto-import in Visual Studio will only import files using the relative paths but if we want it to import files using the alias we need to add this line 👇

"typescript.preferences.importModuleSpecifier": "non-relative"

Add Shadcn/ui

To use Shadcn/ui CLI we need to run the install command. Then we will have a list of questions to add the necessary files to your project.

Install

npx shadcn-ui@latest init

Configuration

√ Would you like to use TypeScript (recommended)? ... no / yes
√ Which style would you like to use? » Default
√ Which color would you like to use as base color? » Zinc
√ Where is your global CSS file? ... @/index.css
√ Would you like to use CSS variables for colors? ... no / yes
√ Where is your tailwind.config.js located? ... tailwind.config.js
√ Configure the import alias for components: ... @/components
√ Configure the import alias for utils: ... @/lib/utils
√ Are you using React Server Components? ... no / yes
√ Write configuration to components.json. Proceed? ... yes

The main CSS file when using Vite is set to index.css that's why for the options of global CSS file I choose index.css but you can point to global.css file or rename it to whatever you want.

Add Components

You can see all shadcn/ui components Here. To install a component you to use this command followed by the component name:

npx shadcn-ui@latest add [component]

All components will be added inside components/ui folder ready to be configured, restyled, and used.

Edit Styles

You can configure the styles for your components from index.css or global.css easily by just changing the root variables to whatever color you want or use editing each component style individually.