# 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 (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/pricing-card
```

Import: `import { CruisePricingCard } from "@/components/cruise/pricing-card";`

## When to use

Showing 2–4 plans side by side.

## When not to

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

## Example (React)

```tsx
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>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<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>
```

## 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.