Docs·Pricing 004

Pricing 004

List-style pricing cards with accent icon blobs, strikethrough prices, and recommended badges.

Installation

$pnpm dlx shadcn@latest add @spiderui/pricing-004

Requires shadcn button and badge registry items.

Usage

Horizontal plan cards with a gradient accent blob, strikethrough originalPrice, and optional recommended badge. Accent colours: neutral, orange, blue, violet, emerald, rose, yellow.

API Reference

PropTypeDefault
plansPlan objects with features, price strings, CTA, accent colour, and optional recommended badge.
Plan4[]DEFAULT_PLANS_4
titleHeader title above the plan list.
string"Organize without limits"
subtitleSubtitle below the header.
string"Local or cloud — your choice"
classNameClasses on the root container.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

Organize without limits

Local or cloud — your choice

Lifetime

  • All features (non-cloud)
  • Unlimited organization
  • 1-year feature updates
$89$59
Purchase

Pro+

Recommended
  • Cross-sync up to 3 devices
  • Upload to cloud link
  • Share cloud links
  • All feature updates
$8$6/month
Start free trial
import { Pricing004 } from "@/components/ui/pricing-004"
export default function Page() {
  return <Pricing004 />
}