mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-03 01:18:38 +00:00
53 lines
896 B
Plaintext
53 lines
896 B
Plaintext
---
|
|
title: Remix
|
|
description: Install and configure shadcn/ui for Remix.
|
|
---
|
|
|
|
<Callout>
|
|
|
|
**Note:** This guide is for Remix. For React Router, see the [React Router](/docs/installation/react-router) guide.
|
|
|
|
</Callout>
|
|
|
|
<Steps>
|
|
|
|
### Create project
|
|
|
|
Start by creating a new Remix project using `create-remix`:
|
|
|
|
```bash
|
|
npx create-remix@latest my-app
|
|
```
|
|
|
|
### Run the CLI
|
|
|
|
Run the `shadcn` init command to setup your project:
|
|
|
|
```bash
|
|
npx shadcn@latest init
|
|
```
|
|
|
|
### That's it
|
|
|
|
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 {1,6} showLineNumbers title="app/routes/index.tsx"
|
|
import { Button } from "~/components/ui/button"
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div>
|
|
<Button>Click me</Button>
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
</Steps>
|