ComponentsPricing layout

layoutstexulinot agent-emittableapp

Pricing layout

layout-pricing

Pricing plans grid with title and footnote.

Live examples

Three plans

Three plans

Loading demo…

Props

Public props for Pricing layout
NameKindRequiredDefaultDescription
titlestringno——
descriptionstringno——
plansarrayno—Plan cards data
footnotestringno——
classstringno——
childrenslotno——

Keyboard

Keyboard behavior for Pricing layout
KeyAction
aPlans are a list of cards; title names the section.

Accessibility

  • Plans are a list of cards; title names the section.

Evidence for layout-pricing

Latest committed gates for layout-pricing (as of 2026-10-23). Static snapshot — not live CI.

Behavior

n/ano behavior scenario

No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).

Size (gzip)

texuli/layout-pricing · budget 12.0 KiB

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • Pricing tables on marketing pages

Don’t use when

Prefer another component

  • In-app billing settings (use settings layout)