Open UI

Installation

Requirements:

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,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [openui()]
}

Example

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

import { Button } from "@openlite/ui"
 
export default function App() {
  return <Button>Press me</Button>
}

Previous

Introduction

Next

Typography

On this page

InstallationTailwind CSS SetupExample