Vite

Create a new project

Start by creating a new React project using Vite and TypeScript. If you already have a project, you can skip this step.

Install Tailwind CSS

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

Configure Vite Plugin

Add the Tailwind CSS plugin to your vite.config.ts file:

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import tailwindcss from "@tailwindcss/vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import tailwindcss from "@tailwindcss/vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

Import Tailwind CSS

Replace the contents of your src/index.css with the Tailwind import directive:

@import "tailwindcss";

@import "tailwindcss";

Configure Path Aliases

Glass UI requires the @/ path alias for absolute imports. If your project already has this configured, you can skip this step.

First, install Node types to use the path module:

Update vite.config.ts

Add the resolve alias to your Vite configuration:

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import tailwindcss from "@tailwindcss/vite"
import path from "path"

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import tailwindcss from "@tailwindcss/vite"
import path from "path"

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

Update tsconfig.app.json

Vite uses multiple tsconfig files. Add the paths configuration to your tsconfig.app.json (or tsconfig.json if you are on an older Vite version):

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    },
    // ... other options
  }
}

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    },
    // ... other options
  }
}

Run the CLI

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

Add your first component

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

Use the component

Clear your src/App.tsx and replace it with the following code to see Glass UI in action:

import { Card } from "@/components/ui/card"

function App() {
  return (
    <div className="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>
  )
}

export default App

import { Card } from "@/components/ui/card"

function App() {
  return (
    <div className="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>
  )
}

export default App