143 lines
2.5 KiB
Plaintext
143 lines
2.5 KiB
Plaintext
---
|
||
title: Remix
|
||
description: Install and configure shadcn/ui for Remix.
|
||
---
|
||
|
||
<Callout type="info">
|
||
**Note:** The following guide is for Tailwind v4. If you are using Tailwind
|
||
v3, use `shadcn@2.3.0`.
|
||
</Callout>
|
||
|
||
<Callout type="info">
|
||
|
||
**Note:** This guide is for Remix. For React Router, see the [React Router](/docs/installation/react-router) guide.
|
||
|
||
</Callout>
|
||
|
||
<Steps>
|
||
<Step>
|
||
### Create project
|
||
|
||
Start by creating a new Remix project using `create-remix`:
|
||
|
||
```bash
|
||
npx create-remix@latest my-app
|
||
```
|
||
|
||
</Step>
|
||
|
||
<Step>
|
||
### Run the CLI
|
||
|
||
Run the `shadcn-ui` init command to setup your project:
|
||
|
||
```bash
|
||
npx shadcn@latest init
|
||
```
|
||
|
||
</Step>
|
||
|
||
<Step>
|
||
### 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
|
||
```
|
||
|
||
</Step>
|
||
|
||
<Step>
|
||
### 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.
|
||
|
||
</Step>
|
||
|
||
<Step>
|
||
### 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,
|
||
...
|
||
};
|
||
```
|
||
|
||
</Step>
|
||
|
||
<Step>
|
||
### 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 }] : []),
|
||
];
|
||
```
|
||
|
||
</Step>
|
||
|
||
<Step>
|
||
### 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
|
||
import { Button } from '~/components/ui/button';
|
||
|
||
export default function Home() {
|
||
return (
|
||
<div>
|
||
<Button>Click me</Button>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
</Step>
|
||
|
||
</Steps>
|