Glass UI

Astro

Install and configure Glass UI in an Astro project.

Installation

Create a new project

Start by creating a fresh Astro project. If you already have a project, you can skip this step.

npm create astro@latest

Add React

Add the official React integration to your Astro project:

npx astro add react

Install Tailwind CSS

Install Tailwind CSS and its Vite plugin. If your project already has it configured, you can skip this step.

npm install tailwindcss @tailwindcss/vite

Configure Astro

Add the Tailwind CSS plugin to your astro.config.mjs file via the Vite configuration:

astro.config.mjs
123456789101112
// @ts-check
import { defineConfig } from "astro/config";
import react from "@astrojs/react";
import tailwindcss from "@tailwindcss/vite";


// https://astro.build/config
export default defineConfig({
  integrations: [react()],
  vite: {
    plugins: [tailwindcss()],
  },
});

Import Tailwind CSS

Create a src/styles/global.css file and add the Tailwind import directive:

src/styles/global.css
@import "tailwindcss";

Add Styles to Layout

Import the global.css file into your main layout so the styles are applied globally across your application:

src/layouts/Layout.astro
12345678910111213141516
---
import "@/styles/global.css";
---


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Glass UI</title>
  </head>
  <body>
    <slot />
  </body>
</html>

Configure Path Aliases

Verify that your tsconfig.json includes the paths configuration:

tsconfig.json
1234567
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    },
  },
}

Run the CLI

Run the init command to set up your configuration, base utilities, and global styles.

npx @glass-ui-kit/cli@latest init

Add your first component

You can now start adding glassmorphism components to your project. Let’s add the Card component:

npx @glass-ui-kit/cli@latest add card

Use the component

Replace the contents of your src/pages/index.astro with the following code:

src/pages/index.astro
123456789101112
---
import Layout from "@/layouts/Layout.astro";
import { Card } from "@/components/ui/card";
---


<Layout>
  <div class="min-h-screen flex items-center justify-center">
    <Card className="w-full max-w-md text-center text-xl">
      <h1>Welcome to Glass UI</h1>
    </Card>
  </div>
</Layout>
Vite Manual