Skip to Content

pricing-card

ui

A pricing tier card with plan name, price, feature list, CTA button, and optional highlight badge.

Use cases

  • Subscription plan display
  • Feature comparison
  • Product tier selection
  • Marketplace listing pricing

Features

  • Plan name, price, period, and description
  • Feature checklist with malachite checkmarks
  • Highlighted/recommended variant with border and shadow
  • Optional badge (e.g., 'Most Popular')
  • CTA button with onClick or href
  • Composes Card, Badge, Button, Separator primitives

Preview

Interactive preview with light/dark mode toggle. Switch to Code tab to view the full source.

Starter

Free

  • ✓ 5 components
  • ✓ Community support
Popular

Pro

$29/mo

  • ✓ All components
  • ✓ Priority support

Installation

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/pricing-card

Dependencies

lucide-reactbadgebuttoncardseparator

API

Fetch this component's metadata and source code from the registry API.

GET/api/v1/ui/pricing-card

Source

components/ui/pricing-card.tsx