mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
16c4453cc1
Squash merge of shadcn-ui/ui main branch into hanzo/ui, bringing in: - [email protected] through [email protected] releases - New apps/v4 directory structure - Registry system improvements and MCP server - Framework support (Vue, Svelte, React Native) - New templates (vite-app, monorepo-next, laravel) - Zod 4 compatibility (scoped override for zod@>4) - Test fixture corrections for alias resolution All 867 merge conflicts resolved preserving Hanzo customizations. 1020/1020 shadcn tests pass.
123 lines
2.5 KiB
Plaintext
123 lines
2.5 KiB
Plaintext
---
|
||
title: Remix
|
||
description: Install and configure shadcn/ui for Remix.
|
||
---
|
||
|
||
<Callout className="bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
|
||
**Note:** The following guide is for Tailwind v4. If you are using Tailwind
|
||
v3, use `[email protected]`.
|
||
</Callout>
|
||
|
||
<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 `hanzo-ui` init command to setup your project:
|
||
|
||
```bash
|
||
npx @hanzo/ui@latest init
|
||
```
|
||
|
||
### Configure components.json
|
||
|
||
You will be asked a few questions to configure `components.json`:
|
||
|
||
```txt showLineNumbers
|
||
Which style would you like to use? › New York
|
||
Which color would you like to use as base color? › Zinc
|
||
Do you want to use CSS variables for colors? › no / yes
|
||
```
|
||
|
||
### App structure
|
||
|
||
<Callout>
|
||
|
||
**Note**: This app structure is only a suggestion. You can place the files wherever you want.
|
||
|
||
</Callout>
|
||
|
||
- Place the UI components in the `app/components/ui` folder.
|
||
- Your own components can be placed in the `app/components` folder.
|
||
- The `app/lib` folder contains all the utility functions. We have a `utils.ts` where we define the `cn` helper.
|
||
- The `app/tailwind.css` file contains the global CSS.
|
||
|
||
### Install Tailwind CSS
|
||
|
||
```bash
|
||
npm install -D tailwindcss@latest autoprefixer@latest
|
||
```
|
||
|
||
Then we create a `postcss.config.js` file:
|
||
|
||
```js
|
||
export default {
|
||
plugins: {
|
||
tailwindcss: {},
|
||
autoprefixer: {},
|
||
},
|
||
}
|
||
```
|
||
|
||
And finally we add the following to our `remix.config.js` file:
|
||
|
||
```js {4-5}
|
||
/** @type {import('@remix-run/dev').AppConfig} */
|
||
export default {
|
||
...
|
||
tailwind: true,
|
||
postcss: true,
|
||
...
|
||
};
|
||
```
|
||
|
||
### Add `tailwind.css` to your app
|
||
|
||
In your `app/root.tsx` file, import the `tailwind.css` file:
|
||
|
||
```js {1, 4}
|
||
import styles from "./tailwind.css?url"
|
||
|
||
export const links: LinksFunction = () => [
|
||
{ rel: "stylesheet", href: styles },
|
||
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
|
||
]
|
||
```
|
||
|
||
### That's it
|
||
|
||
You can now start adding components to your project.
|
||
|
||
```bash
|
||
npx @hanzo/ui@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
|
||
import { Button } from "~/components/ui/button"
|
||
|
||
export default function Home() {
|
||
return (
|
||
<div>
|
||
<Button>Click me</Button>
|
||
</div>
|
||
)
|
||
}
|
||
```
|
||
|
||
</Steps>
|