Components
Pricing

Pricing

The Pricing component provides you with pricing tables and plans.

Live Examples

Live Example
View Code
import { Pricing } from '@nostromo/ui-marketing'

export default function PricingExample() {
  return (
    <Pricing
      title="Choose Your Plan"
      subtitle="Flexible pricing for teams of all sizes"
      plans={[
        {
          name: "Starter",
          price: "$9",
          period: "month",
          features: ["Up to 5 projects", "Basic support", "1GB storage"],
          cta: "Get Started"
        },
        {
          name: "Pro",
          price: "$29",
          period: "month",
          features: ["Unlimited projects", "Priority support", "10GB storage"],
          cta: "Start Free Trial",
          featured: true
        }
      ]}
    />
  )
}

Code Examples

Props

PropTypeDefaultDescription
titlestring-Section title
subtitlestring-Section subtitle
plansPlan[]-Array of pricing plans
columnsnumber3Number of columns
variant"default" | "featured" | "comparison""default"Pricing variant