shadcn/ui

UI

Links

shadcn/ui is a collection of beautifully designed, accessible, and customizable React components that you can copy and paste into your applications. Built with Radix UI and Tailwind CSS, these components are open-source and serve as a reference for building your own component libraries.

oaicite:0

---

Usage Example

To use a component from shadcn/ui, follow these steps:

1. Initialize your project:

   Use the CLI to set up your project and install necessary dependencies:

   npx shadcn@latest init
   

   This command will prompt you to configure your project settings.

   oaicite:1

2. Add a component:

   Add the desired component to your project using the add command. For example, to add a button component:

   npx shadcn@latest add button
   

   This will copy the button component code into your project, allowing you to customize it as needed.

   oaicite:2

3. Use the component in your application:

   Import and use the component in your React application:

   import { Button } from '@/components/ui/button';
   
   function App() {
     return <Button>Click Me</Button>;
   }
   
   export default App;
   

   This example demonstrates how to integrate the button component into your application.

   oaicite:3