Pricing

Components for displaying pricing plans and billing options.

Basic Pricing Plan

Starter

Perfect for individuals.

$ 9 /month
  • 5 projects
  • 10GB storage
  • Basic analytics
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
DPricingPlan(
  name: 'Starter',
  description: 'Perfect for individuals.',
  price: '9',
  currency: '$',
  period: '/month',
  features: [
    DPricingFeature(text: '5 projects'),
    DPricingFeature(text: '10GB storage'),
    DPricingFeature(text: 'Basic analytics'),
  ],
  buttonText: 'Get Started',
)

Highlighted Plan

Most Popular

Pro

Best for growing businesses.

$ 29 /month
  • Unlimited projects
  • 100GB storage
  • Advanced analytics
  • Priority support
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
DPricingPlan(
  name: 'Pro',
  description: 'Best for growing businesses.',
  price: '29',
  period: '/month',
  highlighted: true,
  badge: 'Most Popular',
  features: [
    DPricingFeature(text: 'Unlimited projects'),
    DPricingFeature(text: '100GB storage'),
    DPricingFeature(text: 'Advanced analytics'),
    DPricingFeature(text: 'Priority support'),
  ],
  buttonText: 'Start Free Trial',
)

With Discount

Save 20%

Enterprise

$99 $ 79 /month
  • Everything in Pro
  • Unlimited storage
  • Custom integrations
  • 24/7 phone support
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
DPricingPlan(
  name: 'Enterprise',
  price: '79',
  originalPrice: '99',
  period: '/month',
  badge: 'Save 20%',
  features: [
    DPricingFeature(text: 'Everything in Pro'),
    DPricingFeature(text: 'Unlimited storage'),
    DPricingFeature(text: 'Custom integrations'),
    DPricingFeature(text: '24/7 phone support'),
  ],
  buttonText: 'Contact Sales',
)

Features (Included/Excluded)

Basic

$ 19 /month
  • Unlimited users
  • API access
  • Custom branding
  • White-label
dart
1
2
3
4
5
6
features: [
  DPricingFeature(text: 'Unlimited users', included: true),
  DPricingFeature(text: 'API access', included: true),
  DPricingFeature(text: 'Custom branding', included: false),
  DPricingFeature(text: 'White-label', included: false),
]

Pricing Plans Grid

Free

$ 0 /month
  • 1 project
  • 1GB storage
Popular

Pro

$ 29 /month
  • 10 projects
  • 50GB storage

Enterprise

$ 99 /month
  • Unlimited
  • Unlimited
dart
1
2
3
4
5
6
7
8
DPricingPlans(
  columns: DPricingPlansColumns.three,
  plans: [
    DPricingPlan(name: 'Free', price: '0', ...),
    DPricingPlan(name: 'Pro', price: '29', highlighted: true, ...),
    DPricingPlan(name: 'Enterprise', price: '99', ...),
  ],
)

API Reference

DPricingPlan

Prop Type Default Description
name String required Plan name
description String? null Plan description
price String required Price amount
currency String $ Currency symbol
period String? null Billing period
originalPrice String? null Original price for discounts
badge String? null Badge text
features List<DPricingFeature> required Feature list
buttonText String Get started CTA button text
highlighted bool false Highlight the plan
disabled bool false Disable the plan

DPricingFeature

Prop Type Default Description
text String required Feature text
included bool true Whether feature is included
tooltip String? null Tooltip text

DPricingPlans

Prop Type Default Description
plans List<DPricingPlan> required List of plans
columns DPricingPlansColumns three Grid columns
title String? null Section title
description String? null Section description
billingToggle Component? null Billing toggle component