Card | Glass UI

Welcome back

Enter your credentials to access your account.

Installation

npx @glass-ui-kit/cli add card

Usage

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

export default function App() {
  return (
    <Card variant="soft" padding="sm">
      <h3 className="text-lg font-medium">Card Title</h3>
      <p className="text-sm text-muted-foreground mt-2">
        This card uses the soft surface and compact padding.
      </p>
    </Card>
  )
}

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

export default function App() {
  return (
    <Card variant="soft" padding="sm">
      <h3 className="text-lg font-medium">Card Title</h3>
      <p className="text-sm text-muted-foreground mt-2">
        This card uses the soft surface and compact padding.
      </p>
    </Card>
  )
}

Examples

Default

The default card uses variant="default" and padding="md", giving you the standard glass surface with comfortable spacing.

Documind Workspace

12 Active Users

+2 joined in the last 7 days

Glass Soft

Use variant="soft" when the card should sit a little quieter in the hierarchy.

Repository

Connected to main branch

Glass Strong

Use variant="strong" when the card should feel more prominent over busy backgrounds.

Unlock Analytics

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

Interactive

Use asChild when the whole card should become a semantic link or button while keeping the card styling.

glass-ui

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

TypeScriptUpdated 2h ago

Composition

Card stays layout-agnostic. It gives you a glass surface, spacing, and rounded corners, then gets out of the way.

<Card asChild padding="lg" className="space-y-4 hover:shadow-glass-md">
<a href="/projects/glass-ui">
  <div>
    <h3 className="text-lg font-medium">Title</h3>
    <p className="text-sm text-muted-foreground">
      Description
    </p>
  </div>

  <Button variant="soft">Action</Button>

</a>
</Card>

<Card className="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>

<Card asChild padding="lg" className="space-y-4 hover:shadow-glass-md">
<a href="/projects/glass-ui">
  <div>
    <h3 className="text-lg font-medium">Title</h3>
    <p className="text-sm text-muted-foreground">
      Description
    </p>
  </div>

  <Button variant="soft">Action</Button>

</a>
</Card>

<Card className="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

Card exposes a small prop-first API and still keeps className as the escape hatch for layout and one-off styling.

/* Variants */
<Card variant="default" />
<Card variant="soft" />
<Card variant="strong" />

/* Padding (defaults to md) */
<Card padding="none" />
<Card padding="sm" />
<Card padding="md" />
<Card padding="lg" />

/* asChild */
<Card asChild>
  <a href="/docs">Link</a>
</Card>

/* Escape hatch */
<Card className="max-w-md gap-4" />

/* Variants */
<Card variant="default" />
<Card variant="soft" />
<Card variant="strong" />

/* Padding (defaults to md) */
<Card padding="none" />
<Card padding="sm" />
<Card padding="md" />
<Card padding="lg" />

/* asChild */
<Card asChild>
  <a href="/docs">Link</a>
</Card>

/* Escape hatch */
<Card className="max-w-md gap-4" />

API Reference

Prop	Type
`variant`	`"default" \| "soft" \| "strong"`
`padding`	`"none" \| "sm" \| "md" \| "lg"`
`asChild`	`boolean`
`className`	`string`

Card also accepts standard div props like id, role, aria-*, and event handlers.