mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
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>
|