Pricing Card

Price, period, a feature list and a CTA, with an opt-in highlighted/recommended state.

cards
card
structural
pricing
commerce

Recommended

Studio

$24/mo

Unlimited projects
Priority support

Choose plan

Quick usage

usage

import { PricingCard } from "@pinky-ui/components";

<PricingCard
  name="Studio"
  price="$24"
  period="/mo"
  features={["Unlimited projects", "Priority support"]}
  footer={<PrimaryButton>Choose plan</PrimaryButton>}
  highlight
/>

Presets

Default

Standard tier.

Highlighted

The recommended tier in a pricing row.

highlight={true}

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell

npm install @pinky-ui/components

shell

pnpm add @pinky-ui/components

shell

yarn add @pinky-ui/components

shell — copies source into your project

npx pinky-ui add pricing-card

Prefer to run the whole repository locally instead?

repository

git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

Prop	Type	Default	Description
name	ReactNode	—	Required.
price	ReactNode	—	Required.
period	ReactNode	—	e.g. "/mo" — rendered right after price.
description	ReactNode	—	Optional.
features	ReactNode[]	—	Optional. Rendered as a checkmarked list.
footer	ReactNode	—	The CTA region — usually a button.
highlight	boolean	false	The recommended-plan treatment: a soft-pink surface and badge. Reuses the family's pink accent, no new hue.
radius	"md" \| "lg" \| "xl" \| "2xl"	"xl"	Corner radius from the shape scale.
padded	boolean	true	Inner content padding.
shadow	"neutral" \| "pink"	"neutral"	Shadow token pair. Ignored when highlight is true (highlight always uses the pink pair).
as	ElementType	"div"	Pass Link from next/link to make the whole card navigable.
href	string	—	Only meaningful when as renders an anchor.
onClick	() => void	—	Makes the card a click target; adds the focus-visible ring automatically.

Accessibility

A plain <div> unless onClick/href is passed — then it's a real focusable, clickable surface with a focus-visible ring equivalent to its hover state.
The "Recommended" badge is real text, not a colour swatch, so it survives without the pink accent too.

Reduced motion

The only motion is the hover shadow transition, which is a colour/opacity change, not a transform — nothing to disable under prefers-reduced-motion: reduce.

When to use

Pricing tables, plan comparisons

When not to use

A single plan with no comparison context — Basic Card is simpler