How to Install Shadcn UI using React, JavaScript, and Vite

Shadcn UI is a popular UI library for React that provides a variety of pre-built components and styles to help you quickly build beautiful user interfaces. In this article, we will walk you through the steps to install Shadcn UI using React, JavaScript, and Vite.

Step 1: Create a new React app using Vite

If you haven’t already, install Vite by running the following command:

npm install -g create-vite

Then create a new React app using Vite by running the following command:

create-vite my-react-app --template react

Step 2: Install Shadcn UI

Once you have created your React app, navigate into the project directory and install Shadcn UI by running the following command:

npm install shadcn-ui

Step 3: Import Shadcn UI components

In your React components where you want to use Shadcn UI components, import the necessary components from the `shadcn-ui` library. For example:

import { Button, Card } from 'shadcn-ui';

Step 4: Start using Shadcn UI components

Now that you have installed and imported Shadcn UI components, you can start using them in your React components. For example:

{/* Button component */}
<Button type="primary">Click me</Button>

{/* Card component */}
<Card title="Example Card">Hello World!</Card>

Step 5: Start your development server

Start your development server by running the following command:

npm run dev

Now you can see your React app with Shadcn UI components running in your browser!

That’s it! You have successfully installed Shadcn UI using React, JavaScript, and Vite. Happy coding!