Glass UI

Card

A glassmorphism container used to group and display content in a clear, structured, and visually appealing way.

Welcome back

Enter your credentials to access your account.

Forgot password?

Installation

npx @glass-ui-kit/cli add card

Usage

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


export default function App() {
  return (
    <Card>
      <h3 className="text-lg font-medium">Card Title</h3>
      <p className="text-sm text-muted-foreground mt-2">
        This is the card content. The card automatically applies glassmorphism, padding, and rounded corners.
      </p>
    </Card>
  )
}

Examples

Default

The standard card automatically applies the base .glass class, providing a balanced backdrop blur and subtle border.

Documind Workspace

12 Active Users

+2 joined in the last 7 days

Glass Soft

By adding the glass-soft class, the card becomes more transparent. This is ideal for secondary content or when nesting cards within other glassmorphism containers.

Repository

Connected to main branch

Glass Strong

The glass-strong class increases the background opacity and blur. Use this when the card needs to stand out as a primary focal point over busy backgrounds.

Unlock Analytics

Upgrade to the Pro plan to access advanced metrics, custom reporting, and priority support.

Interactive

Since the styling is controlled via utility classes, you can easily compose Tailwind CSS hover and transition utilities to make the card interactive.

glass-ui

Main design system monorepo. Contains CLI, React components, and Astro documentation.

TypeScriptUpdated 2h ago

Composition

The Card component is designed to be completely agnostic. It does not define a strict internal layout nor does it rely on subcomponents.

You have full control to build the interface using Tailwind CSS utilities, ensuring maximum flexibility.

<Card className="glass p-6 space-y-4">
<div>
  <h3 className="text-lg font-medium">Title</h3>
  <p className="text-sm text-muted-foreground">
    Description
  </p>
</div>


<Button>Action</Button>
</Card>

Styling

The Card component acts as a flexible wrapper. It inherently includes the glass class. To change its visual intensity, simply append your preferred preset class.

<Card> ... </Card>


<Card className="glass-soft"> ... </Card>


<Card className="glass-strong"> ... </Card>
Button Checkbox