Cards

Pricing Tier Card

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

pricingtiersaas

Installation

Copy and paste the code into your project.

Accessibility notes

Use semantic text for price and plan details so the tier is understandable without visuals.

Creator kit

$0open source

20 components
Copy source
MIT-free remix

Preview accent

TypeScript

const perks = ["20 components", "Copy source", "MIT-free remix"];

export function PricingTierCard() {
  return (
    <section className="w-full max-w-xs rounded-lg border border-[#40E0D0]/22 bg-white/[0.06] p-5 backdrop-blur">
      <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#40E0D0]">Creator kit</p>
      <div className="mt-3 flex items-end gap-2">
        <span className="text-4xl font-black text-white">$0</span>
        <span className="pb-1 text-sm text-slate-400">open source</span>
      </div>
      <ul className="mt-4 space-y-2 text-sm text-slate-300">
        {perks.map((perk) => (
          <li key={perk} className="flex items-center gap-2">
            <span className="h-1.5 w-1.5 rounded-full bg-[#40E0D0]" />
            {perk}
          </li>
        ))}
      </ul>
    </section>
  );
}

Usage

<PricingTierCard />

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

component.tsx

<Button glow>
  Ship it
</Button>

Cards

Copy Code Card

Beginner

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

codecopysnippet

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