Layered tab

Two pricing cards with a blue tab subscribe button.

Usage

import { LayeredTabPricing } from '@/components/blocks/pricing-card-03'


<LayeredTabPricing />


// Your own plans
<LayeredTabPricing
  plans={[
    {
      name: 'Starter',
      badge: 'Popular',
      price: '$12',
      period: '/ month',
      subtitle: 'Everything you need to get going',
      featured: true,
      features: [
        { title: 'Unlimited projects', description: 'Create as many projects as you like' },
        { title: 'Email support', description: 'Replies within one business day' },
      ],
      idealFor: 'Solo makers shipping their first product.',
      cta: { label: 'Subscribe', href: '/signup?plan=starter' },
    },
  ]}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/pricing-card-03

npx shadcn@latest add @pastaui-pro/pricing-card-03

yarn dlx shadcn@latest add @pastaui-pro/pricing-card-03

bunx --bun shadcn@latest add @pastaui-pro/pricing-card-03

Source

Props

Layered tab props
Prop	Type	Default	Description
plans	LayeredTabPlan[]	= Echolark Creator and Network plans	Each plan has a name, optional badge, price, period, subtitle, features ({ title, description }), idealFor note, featured flag and cta ({ label, href, onSelect }). Without an href but with onSelect, the tab renders as a button.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* theme variables such as --pp-tab and --pp-tab-featured.