Stepwise UI

Pricing Card

A subscription tier card with a gradient price and a tick/dash feature list. Pass highlighted for the recommended-tier treatment - the header inverts to the opposite polarity of the page and the CTA becomes a GlowButton. Either surface style, surface="flat" or surface="framed", works with either tier.

Installation

npx stepwise-ui add pricing-card

Standard - Flat

One uniform surface, and the CTA is a regular slide-icon Button.

Solo

$25/month

Perfect for individuals looking to get started!

  • User Management
  • Analytics Dashboard
  • Automated Reporting
  • Integrations with Third-Party Apps
  • Custom API Development
  • Real-Time Data Syncing
  • User Authentication and Security
import { PricingCard } from '@/components/stepwise/pricing-card'

<PricingCard
  planName="Solo"
  description="Perfect for individuals looking to get started!"
  price={25}
  features={[
    { label: 'User Management' },
    { label: 'Analytics Dashboard' },
    { label: 'Automated Reporting' },
    { label: 'Custom API Development', included: false },
  ]}
/>

Standard - Framed

Same tier, surface="framed" insets the header in its own panel with a thin outer frame.

Solo

$25/month

Perfect for individuals looking to get started!

  • User Management
  • Analytics Dashboard
  • Automated Reporting
  • Integrations with Third-Party Apps
  • Custom API Development
  • Real-Time Data Syncing
  • User Authentication and Security
<PricingCard
  planName="Solo"
  description="Perfect for individuals looking to get started!"
  price={25}
  surface="framed"
  features={[
    { label: 'User Management' },
    { label: 'Analytics Dashboard' },
    { label: 'Automated Reporting' },
    { label: 'Custom API Development', included: false },
  ]}
/>

Props

PropTypeDescription
planName
string
Plan name.
price
number | string
Numeric price, or a string like "Custom".
period
string
Shown after the price. Default "/month".
currency
string
Currency symbol. Default "$".
description
string
One-line plan summary.
features
PricingFeature[]
{ label, included? } - included defaults true; false dashes and mutes it.
ctaLabel
string
CTA button label. Default "Upgrade now".
onCta
() => void
CTA click handler.
highlighted
boolean
The recommended-tier treatment - header inverts, CTA becomes a GlowButton.
surface
"flat" | "framed"
"flat" - one uniform surface (default). "framed" - the header sits in its own inset panel with a thin outer frame.
badge
string
Dot chip next to the plan name, e.g. "Most popular".