Docs·Pricing 002

Pricing 002

Three-column pricing with a gradient-bordered featured card and illustrated cursor decoration.

Installation

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

Requires the shadcn button registry item. CTAs use native <a> tags with Button asChild — swap for <Link> in Next.js if you prefer client navigation.

Usage

API Reference

PropTypeDefault
plansPlan objects with price, features, CTA link, optional footnote, and featured flag.
Plan2[]DEFAULT_PLANS_2
classNameClasses on the grid 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
Starter
Free Forever
Launch your product with essential tools and credits for lean teams.
  • 100 resume analysis credits
  • 3 AI interview credits*
  • AI scoring and recommendations
  • Team dashboards and heatmaps
  • Email support
*one-time usage only
Get Started
Most Popular
Pro
$99 / month
Scale automation with deeper analytics, ATS workflows, and compliance reports.
  • Everything in Starter
  • 200 AI interview credits monthly
  • Anti-fraud compliance reports
  • Executive-ready hiring summaries
  • Increased job posting limits
Get Started
Enterprise
Custom
For global organizations requiring white-label controls, security reviews, and dedicated pods.
  • Everything in Pro
  • Billing based AI interview credits
  • White-label candidate experience
  • Custom security and compliance reviews
  • Dedicated support manager
Contact Sales
import { Pricing002 } from "@/components/ui/pricing-002"
export default function Page() {
  return <Pricing002 />
}