Cards

Copy Code Card

A compact code surface for snippets, component recipes, and copy actions.

codecopysnippet

Installation

Copy and paste the code into your project.

Accessibility notes

Wire the copy action to visible feedback after copying.

component.tsx

<Button glow>
  Ship it
</Button>

Preview accent

TypeScript

export function CopyCodeCard() {
  return (
    <div className="w-full max-w-sm rounded-lg border border-white/12 bg-[#0b0f14]/90">
      <div className="flex items-center justify-between border-b border-white/10 px-4 py-3">
        <span className="text-xs text-slate-400">component.tsx</span>
        <button className="rounded-full bg-white/10 px-3 py-1 text-xs text-white">Copy</button>
      </div>
      <pre className="overflow-hidden p-4 text-xs leading-5 text-[#d8fffb]">{`<Button glow>\n  Ship it\n</Button>`}</pre>
    </div>
  );
}

Usage

<CopyCodeCard />

Related components

Command palette

⌘K

Generate dashboard layout

3 actions ready · 1 agent online

Cards

Glass Command Card

Beginner

A glassmorphism command card for product shortcuts, palettes, and agent actions.

glasscommandshortcut

View component

Eval score

94.8%+6.2

Cards

Glass Metric Card

Beginner

A compact KPI card with a progress rail for evals, usage, and model quality signals.

metricdashboardglass

View component

Creator kit

$0open source

20 components
Copy source
MIT-free remix

Cards

Pricing Tier Card

Beginner

A small pricing card for open-source tiers, creator plans, and product packaging.

pricingtiersaas

View component