Blocks
Pricing Block
A three-tier pricing grid built from Card, Badge, Button, Separator, and RoughHighlight.
Pricing
Simple, honest pricing
Free
$0/ forever
Great for personal projects and tinkering.
- *5 components
- *Pencil theme only
- *Community support
- *MIT license
Most popular
Pro
$12/ per month
Everything you need to ship polished products.
- *All 40+ components
- *3 sketch themes
- *Priority support
- *Early access
Team
$39/ per month
For teams that move fast and build together.
- *Everything in Pro
- *Up to 10 seats
- *Private Slack channel
- *Custom theme generator
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/pricing.jsonProps
PropTypeDefaultDescription
eyebrowstring—
Small label above the heading.
headingstring—
Heading text before the highlight.
headingHighlightstring—
Highlighted word in the heading.
highlightColorstring—
Highlight accent color.
onSelect(tier: PricingTier) => void—
Callback fired when a tier is selected.
tiersPricingTier[]—
Pricing tiers rendered by the block.
Accessibility
This block is composed from accessible byDefaultHuman components. Preserve visible labels, button text, and supporting copy when adapting it so the layout remains understandable without the visual styling.
Examples
import { PricingCardBlock } from "@/components/block/PricingCardBlock";
<PricingCardBlock />;