║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Pricing Table Six description: The Pricing Table Six component provides a modern gradient design for displaying pricing plans. This component features beautiful gradients, smooth animations, and a contemporary card-based layout.

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none"> <Tab value="Preview" className="border-none bg-transparent p-0 mt-3"> <PreviewComponents registryName="pricing-table-six"> <PricingTableSixDemo /> </PreviewComponents> </Tab>

<Tab value="Code" className="mt-3"> <include cwd lang="tsx" meta='title="src/components/pricing-table-six-demo.tsx"'>src/components/pricing-table-six-demo.tsx</include> </Tab> </Tabs>

Installation

<Tabs items={['shadcn', 'billingSDK']} defaultValue="shadcn" className="bg-transparent border-none"> <Tab value="shadcn" className="border-none bg-transparent p-0 mt-3"> <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="installation-tabs"> <Tab value="npx"> bash npx shadcn@latest add @billingsdk/pricing-table-six </Tab> <Tab value="pnpm"> bash pnpm dlx shadcn@latest add @billingsdk/pricing-table-six </Tab> <Tab value="yarn"> bash yarn dlx shadcn@latest add @billingsdk/pricing-table-six </Tab> <Tab value="bun"> bash bunx shadcn@latest add @billingsdk/pricing-table-six </Tab> </Tabs> </Tab> <Tab value="billingSDK" className="border-none bg-transparent p-0 mt-3"> <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="billingsdk-cli-tabs"> <Tab value="npx"> bash npx @billingsdk/cli add pricing-table-six </Tab> <Tab value="pnpm"> bash pnpm dlx @billingsdk/cli add pricing-table-six </Tab> <Tab value="yarn"> bash yarn dlx @billingsdk/cli add pricing-table-six </Tab> <Tab value="bun"> bash bunx @billingsdk/cli add pricing-table-six </Tab> </Tabs> </Tab> </Tabs>

Usage

import { PricingTableSix } from "@/components/billingsdk/pricing-table-six";
import { PlanProps } from "@/registry/billingsdk/pricing-table-six";
import { plans } from "@/lib/billingsdk-config";

const plans: PlanProps[] = [
        {
          id: "basic",
          title: "Starter",
          description: "Best for individuals and small teams",
          monthlyPrice: 0,
          yearlyPrice: 0,
          features: [
            "Core tools with modest usage allowances",
            "Getting-started guides to launch quickly",
            "Fundamental analytics and reports",
            "Standard email assistance",
          ]
        },
        {
          id: "premium",
          title: "Growth",
          description: "Built for expanding teams",
          monthlyPrice: 50,
          yearlyPrice: 500,
          isFeatured: true,
          features: [
            "Advanced tools with priority updates",
            "Onboarding guides to ramp fast",
            "Live chat support access",
            "Automation to streamline workflows",
            "Premium tutorials and webinars access",
          ]
        },
        {
          id: "custom",
          title: "Enterprise",
          description: "Tailored for specialized requirements",
          monthlyPrice: 99,
          yearlyPrice: 990,
          isCustom: true,
          features: [
            "Unlimited users, projects, and data",
            "Resources that scale with your needs",
            "24/7 priority support",
            "White-label reports, dashboards, and UIs",
            "Support for custom API integrations",
            "Works with advanced or proprietary systems",
          ]
        },
      ]

  <PricingTableSix 
    plans={plans}
    onPlanSelect={(planId) => console.log('Selected plan:', planId)}
  />

Props

| Prop | Type | Description | |------|------|-------------| | plans | PlanProps[] | Array of pricing plans | | onPlanSelect | (planId: string) => void | Callback when a plan is selected |

Features

• Responsive Layout: Grid layout that adapts cleanly across breakpoints
• Interactive Elements: Subtle hover effects and smooth transitions
• Billing Toggle: Monthly/yearly switch with animated price changes
• Highlight Support: Distinct styling for featured or popular plans
• Theming & Tokens: Easily themeable with Tailwind and shadcn/ui primitives

Theming

The pricing table component is styled using the shadcn/ui library. You can customize the colors and fonts by overriding the CSS variables. You can also get the theme from the Theming page.

Example

<include cwd lang="tsx" meta='title="src/components/pricing-table-six-demo.tsx"'>src/components/pricing-table-six-demo.tsx</include>

Credits

• Created by @vamsisai696

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║