mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
216 lines
5.1 KiB
Plaintext
216 lines
5.1 KiB
Plaintext
---
|
||
title: Remix
|
||
description: How to use HeroUI with Remix
|
||
---
|
||
|
||
# Remix
|
||
|
||
Requirements:
|
||
|
||
- [React 18](https://reactjs.org/) or later
|
||
- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/remix) or later
|
||
- [Framer Motion 11.9](https://www.framer.com/motion/) or later
|
||
|
||
------
|
||
|
||
<CarbonAd/>
|
||
|
||
To use HeroUI in your Remix project, you need to follow the following steps:
|
||
|
||
### Using HeroUI + Remix template
|
||
|
||
If you are starting a new project, you can run one of the following commands to create a Remix project pre-configured with HeroUI:
|
||
|
||
<PackageManagers
|
||
commands={{
|
||
npm: 'npx create-remix@latest --template https://github.com/heroui-inc/remix-template',
|
||
yarn: 'yarn create remix --template https://github.com/heroui-inc/remix-template',
|
||
pnpm: 'pnpm create remix --template https://github.com/heroui-inc/remix-template',
|
||
bun: 'bunx create-remix@latest --template https://github.com/heroui-inc/remix-template',
|
||
}}
|
||
/>
|
||
|
||
### Automatic Installation
|
||
|
||
You can add individual components using the CLI. For example, to add a button component:
|
||
|
||
```codeBlock bash
|
||
npx heroui-cli@latest add button
|
||
```
|
||
|
||
This command adds the Button component to your project and manages all related dependencies.
|
||
|
||
You can also add multiple components at once:
|
||
|
||
```codeBlock bash
|
||
npx heroui-cli@latest add button input
|
||
```
|
||
|
||
Or you can add the main library `@heroui/react` by running the following command:
|
||
|
||
```codeBlock bash
|
||
npx heroui-cli@latest add --all
|
||
```
|
||
|
||
If you leave out the component name, the CLI will prompt you to select the components you want to add.
|
||
|
||
```codeBlock bash
|
||
? Which components would you like to add? › - Space to select. Return to submit
|
||
Instructions:
|
||
↑/↓: Highlight option
|
||
←/→/[space]: Toggle selection
|
||
[a,b,c]/delete: Filter choices
|
||
enter/return: Complete answer
|
||
|
||
Filtered results for: Enter something to filter
|
||
|
||
◯ accordion
|
||
◯ autocomplete
|
||
◯ avatar
|
||
◯ badge
|
||
◯ breadcrumbs
|
||
◉ button
|
||
◯ card
|
||
◯ checkbox
|
||
◯ chip
|
||
◯ code
|
||
```
|
||
|
||
You still need to add the provider to your app manually (we are working on automating this step).
|
||
|
||
```jsx {3,7,9}
|
||
// app/providers.tsx
|
||
|
||
import {HeroUIProvider} from '@heroui/react'
|
||
|
||
export function Providers({children}: { children: React.ReactNode }) {
|
||
return (
|
||
<HeroUIProvider>
|
||
{children}
|
||
</HeroUIProvider>
|
||
)
|
||
}
|
||
```
|
||
|
||
<Spacer y={4} />
|
||
|
||
```jsx {6,10,12,14}
|
||
// app/layout.tsx
|
||
|
||
// globals.css includes @tailwind directives
|
||
// adjust the path if necessary
|
||
import "@/styles/globals.css";
|
||
import {Providers} from "./providers";
|
||
|
||
export default function RootLayout({children}: { children: React.ReactNode }) {
|
||
return (
|
||
<html lang="en" className='dark'>
|
||
<body>
|
||
<Providers>
|
||
{children}
|
||
</Providers>
|
||
</body>
|
||
</html>
|
||
);
|
||
}
|
||
```
|
||
|
||
### Manual Installation
|
||
|
||
<Steps>
|
||
|
||
### Add dependencies
|
||
|
||
In your Remix project, run one of the following command to install HeroUI:
|
||
|
||
<PackageManagers
|
||
commands={{
|
||
npm: 'npm i @heroui/react framer-motion',
|
||
yarn: 'yarn add @heroui/react framer-motion',
|
||
pnpm: 'pnpm add @heroui/react framer-motion',
|
||
bun: "bun add @heroui/react framer-motion"
|
||
}}
|
||
/>
|
||
|
||
### Hoisted Dependencies Setup
|
||
|
||
<Blockquote color="primary">
|
||
**Note**: This step is only for those who use `pnpm` to install. If you install HeroUI using other package managers, you may skip this step.
|
||
</Blockquote>
|
||
|
||
If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
|
||
|
||
```bash
|
||
public-hoist-pattern[]=*@heroui/*
|
||
```
|
||
|
||
After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
|
||
|
||
### Tailwind CSS Setup
|
||
|
||
HeroUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
|
||
[installation guide](https://tailwindcss.com/docs/guides/remix) to install Tailwind CSS. Then you need to add
|
||
the following code to your `tailwind.config.js` file:
|
||
|
||
<Blockquote color="primary">
|
||
**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
|
||
</Blockquote>
|
||
|
||
```ts {2,10,15-16}
|
||
// tailwind.config.ts
|
||
const { heroui } = require("@heroui/react");
|
||
|
||
import type { Config } from 'tailwindcss'
|
||
|
||
export default {
|
||
content: [
|
||
// ...
|
||
// make sure it's pointing to the ROOT node_module
|
||
"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}"
|
||
],
|
||
theme: {
|
||
extend: {},
|
||
},
|
||
darkMode: "class",
|
||
plugins: [heroui()]
|
||
} satisfies Config
|
||
```
|
||
|
||
### Provider Setup
|
||
|
||
After installing HeroUI, you need to set up the `HeroUIProvider` at the `root` of your application.
|
||
|
||
Go to the src directory and inside `root.tsx`, wrap `HeroUIProvider` around App:
|
||
|
||
```tsx {9,19,24}
|
||
import {
|
||
Links,
|
||
LiveReload,
|
||
Meta,
|
||
Outlet,
|
||
Scripts,
|
||
ScrollRestoration,
|
||
} from "@remix-run/react";
|
||
import {HeroUIProvider} from "@heroui/react";
|
||
|
||
export default function App() {
|
||
return (
|
||
<html lang="en">
|
||
<head>
|
||
<Meta />
|
||
<Links />
|
||
</head>
|
||
<body>
|
||
<HeroUIProvider>
|
||
<Outlet />
|
||
<ScrollRestoration />
|
||
<Scripts />
|
||
<LiveReload />
|
||
</HeroUIProvider>
|
||
</body>
|
||
</html>
|
||
);
|
||
}
|
||
```
|
||
|
||
</Steps> |