Website / Cards

PricingCard

Presents one pricing plan.

Live example

Recommended

Studio

$24 / month

For teams shipping polished websites.

Interactive preview using local sample data. Styling is intentionally left to the consuming project.

Usage

// PricingCard usage will be documented here.

Adopt to your project

This Website → Cards → PricingCard component provides a neutral structural starting point. Adapt local visual presentation through documented props and className without changing its semantic purpose.

Accessibility

Do not communicate the recommended plan through color alone.

API reference

API focus
Plan, price, billing period, features, recommended state, CTA.

The preview uses safe local sample data. Check the exported TypeScript types before adapting it to project data.

Installation

Full library
pnpm install:project /absolute/path/to/your-project

Planned guided selection
Website → Cards → PricingCard