Pricing

A modern, 3-tier pricing block featuring a monthly/annual toggle and an animated, continuous rainbow glowing border for the popular tier.

Simple pricing for\nevery stage of growth.

Choose the plan that fits your team's current needs and scale effortlessly as you grow.

Launch

For solo founders testing the waters and finding signal.

/ month

Billed $120 yearly

1 Active Workspace
Core data reporting
Standard email support
Community Discord access

VelocityPopular

For scaling teams that have found product-market fit.

/ month

Billed $564 yearly

Everything in Launch
Unlimited Workspaces
Advanced cohort analytics
Priority 1-hour response
Custom domains & branding
Team collaboration roles

Enterprise

For mature organizations requiring scale and compliance.

Custom

Contact for tailored pricing

Everything in Velocity
Dedicated Success Manager
SAML SSO & SCIM provisioning
Guaranteed 99.99% SLA
Audit logs & export

import { Pricing } from "@/components/jackui/blocks/pricing/pricing";

export default function PricingPage() {
  return (
    <Pricing 
      title="Simple pricing for\nevery stage of growth."
      subtitle="Choose the plan that fits your team's current needs and scale effortlessly as you grow."
      tiers={[
        {
          name: "Pro",
          description: "Everything you need to get started.",
          priceMonthly: 29,
          priceAnnually: 24,
          billedAnnuallyText: "Billed $288 yearly",
          features: [
            { name: "Up to 5 users" },
            { name: "Basic analytics" },
            { name: "24/7 support" }
          ],
          ctaText: "Get Started",
          isPopular: true
        }
      ]}
    />
  );
}

Installation

bunx shadcn@latest add https://jackfruit-xi.vercel.app/r/pricing.json

npx shadcn@latest add https://jackfruit-xi.vercel.app/r/pricing.json

pnpm dlx shadcn@latest add https://jackfruit-xi.vercel.app/r/pricing.json

Props

Prop	Type	Description
`title`	`string`	Optional. The main heading for the pricing section. Default: `"Simple pricing for\nevery stage of growth."`
`subtitle`	`string`	Optional. The descriptive text under the main heading. Default: `"Choose the plan that fits your team's current needs and scale effortlessly as you grow."`
`tiers`	`PricingTier[]`	Optional. An array of pricing tier objects to display. Defaults to a standard 3-tier setup.
`...rest`	`any`	The component does not spread extra props to the wrapper element currently.

PricingTier

Prop	Type	Description
`name`	`string`	Required. The name of the tier (e.g. "Pro").
`description`	`string`	Required. A short description for the tier.
`priceMonthly`	`string \| number`	Required. The price per month.
`priceAnnually`	`string \| number`	Required. The equivalent monthly price when billed annually.
`billedAnnuallyText`	`string`	Optional. Text to display below the annual price (e.g. "Billed $120 yearly").
`features`	`PricingFeature[]`	Required. An array of feature objects `{ name: string }`.
`ctaText`	`string`	Required. The text for the call-to-action button.
`isPopular`	`boolean`	Optional. Whether this tier should be highlighted as popular.