A
Aether UI
User & content

Pricing Comparison

A feature comparison table across pricing tiers. Features can be grouped by category. Boolean values render as check or dash icons. String values render inline. The highlighted tier receives an accent border.

Free
$0/ mo
Get started
Pro
Popular
$29/ mo
Start trial
Enterprise
$99/ mo
Contact sales
Core
Projects3UnlimitedUnlimited
Team members110Unlimited
Custom domain
Analytics
Basic analytics
Advanced analytics
Support
Priority support

import { PricingComparison } from "@aetherstack/blocks"

Installation

terminal
npx aether-ui add pricing-comparison

Import

import.tsx
import { PricingComparison } from "@aetherstack/blocks"
import type { ComparisonTier, ComparisonFeature } from "@aetherstack/blocks"

Usage

pricing-comparison.tsx
import { PricingComparison } from "@aetherstack/blocks"

const tiers = [
  { id: "free", name: "Free", price: "$0", period: "mo", cta: { label: "Get started", href: "/signup" } },
  { id: "pro", name: "Pro", price: "$29", period: "mo", highlight: true, cta: { label: "Start trial", href: "/signup/pro" } },
]

const features = [
  { category: "Core", label: "Projects", tiers: { free: "3", pro: "Unlimited" } },
  { category: "Core", label: "Custom domain", tiers: { free: false, pro: true } },
]

export default function ComparisonPage() {
  return <PricingComparison tiers={tiers} features={features} />
}

Props

PropTypeDefaultDescription
tiers*ComparisonTier[]—Tier columns. Each has id, name, and optional price, period, highlight, and cta.
features*ComparisonFeature[]—Feature rows. Each has label, optional category, and a tiers map (boolean | string | ReactNode per tier id).
classNamestring—Additional classes on the wrapper.

* Required

Accessibility

  • →Boolean true renders a Check icon with aria-label='Included'.
  • →Boolean false renders a Minus icon with aria-label='Not included'.
  • →The table uses semantic <table>, <thead>, <tbody>, <th>, and <td> elements.