Duck Pricing
A tier grid with a monthly / yearly switch. One tier carries the holo ring; the rest stay quiet.
Preview
Pick a pond.
Every tier ships the same source. The difference is how much of it we look after.
Puddle
For the side project that might become a company.
$0/mo
- All 31 components
- MIT licence
- Community support
Pond
Most popularFor the team shipping every week.
$29/mo
- Everything in Puddle
- Private blocks registry
- Theme presets for your brand
- Priority issues
Lake
For design systems with a headcount.
Talk to us
- Everything in Pond
- Figma kit and tokens sync
- Onboarding workshop
- Shared Slack channel
Installation
One command writes the section and every component it renders.
pnpm dlx shadcn@latest add @duck/duck-pricingThe block lands in components/blocks/duck-pricing.tsx. It builds on sticker-card, holo-button, holo-badge and duck-switch, which the CLI installs alongside it. Already installed items are skipped.
Usage
import { DuckPricing } from "@/components/blocks/duck-pricing"A block is a starting point, not a widget. The props exist so the example renders with real content — once the file is in your project, hard-code what never changes and delete the rest.
Props
Everything not listed here is forwarded to the root element.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | React.ReactNode | - | Section heading. |
| description | React.ReactNode | - | Line under the heading. |
| tiers | DuckPricingTier[] | - | name, description, monthly, yearly, features, action, featured, badge. A price can be a number, formatted with the currency, or a string printed as given. |
| currency | string | "$" | Prefix for numeric prices. |
| billingSwitch | boolean | any tier prices a year | Show the monthly / yearly switch. |
| yearlyNote | string | - | Small line under the switch, for example "2 months free". |
| yearly | boolean | - | Controlled billing period. Omit to let the block own the state. |
| onYearlyChange | (yearly: boolean) => void | - | Fires on every switch change, controlled or not. |
Rules
What keeps this section from turning into noise.
- Exactly one tier is featured. Two holo rings side by side cancel each other out.
- The featured tier's button stays lime. An iridescent button inside an iridescent border reads as a rendering bug.
- A yearly price is per month, billed yearly — that is what the label says. Pass the annual total and the row lies.