Premium & Brand

Glass Card

Server Component

Frosted-glass surface.

Import

tsx

import { GlassCard } from "@cronus-ui/ui";

bash

npx cronus-ui add glass-card

Examples

Frosted surface

A frosted-glass panel over a quiet inset field — the backdrop-blur needs something behind it, not a rainbow.

Premium by default

Frosted blur ships out of the box — sit it on a surface, not a Midjourney wash.

tsx

<div className="relative overflow-hidden rounded-2xl border border-border bg-surface-inset">
  <div className="relative p-6">
    <GlassCard className="flex flex-col gap-3 p-5">
      <span className="grid size-9 place-items-center rounded-lg bg-surface-overlay text-fg">
        <Sparkles className="size-4" aria-hidden="true" />
      </span>
      <h3 className="font-display text-base font-semibold text-fg">Premium by default</h3>
      <p className="text-sm text-fg-secondary">
        Frosted blur ships out of the box — sit it on a surface, not a Midjourney wash.
      </p>
    </GlassCard>
  </div>
</div>