Dev.to

Most React 19 UI libraries restrict customization, leaving you stuck with rigid components.

React 19 pairs seamlessly with Shadcn UI, a utility-based React UI component library known for its flexibility and reusability. Shadcn UI React leverages Tailwind CSS, enabling developers to easily customize and create responsive, accessible components. Unlike traditional React UI libraries, Shadcn UI adds component files directly to your codebase, granting full access to modify styles and props as needed. Theming in Shadcn UI is straightforward, making it highly adaptable to various UI design React requirements. Step-by-Step Guide to Integrate Shadcn UI with React 19 Step 1: Create a New React App Run the following command to create a new React Vite app with the TypeScript template: npm create vite@latest react-shadcn-app -- --template react-ts Step 2: Navigate to the Project Directory and Test the App 1. Move into the project directory: cd react-shadcn-app 2. Install dependencies: npm install 3. Start the app and test it: npm run dev Open the app in your browser, e.g., http://localhost:5174. Ensure the default Vite app screen loads successfully. Step 3: Update to React 19 By default, Vite installs React 18. Update to React 19 using the following command: npm install react@latest react-dom@latest @types/react@latest @types/react-dom@latest Step 4: Install and Configure Tailwind CSS 1. Install tailwindcss and its peer dependencies, npm install -D tailwindcss postcss autoprefixer 2. Generate tailwind.config.js and postcss.config.js files: npx tailwindcss init -p 3. Configure Tailwind in src/index.css: Replace the content with: @tailwind base; @tailwind components; @tailwind utilities; Code language: CSS (css) Remove the default styles from index.css to prevent overriding: :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: #242424; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { font-weight: 500; color: #646cff; text-decoration: inherit; } a:hover { color: #535bf2; } body { margin: 0; display: flex; place-items: center; min-width: 320px; min-height: 100vh; } h1 { font-size: 3.2em; line-height: 1.1; } button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; background-color: #1a1a1a; cursor: pointer; transition: border-color 0.25s; } button:hover { border-color: #646cff; } button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } @media (prefers-color-scheme: light) { :root { color: #213547; background-color: #ffffff; } a:hover { color: #747bff; } button { background-color: #f9f9f9; } } 4. Update tailwind.config.js to include your template paths: /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"], theme: { extend: {}, }, plugins: [], } Step 5: Configure TypeScript and Vite Config 1. Update tsconfig.json for path aliasing: { "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ], "compilerOptions": { "baseUrl": ".", "paths": { "@/*": [ "./src/*"] } } } Update tsconfig.app.json for IDE support: { "compilerOptions": { // ... "baseUrl": ".", "paths": { "@/*": [ "./src/*" ] } // ... } 3. Install Node.js types: npm install -D @types/node Code language: CSS (css) 4. Update vite.config.ts file by below contents 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"), }, }, }) Step 6: Configure the Shadcn UI Library Run the shadcn UI init command to set up your project: npx shadcn@latest init Follow the prompts to configure components.json: Style: New York Base color: Zinc CSS variables for colors: Yes/No (based on preference) If you encounter the warning: ‘Some packages may fail to install due to peer dependency issues in npm,’ simply use the –legacy-peer-deps flag. This is necessary because not all supporting packages have been updated yet. For more information you can check here: https://ui.shadcn.com/docs/react-19 Now you can add components by using below command npx shadcn@latest add button If you find the deprecated React.ElementRef in any Shadcn UI component from the Shadcn library, you can replace it with React.ComponentRef. The command above will add the Shadcn UI Button component to your project. You can then import it like this: import { Button } from "@/components/ui/button" export default function Home() { return (

Feb 21, 2025 - 08:54
 0
Most React 19 UI libraries restrict customization, leaving you stuck with rigid components.

Image description
React 19 pairs seamlessly with Shadcn UI, a utility-based React UI component library known for its flexibility and reusability. Shadcn UI React leverages Tailwind CSS, enabling developers to easily customize and create responsive, accessible components. Unlike traditional React UI libraries, Shadcn UI adds component files directly to your codebase, granting full access to modify styles and props as needed. Theming in Shadcn UI is straightforward, making it highly adaptable to various UI design React requirements.

Step-by-Step Guide to Integrate Shadcn UI with React 19

Image description

Step 1: Create a New React App

Run the following command to create a new React Vite app with the TypeScript template:

npm create vite@latest react-shadcn-app -- --template react-ts

Step 2: Navigate to the Project Directory and Test the App

1. Move into the project directory:

cd react-shadcn-app
2. Install dependencies:
npm install
3. Start the app and test it:

