mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-25 13:46:07 +00:00
58 lines
1.2 KiB
Plaintext
58 lines
1.2 KiB
Plaintext
---
|
|
title: React Router
|
|
description: Install and configure shadcn/ui for React Router.
|
|
---
|
|
|
|
<Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
|
|
|
|
**Starting a new project?** Use [shadcn/create](/create) for a fully configured React Router app with custom themes, Base UI or Radix, and icon libraries.
|
|
|
|
</Callout>
|
|
|
|
<Steps>
|
|
|
|
### Create project
|
|
|
|
```bash
|
|
npx shadcn@latest init -t react-router
|
|
```
|
|
|
|
**For a monorepo project, use `--monorepo` flag:**
|
|
|
|
```bash
|
|
npx shadcn@latest init -t react-router --monorepo
|
|
```
|
|
|
|
### Add Components
|
|
|
|
You can now start adding components to your project.
|
|
|
|
```bash
|
|
npx shadcn@latest add button
|
|
```
|
|
|
|
The command above will add the `Button` component to your project. You can then import it like this:
|
|
|
|
```tsx showLineNumbers title="app/routes/home.tsx"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
import type { Route } from "./+types/home"
|
|
|
|
export function meta({}: Route.MetaArgs) {
|
|
return [
|
|
{ title: "New React Router App" },
|
|
{ name: "description", content: "Welcome to React Router!" },
|
|
]
|
|
}
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="flex min-h-svh flex-col items-center justify-center">
|
|
<Button>Click me</Button>
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
</Steps>
|