Pricing

The Pricing component provides you with pricing tables and plans.

Live Examples

Live Example

☀️

Copy

View Code

import { Pricing } from '@jarllyng/nostromo' export default function PricingExample() { return ( <Pricing title="Choose Your Plan" subtitle="Flexible pricing for teams of all sizes" plans={[ {...

Live Example

☀️

Copy

View Code

import { Pricing } from '@jarllyng/nostromo' export default function PricingComparisonExample() { return ( <Pricing title="Compare Plans" variant="muted" columns={3} plans={[ {...

Live Example

☀️

Copy

View Code

import { Pricing } from '@jarllyng/nostromo' export default function PricingSimpleExample() { return ( <Pricing title="Simple Pricing" columns={2} plans={[ { id: 'monthly',...

Import


import { Pricing } from "@jarllyng/nostromo";
// or
import { Pricing } from "@jarllyng/nostromo/pricing";

Usage


import { Pricing } from "@jarllyng/nostromo";
 
export default function Example() {
  return (
    <Pricing
      title="Choose Your Plan"
      plans={[
        {
          name: "Starter",
          price: "$9",
          period: "month",
          features: ["Feature 1", "Feature 2"],
        },
      ]}
    />
  );
}

Code Examples

Props

Prop	Type	Default	Required	Description
`plans`	`PricingPlan[]`	-	Yes	Array of pricing plans (see PricingPlan interface below)
`title`	`string`	`undefined`	No	Section title
`subtitle`	`string`	`undefined`	No	Section subtitle
`columns`	`1 \| 2 \| 3 \| 4`	`3`	No	Number of columns in grid
`variant`	`"default" \| "featured" \| "comparison"`	`"default"`	No	Visual variant
`showYearly`	`boolean`	`false`	No	Whether to show yearly billing toggle
`onToggleBilling`	`(yearly: boolean) => void`	`undefined`	No	Callback when billing period toggles
`className`	`string`	`undefined`	No	Additional CSS classes

PricingPlan Interface


interface PricingPlan {
  name: string;
  price: string;
  period?: string;
  description?: string;
  features: string[];
  cta?: React.ReactNode | string;
  popular?: boolean;
  badge?: string;
}