React Router

Create project

npx create-react-router@latest my-app

pnpm dlx create-react-router@latest my-app

yarn create-react-router@latest my-app

bunx --bun create-react-router@latest my-app

Run the CLI

Run the shadcn init command to setup your project:

npx shadcn@latest init

pnpm dlx shadcn@latest init

yarn shadcn@latest init

bunx --bun shadcn@latest init

Add Components

You can now start adding components to your project.

npx shadcn@latest add button

pnpm dlx shadcn@latest add button

yarn shadcn@latest add button

bunx --bun shadcn@latest add button

The command above will add the Button component to your project. You can then import it like this:

app/page.tsx

import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

If you want to add all shadcn/ui components, you can run the following command:

npx shadcn@latest add --all

pnpm dlx shadcn@latest add --all

yarn shadcn@latest add --all

bunx --bun shadcn@latest add --all

Create project

Run the CLI

Add Components

On this page