# Glass card (goodtabs UI)

A 12px card of glass with a title and a line of text, bending the image behind it.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/glass-card.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/glass-card`

## Usage

```tsx
import { GlassCard, GlassCardTitle, GlassCardDescription } from "@/components/ui/glass-card"

<GlassCard>
  <GlassCardTitle>Design tokens</GlassCardTitle>
  <GlassCardDescription>Colors, type and spacing.</GlassCardDescription>
</GlassCard>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| className | `string` |  | Merged onto the glass surface. Keep any rounded class equal to radius 12. |

## When to use

- Small facts on top of a photo or a hero
- A feature row over an image background

## When not to use

- On a flat background, where there is nothing to bend
- For long text; glass lowers contrast the more it shows through

## Notes for agents

- Glass needs something behind it: it bends and frosts what sits under it, so on a flat background it reads as a grey box
- Built on GlassSurface: Chromium refracts the rim, other browsers get a frosted card. It turns solid under reduced transparency
- Text is foreground on a 60 percent background fill; check it over the brightest part of your image

Docs: https://ui.goodtabs.co/components/glass-card