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-cardFirst 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
import { CruiseButton } from "@/components/cruise/button";
import { CruisePricingCard } from "@/components/cruise/pricing-card";
export default function PricingCardExample() {
return (
<div className="grid gap-8 pt-4 md:grid-cols-2">
<CruisePricingCard
plan="Okada"
price="₦0"
period="/month"
features={["1 wallet", "10 transfers a month"]}
action={<CruiseButton variant="secondary">Get started</CruiseButton>}
/>
<CruisePricingCard
featured
plan="Danfo"
price="₦2,500"
period="/month"
features={["5 wallets", "Unlimited transfers"]}
action={<CruiseButton variant="inverted">Get started</CruiseButton>}
/>
</div>
);
}
<article class="brutal on-primary" style="padding: 24px">
<span class="badge">Most popular</span>
<h3>Danfo</h3>
<p style="font: 800 3rem/1 var(--font-display)">₦2,500<small>/month</small></p>
<ul><li>5 wallets</li><li>Unlimited transfers</li></ul>
<a class="brutal btn btn-invert" href="#">Get started</a>
</article>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
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
| Prop | Type | Default | Description |
|---|---|---|---|
plan | string | — | — |
price | string | — | — |
period? | string | — | e.g. "/month" |
features | string[] | — | — |
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.