Card

Variants

The full vocabulary across tones in both theme scopes. glinr is the default, plain is the flat shadcn card, solid is a neutral tonal face, glass is opt-in.

import { Card } from "@glinui/ui"
<Card variant="glinr" />
<Card variant="plain" />

import { Card } from "@glinui/ui"


<Card variant="glinr" />
<Card variant="plain" />
<Card variant="solid" />
<Card variant="soft" tone="accent" />
<Card variant="outline" />
<Card variant="ghost" />
<Card variant="gradient" />
<Card variant="glass" />

Glass on a backdrop

Four surfaces over a vivid backdrop. Glass needs a backdrop to read as glass.

import { Card } from "@glinui/ui"
<Card variant="glinr" />
<Card variant="plain" />

import { Card } from "@glinui/ui"


<Card variant="glinr" />
<Card variant="plain" />
<Card variant="solid" />
<Card variant="glass" />

Header and well

`CardHeader variant="strip"` is a raised strip that bleeds to the card edges. `CardContent inset` is a recessed well with the concentric inner radius.

import { Badge, Button, Card, CardContent, CardFooter, CardHeader, CardTitle } from "@glinui/ui"
export function Demo() {
  return (

import { Badge, Button, Card, CardContent, CardFooter, CardHeader, CardTitle } from "@glinui/ui"


export function Demo() {
  return (
    <Card>
      <CardHeader variant="strip" className="flex items-center justify-between">
        <CardTitle>deploy.log</CardTitle>
        <Badge tone="success" variant="soft" dot>Passing</Badge>
      </CardHeader>
      <CardContent inset className="font-mono">$ pnpm build</CardContent>
      <CardFooter><Button size="sm">Redeploy</Button></CardFooter>
    </Card>
  )
}

Interactive

`interactive` adds a hover lift and a pointer cursor. Make the card focusable and keyboard-operable yourself when it acts as a control.

import { Card } from "@glinui/ui"
<Card interactive tabIndex={0}>...</Card>

import { Card } from "@glinui/ui"


<Card interactive tabIndex={0}>...</Card>

In a layout

A metrics card next to a soft accent upsell card.

import { Card } from "@glinui/ui"
<section className="grid gap-4 sm:grid-cols-3">
  <Card className="sm:col-span-2">...</Card>

import { Card } from "@glinui/ui"


<section className="grid gap-4 sm:grid-cols-3">
  <Card className="sm:col-span-2">...</Card>
  <Card variant="soft" tone="accent">...</Card>
</section>

Variants

Use the background toggle (top-right) to test each variant against different surfaces.

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@glinui/ui"

export function CardVariantDemo() {
  return (
    <div className="grid gap-3 md:grid-cols-2">
      <Card variant="glass"><CardHeader><CardTitle>Glass</CardTitle></CardHeader><CardContent>Standard translucent surface with subtle refraction.</CardContent></Card>
      <Card variant="frosted"><CardHeader><CardTitle>Frosted</CardTitle></CardHeader><CardContent>Heavy frost with stronger blur and inner glow.</CardContent></Card>
      <Card variant="liquid"><CardHeader><CardTitle>Liquid</CardTitle></CardHeader><CardContent>Wet-glass effect with radial highlights.</CardContent></Card>
      <Card variant="matte"><CardHeader><CardTitle>Matte</CardTitle></CardHeader><CardContent>Solid opaque surface with soft shadow.</CardContent></Card>
    </div>
  )
}

Frosted on Vivid Background

The frosted variant shines against colorful backgrounds where the blur and inner glow create visible depth.

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@glinui/ui"

export function CardFrostedDemo() {
  return (
    <Card variant="frosted" className="max-w-sm">
      <CardHeader>
        <CardTitle>Analytics</CardTitle>
        <CardDescription>Real-time dashboard metrics.</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="text-3xl font-bold tracking-tight">12,847</div>
        <p className="text-sm text-neutral-600 dark:text-neutral-300">+23% from last week</p>
      </CardContent>
      <CardFooter className="text-xs text-neutral-500">Updated 2 min ago</CardFooter>
    </Card>
  )
}

Lift surface

elevation 1-3, face 0-2 and ring default|hot|brand opt a card into the lift technique. inset renders a recessed well.

import { Card } from "@glinui/ui"

export function Demo() {
  return (
    <div className="grid gap-4 sm:grid-cols-3">
      <Card elevation={1} face={0}>Elevation 1</Card>
      <Card elevation={2} face={1} ring="hot">Hot ring</Card>
      <Card elevation={3} face={2} ring="brand">Brand ring</Card>
      <Card inset>Inset well</Card>
    </div>
  )
}

ARIA Attributes

• Semantic divs
• Heading hierarchy via CardTitle

CardProps

CardHeaderProps

CardTitleProps

CardDescriptionProps

CardContentProps

CardFooterProps