Card Blocks

Pricing, profile, and product cards — self-contained surfaces built on shadcn primitives, ready to drop into a page.

Framed Pricing Card

Pro

A tight double-border frame — a faint outer ring with a thin gap before the real card border, a gradient 'Most popular' badge floating right in that gap. The whole card lifts on hover, a monthly/yearly Switch crossfades the price instead of just swapping it, and the feature list checks itself in with a staggered entrance.

pnpm dlx shadcn@latest add @ditherui/framed-pricing-card

Pro

For growing teams that need more power.

YearlySave 20%

$29/month

Unlimited projects
Advanced analytics
Priority support
Custom integrations
Team collaboration

Props

PropTypeDefault

className / ...div propsReact.ComponentProps<"div">—

Suggested components

January 1970
MeetingDesignPersonalDeadline
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Calendar BlocksEvent calendars with color-coded entries.
No projects yet
Projects you create will show up here. Start with a blank one or import from a template.
Empty State BlocksFriendly empty states with a clear next step.
Clipwise
Features
Pricing
Changelog
Docs
Your clipboard,with a memory.
Clipwise keeps everything you copysearchable from your menu bar. Press ⌘⇧Vto paste anything from the last 90 days.
Free 14-day trial · Requires macOS 13 or later
Hero BlocksLanding hero sections with motion built in.

Card Blocks

Framed Pricing Card

Pro

Props

Suggested components

No projects yet

Your clipboard,with a memory.