Pricing card

Pricing card is a neobrutalist React component from Cruise UI. A plan card with name, price, features and an action; the featured one is --primary. Install it with npx shadcn@latest add @cruiseui/pricing-card.

Install

Terminal

npx shadcn@latest add @cruiseui/pricing-card

First time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.

Example

Corners

Okada

₦0/month

  • 1 wallet
  • 10 transfers a month
Most popular

Danfo

₦2,500/month

  • 5 wallets
  • Unlimited transfers

When to use it

When to use

Showing 2–4 plans side by side.

When not to

A single price (use plain text or a Card).

Props

CruisePricingCard

PropTypeDefaultDescription
planstring——
pricestring——
period?string—e.g. "/month"
featuresstring[]——
action?ReactNode—CTA Button. When featured, use the "inverted" variant.
featured?boolean—Primary background + rotated "Most popular" badge.
className?string——

Accessibility

  • Plan name is a heading; prices are text in --ink.
  • The featured plan says so in words (a badge), not only colour.