Premium & Brand

Glass Card

Frosted-glass surface.

Import

tsx

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

bash

npx cooud-ui add glass-card

Examples

Frosted surface

A frosted-glass panel floating over a colorful backdrop — the backdrop-blur is what reveals the depth, so always give it something vivid to sit on.

Premium by default

Aurora gradients and frosted blur ship out of the box — no design debt to pay down.

tsx

<div className="relative overflow-hidden rounded-2xl">
  <AuroraBackground className="absolute inset-0" />
  <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-gradient-primary text-primary-foreground shadow-glow">
        <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">
        Aurora gradients and frosted blur ship out of the box — no design debt to pay down.
      </p>
    </GlassCard>
  </div>
</div>