Glass Card

Installation$

pnpm dlx @glinui/cli@latest add glass-card

Usage$

GlassCard is a compound component with GlassCardHeader, GlassCardContent, and GlassCardFooter subcomponents. Place it over a colorful background to see the glass effect.

Glass is this component's identity, so it is the default here. It uses a readable opacity floor (--glass-readable) and still needs a colorful backdrop to look its best.

Examples$

Variants$

glinr is the default, plain is the flat shadcn look, solid is a neutral tonal face and glass is opt-in. Glass needs a backdrop, so the set below sits on a vivid one.

import { GlassCard } from "@glinui/ui"
// Omit variant to follow the ambient style (glinr by default).
export function GlassCardVariants() {

import { GlassCard } from "@glinui/ui"


// Omit variant to follow the ambient style (glinr by default).
export function GlassCardVariants() {
return (
  <>
    <GlassCard variant="glinr">
      ...
    </GlassCard>
    <GlassCard variant="plain">
      ...
    </GlassCard>
    <GlassCard variant="solid">
      ...
    </GlassCard>
    <GlassCard variant="glass">
      ...
    </GlassCard>
  </>
)
}

Colors$

Pass another variant plus tone to leave glass behind: variant="soft" tone="success".

import { GlassCard } from "@glinui/ui"
export function GlassCardTones() {
return (

import { GlassCard } from "@glinui/ui"


export function GlassCardTones() {
return (
  <GlassCard variant="soft" tone="success">
    ...
  </GlassCard>
)
}

In a layout$

Glass cards as metric tiles in a dashboard row (shown here on the page surface, so they collapse to readable panels).

// Glass cards as metric tiles in a dashboard row (shown here on the page surface, so they collapse to readable panels).
import { GlassCard } from "@glinui/ui"
export function GlassCardLayout() {

// Glass cards as metric tiles in a dashboard row (shown here on the page surface, so they collapse to readable panels).
import { GlassCard } from "@glinui/ui"


export function GlassCardLayout() {
return (
  <section className="grid gap-4 sm:grid-cols-3">
    ...
  </section>
)
}

Accessibility$

• GlassCard renders a <div>, add semantic structure inside (headings, paragraphs).
• Ensure text contrast meets WCAG AA 4.5:1 on glass surfaces.

Reduced Motion$

Hover elevation transitions respect prefers-reduced-motion and disable transform changes.

API Reference$

GlassCard$

GlassCardHeader / GlassCardContent / GlassCardFooter$

Source$

import { GlassCard, GlassCardHeader, GlassCardContent, GlassCardFooter } from "@glinui/ui"