Next.js

Create a new project

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

We recommend accepting the default prompts so Next.js automatically configures Tailwind CSS, the App Router, and the @/* import alias for you.

If you prefer a src/ directory, add the --src-dir flag:

Verify Configuration

If you created your project using the recommended defaults above, you can safely skip this step.

For existing or custom Next.js setups, ensure you have Tailwind CSS configured first. Then, verify that your tsconfig.json includes the @/* path alias:

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

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

If your project uses a src/ directory, make sure the alias points to ["./src/*"] instead.

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

Replace the contents of your app/page.tsx with the following code to see Glass UI in action:

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

export default function Home() {
  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>
  )
}

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

export default function Home() {
  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>
  )
}

If you are using a src/ directory, the file will be located at src/app/page.tsx instead.