mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-02 00:54:15 +00:00
* docs: review all docs * fix Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * docs(spinner): reintroduce data-icon attribute guidance in radix spinner docs (#10059) * Initial plan * docs: add data-icon attribute instructions to radix/spinner.mdx button and badge sections Co-authored-by: shadcn <124599+shadcn@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: shadcn <124599+shadcn@users.noreply.github.com> --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
53 lines
897 B
Plaintext
53 lines
897 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 set up 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>
|