Next.js

Requirements:

Next.js 12 or later
React 18 or later
Tailwind CSS 3.4 or later

App Directory Setup

Next.js 13 introduces a new app/ directory structure. By default it uses Server Components. As Open UI components use React hooks, we added the use client; at build time, so you can import them directly in your React Server Components (RSC).

Installation

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.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 page.{jsx,tsx} file:

// app/page.{jsx,tsx}
 
import ButtonExample from "@/components/ButtonExample"
 
export default function Page() {
  return (
    <>
     {/* Your components */}
     <ButtonExample />    
    </>
   )
}