feat(component): PlanBadge — Subscription Tier Indicator

[bntvllnt]

Summary

Compact, pill-shaped subscription tier badge for headers and navigation bars. Shows the user's current plan (Free, Pro, Enterprise) with visual state encoding for active, trialing, and canceling states. Designed for persistent display in app chrome.

Proposed API

<PlanBadge
  plan="pro"
  status="active"
  icon={Crown}
  href="/account/billing"
/>

<PlanBadge
  plan="pro"
  status="canceling"
  cancelDate="2025-04-15"
  href="/account/billing"
/>

<PlanBadge
  plan="enterprise"
  status="trialing"
  trialEndsAt="2025-03-20"
/>

Requirements

• Plan variants: free, pro, enterprise (extensible via string union)
• Status states: active (green), trialing (blue), canceling (yellow), expired (gray)
• Canceling state appends "(Ending)" suffix
• Trial state shows remaining days on hover
• Optional href — renders as link when provided, span otherwise
• Optional custom icon (defaults per plan tier)
• Compact pill layout: icon + label, rounded-full
• Tooltip with detailed status on hover
• Dark mode: semi-transparent backgrounds with matching border
• Accessible: meaningful title/aria-label with full status context

Visual States

┌──────────────────────────────────────────────────┐
│  Active:     [👑 Pro]         green pill          │
│  Trialing:   [👑 Pro]         blue pill           │
│  Canceling:  [👑 Pro (Ending)] yellow pill        │
│  Expired:    [👑 Pro]         gray pill           │
└──────────────────────────────────────────────────┘

Use Cases

• SaaS app header showing current subscription tier
• Dashboard navigation bar plan indicator
• Settings page subscription quick-glance
• Admin panel user tier display

Composes

• Badge (base styling)
• Lucide icons

Origin

Extracted from apps/web-ai-os/components/billing/SubscriptionBadge.tsx in vllnt/vllnt monorepo.