Remix

Requirements:

React 18 or later
Tailwind CSS 3.4 or later

Installation

In your Remix project, run one of the following command to install Open UI:

npm install @openlite/ui

Tailwind CSS Setup

Open UI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official installation guide to install Tailwind CSS. Then you need to add

the following code to your tailwind.config.ts file:

// tailwind.config.ts
import type { Config } from 'tailwindcss'
import { openui } from "@openlite/ui/tailwind"
 
export default {
  content: [
    //...
    "./node_modules/@openlite/ui/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [openui()]
} satisfies Config

Ready 🎉

Now, you can use the component you installed in your application 🎉.

// src/components/ButtonExample.tsx
import { Button } from "@openlabs/ui"
 
export default function ButtonExample() {
  return <Button>Press me</Button>
}

Import the component in your app/routes/index.tsx file:

import ButtonExample from "@/components/ButtonExample"
 
export default function Index() {
  return (
    <div>
      <ButtonExample />
    </div>
  )
}

Remix

Installation

Tailwind CSS Setup

Ready 🎉

On this page