npm run dev
Open the app in your browser, e.g., http://localhost:5174. Ensure the default Vite app screen loads successfully.

Image description

Step 3: Update to React 19

By default, Vite installs React 18. Update to React 19 using the following command:

npm install react@latest react-dom@latest @types/react@latest @types/react-dom@latest

Step 4: Install and Configure Tailwind CSS

1. Install tailwindcss and its peer dependencies,

npm install -D tailwindcss postcss autoprefixer
2. Generate tailwind.config.js and postcss.config.js files:

npx tailwindcss init -p
3. Configure Tailwind in src/index.css: Replace the content with:

@tailwind base;
@tailwind components;
@tailwind utilities;
Code language: CSS (css)

Remove the default styles from index.css to prevent overriding:

:root {
 font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 line-height: 1.5;
 font-weight: 400;
 color-scheme: light dark;
 color: rgba(255, 255, 255, 0.87);
 background-color: #242424;
 font-synthesis: none;
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

a {
 font-weight: 500;
 color: #646cff;
 text-decoration: inherit;
}

a:hover {
 color: #535bf2;
}

body {
 margin: 0;
 display: flex;
 place-items: center;
 min-width: 320px;
 min-height: 100vh;
}

h1 {
 font-size: 3.2em;
 line-height: 1.1;
}

button {
 border-radius: 8px;
 border: 1px solid transparent;
 padding: 0.6em 1.2em;
 font-size: 1em;
 font-weight: 500;
 font-family: inherit;
 background-color: #1a1a1a;
 cursor: pointer;
 transition: border-color 0.25s;
}

button:hover {
 border-color: #646cff;
}

button:focus,
button:focus-visible {
 outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
 :root {
 color: #213547;
 background-color: #ffffff;
 }

 a:hover {
 color: #747bff;
 }

 button {
 background-color: #f9f9f9;
 }
}

4. Update tailwind.config.js to include your template paths:

/** @type {import('tailwindcss').Config} */
module.exports = {
 content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
 theme: {
  extend: {},
 },
 plugins: [],
}

Step 5: Configure TypeScript and Vite Config

1. Update tsconfig.json for path aliasing:

{
 "files": [],
 "references": [
  {
   "path": "./tsconfig.app.json"
  },
  {
   "path": "./tsconfig.node.json"
  }
 ],
 "compilerOptions": {
  "baseUrl": ".",
  "paths": {
  "@/*": [ "./src/*"]
  }
 }
}
  1. Update tsconfig.app.json for IDE support: 
{
  "compilerOptions": {
   // ...
   "baseUrl": ".",
   "paths": {
    "@/*": [
     "./src/*"
    ]
   }
    // ...
 }

3. Install Node.js types:

npm install -D @types/node
Code language: CSS (css)
4. Update vite.config.ts file by below contents

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"),
  },
 },
})

Step 6: Configure the Shadcn UI Library

  1. Run the shadcn UI init command to set up your project:

npx shadcn@latest init

  1. Follow the prompts to configure components.json: 
Style: New York
Base color: Zinc
CSS variables for colors: Yes/No (based on preference)

If you encounter the warning: ‘Some packages may fail to install due to peer dependency issues in npm,’ simply use the –legacy-peer-deps flag. This is necessary because not all supporting packages have been updated yet.
For more information you can check here: https://ui.shadcn.com/docs/react-19

  1. Now you can add components by using below command

npx shadcn@latest add button

If you find the deprecated React.ElementRef in any Shadcn UI component from the Shadcn library, you can replace it with React.ComponentRef.

  1. The command above will add the Shadcn UI Button component to your project. You can then import it like this: 
import { Button } from "@/components/ui/button"
export default function Home() {
 return (
  

   
  

 )
}
  1. You can customize the theme to match your project’s styles. Here is a detailed Shadcn UI tutorial: You can customize the theme and copy it in the index.css file. Learn More

Image description

Step 7: Run and Verify Shadcn Configuration

  1. Start the application: npm run dev
  2. Check if Shadcn UI is configured correctly by adding some components and observing their appearance on the web.

To showcase Shadcn’s capabilities, we have integrated some example components into the project. You can find the complete codebase and examples on our GitHub repository
Components Integrated for Demonstration

1 Button

Shadcn provides a customizable Button component with variants like primary, secondary, and outline. You can also add icons and manage states like disabled

Command: npx shadcn@latest add button
Example:
  • The variant props control the button’s appearance.
  • Icons like Mail can be added inside the button.

2 Input

The Input component is used for various input types, while Textarea provides multi-line input capabilities.

Command: npx shadcn@latest add input

Input Example:

TextArea Example:

Command: npx shadcn@latest add textarea