Open UI

Astro

Requirements:

Open UI is built on top of React, so you need to install React first. You can follow the official integration guide to install React.

Installation

In your Astro 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.mjs file:

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

Ready 🎉

Now you can import Open UI components and use them in your Astro project:

---
import Layout from '../layouts/Layout.astro';
import { Button } from '@openlite/ui';
---
 
<Layout title="Welcome to Astro.">
  <main>
      <Button client:visible>My button</Button>
  </main>
</Layout>

Previous

Figma

Next

Next.js

On this page

InstallationTailwind CSS SetupReady 🎉