# Pricing Section

> A complete pricing table: a sliding monthly/yearly switch, prices that roll to their new digits and a featured plan with an orbiting light.

Category: Sections · MotionKit Plus · Updated 2026-10-21 · Live demo: https://motionkitui.com/components/pricing-section

## When to use it

The pricing page of a SaaS product, an app or a course, or a pricing block on a landing page, anywhere monthly and yearly plans sit side by side.

## How it works

The billing switch is a radio group whose highlight shares a Motion layoutId, so it slides between Monthly and Yearly. Every price is split into digits, each a window onto a 0 to 9 wheel that springs to its new value, with higher places turning a touch later. The saving badge is worked out from your prices. The featured plan sits inside a 1px gap with a slowly turning conic gradient behind it, so a light orbits its border.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/pricing-section` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `plans` | `PricingPlan[]` |  | Each plan's name, monthly and yearly price, features, button and whether it is featured. |
| `currency` | `string` | `"£"` | Symbol shown before every price. |
| `defaultBilling` | `"monthly" \| "yearly"` | `"monthly"` | Which period is selected first. |
| `accent` | `string` | `"#5FAEB4"` | Colour of the switch, the featured border and the ticks. |

## Accessibility

- **Keyboard: Pass.** The billing switch is a radio group: Tab reaches it, the arrow keys change the period. Every button and link has a visible focus ring.
- **Screen readers: Pass.** Each price is read once as "£12 per month"; the rolling digits are hidden. The per-month note for yearly plans is announced when it changes.
- **Reduced motion: Pass.** With reduced motion on, prices change instantly, cards don't rise in and the border light is a still outline.
- **Colour contrast: Pass.** Ivory on the card measures 15.5:1, muted text 7.1:1, and the dark label on the teal button 7.5:1.