Docs·Pricing 006

Pricing 006

Split two-plan pricing with header label, icon feature rows, and a most-popular badge.

Installation

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

Requires shadcn button registry item.

Usage

Two-column split pricing with a header label, per-plan title and price rows, icon feature lists, and shadcn buttons — secondary on the left plan, default on the right. Set featured and featuredLabel on the right plan to show the "Most popular" badge.

API Reference

PropTypeDefault
plansTwo plan objects with name, price, icon features, CTA, and optional featured badge.
Plan6[]DEFAULT_PLANS_6
titleHeader label above the split plan grid.
string"Start free. Scale confidently."
classNameClasses on the root section.
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

Start free. Scale confidently.

Open Source

0$/forever
  • Self-host on your own infrastructure
  • Full access to the Scalar CMS core
  • GitHub community support
  • Ideal for developers and internal tools
View on GitHub
Most popular

Cloud

From $29/month
  • Fully managed infrastructure
  • Realtime collaboration & autosave
  • Role-based access & team permissions
  • Built-in CDN for media delivery
  • Email support & usage analytics
Start Free Trial
import { Pricing006 } from "@/components/ui/pricing-006"
export default function Page() {
  return <Pricing006 />
}