Pricing Section

Installation

pnpm dlx @glinui/cli@latest add pricing-section

Prefer the package? npm install @glinui/ui @glinui/tokens

Usage

Own design from Card, Switch, Badge, Button, Table and ShineBorder. Prices are numbers formatted with `Intl.NumberFormat`, so currency and locale are props, never hardcoded.

Billing is controlled (`billing`) or uncontrolled (`defaultBilling`), with `onBillingChange` in both cases.

Tier prices are per month for each period. Pass a string such as "Custom" for contact-sales tiers.

<PricingSection tiers={tiers} defaultBilling="yearly" currency="EUR" locale="de-DE" highlightEffect="none" />
<PricingSection tiers={tiers} layout="table" comparison={[{ label: "Audit log", values: [false, true, true] }]} />

<PricingSection tiers={tiers} defaultBilling="yearly" currency="EUR" locale="de-DE" highlightEffect="none" />
<PricingSection tiers={tiers} layout="table" comparison={[{ label: "Audit log", values: [false, true, true] }]} />

Accessibility

• The price is an aria-live polite region, so a toggle is announced.
• The switch has the name Bill yearly; the visible Monthly and Yearly labels show the state.
• Features are lists with decorative check icons; the table uses column and row headers and text for included or not included.

Reduced Motion

Entrance reveals and the highlighted shine follow the Glin motion level. At level none or prefers-reduced-motion everything renders in its final static state.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { PricingSection } from "@glinui/ui"