Vite

Requirements:

Vite 4 or later
React 18 or later
Tailwind CSS 3.4 or later

Installation

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

npm install @openlite/ui

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.js file:

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

Ready 🎉

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

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

Import the component in your App.jsx file:

// src/App.jsx
 
import ButtonExample from "./components/ButtonExample"
 
export default function App() {
  return (
    <>
     {/* Your components */}
     <ButtonExample />    
    </>
   )
}

Vite

Installation

Tailwind CSS Setup

Ready 🎉

On this page