Marketing

Pricing Section

A responsive 3-tier pricing grid with feature lists, check/cross icons, an optional highlighted plan with a badge, and CTA buttons. Fully customisable via the tiers prop.

Simple, transparent pricing

Start free. Scale as you grow. No hidden fees.

Starter

$0/ month

For individuals and small side projects.

3 projects
1 team member
Community support
Custom domain
Analytics
Priority support

Pro

$29/ month

For growing teams that need more power.

Unlimited projects
10 team members
Email support
Custom domain
Analytics
Priority support

Enterprise

$99/ month

For organisations with advanced needs.

Unlimited projects
Unlimited members
24/7 support
Custom domain
Advanced analytics
Priority support

import { PricingSection } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add pricing-section

Import

import.tsx

import { PricingSection } from "@aetherstack/blocks"
import type { PricingTier } from "@aetherstack/blocks"

Usage

pricing-section.tsx

import { PricingSection } from "@aetherstack/blocks"

const tiers = [
  {
    name: "Free",
    price: "$0",
    period: "month",
    cta: "Get started",
    features: [
      { text: "3 projects", included: true },
      { text: "Priority support", included: false },
    ],
  },
  {
    name: "Pro",
    price: "$29",
    period: "month",
    cta: "Start trial",
    highlighted: true,
    badge: "Most popular",
    features: [
      { text: "Unlimited projects", included: true },
      { text: "Priority support", included: true },
    ],
  },
]

export default function PricingPage() {
  return (
    <PricingSection
      title="Simple, transparent pricing"
      description="Start free. Scale as you grow."
      tiers={tiers}
    />
  )
}

Props

Prop	Type	Default	Description
tiers*	PricingTier[]	—	Array of pricing tiers. Each has name, price, period, description, features, cta, and optional highlighted/badge.
title	string	—	Section heading.
description	string	—	Supporting description below the heading.
className	string	—	Additional classes on the section wrapper.

* Required

Accessibility

→Each tier is rendered as an <article> so screen readers can navigate between them.
→Feature check/cross icons are aria-hidden; the text itself conveys inclusion.
→The highlighted tier is visually emphasised but not given special ARIA importance — all tiers are announced equally.