Block · CLI

Pricing Tiers

Monthly/yearly pricing tiers with one highlighted plan. Install as @atroui/pricing-tiers.

Preview

npx shadcn@latest add @atroui/pricing-tiers

Pricing

Start free, upgrade when it pays for itself. Prices in USD.

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/pricing-tiers

Source lands in your repo. Installation · Registry

Use as the pricing section. After install, edit CONTENT and TIERS at the top of the file — monthly/yearly toggle included, one tier highlighted.

tsx

import { PricingTiers } from "@/components/blocks/pricing-tiers"

export function Example() {
  return <PricingTiers />
}

Block · CLI

Monthly/yearly pricing tiers with one highlighted plan. Install as @atroui/pricing-tiers.

npx shadcn@latest add @atroui/pricing-tiers

Pricing

Start free, upgrade when it pays for itself. Prices in USD.

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/pricing-tiers

Source lands in your repo. Installation · Registry

Use as the pricing section. After install, edit CONTENT and TIERS at the top of the file — monthly/yearly toggle included, one tier highlighted.

tsx

import { PricingTiers } from "@/components/blocks/pricing-tiers"

export function Example() {
  return <PricingTiers />
}

import { PricingTiers } from "@/components/blocks/pricing-tiers"

export function Example() {
  return <PricingTiers />
}