Pricing Table

Plan cards/table with pricing and features.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Code Examples

import { PricingTable } from "@fragment_ui/blocks";

<PricingTable
  tiers={[
    {
      name: "Pro",
      description: "For professionals",
      price: "$29",
      pricePeriod: "month",
      popular: true,
      features: [
        { name: "Unlimited projects", included: true },
        { name: "100GB storage", included: true },
        { name: "Priority support", included: true },
      ],
      ctaText: "Get Started",
      ctaOnClick: () => handleSignup("pro"),
    },
  ]}
/>

Props

PricingTable

• tiers - Array of pricing tiers (required)
• className - Additional CSS classes (optional)

PricingTier

• name - Tier name (required)
• description - Tier description (optional)
• price - Price display (required, e.g., "$29" or "Custom")
• pricePeriod - Price period (optional, e.g., "month", "year")
• priceDescription - Additional price description (optional)
• features - Array of features (required)
• ctaText - CTA button text (required)
• ctaOnClick - CTA click handler (optional)
• ctaHref - CTA link URL (optional)
• popular - Mark tier as popular (optional)
• disabled - Disable tier (optional)

PricingFeature

• name - Feature name (required)
• included - Whether feature is included (optional, default: true)
• description - Feature description (optional)

Install

1

Accessibility

Pricing table uses semantic HTML with proper headings and structure. Cards are keyboard accessible, and CTA buttons follow button/link accessibility patterns. Compliant with WCAG 2.1.