Pricing
The Pricing component provides you with pricing tables and plans.
Import
import { Pricing } from '@nostromo/ui-marketing'
// or
import { Pricing } from '@nostromo/ui-marketing/pricing'Usage
import { Pricing } from '@nostromo/ui-marketing'
export default function Example() {
return (
<Pricing
title="Choose Your Plan"
plans={[
{
name: "Starter",
price: "$9",
period: "month",
features: ["Feature 1", "Feature 2"]
}
]}
/>
)
}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",...
Live Example
View Code
import { Pricing } from '@nostromo/ui-marketing'
import { Button } from '@nostromo/ui-core'
export default function PricingComparisonExample() {
return (
<Pricing
title="Compare Plans"
variant="comparison"
plans={[
{...
Live Example
View Code
import { Pricing } from '@nostromo/ui-marketing'
export default function PricingSimpleExample() {
return (
<Pricing
title="Simple Pricing"
columns={2}
plans={[
{
name: "Monthly",...
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;
}