Pricing Table
`<pura-pricing-table>` is a container that lays out `<pura-pricing-tier>` columns in a grid that auto-fits the available width, and can highlight a plan with an accent ring and a "Popular" badge. Use it on marketing or plans/subscription pages to compare tiers side by side in an accessible way (role="list" with role="listitem" items). It is agent-native: each table registers a live, machine-readable snapshot in `window.__puraPricing[id]` with `{ label, tiers: [{ id, name, price, period, featured, features }] }`, letting AI agents read the plans without scraping the DOM.
Preview
<pura-pricing-table label="Pura plans" min="16rem">
<pura-pricing-tier name="Starter" price="$0" period="/mo">
<span slot="description">For starting personal projects.</span>
<ul>
<li>1 project</li>
<li>Essential components</li>
<li>Community support</li>
</ul>
<pura-button slot="action" variant="outline">Start for free</pura-button>
</pura-pricing-tier>
<pura-pricing-tier name="Pro" price="$29" period="/mo" featured badge="Most popular">
<span slot="description">For teams that need more.</span>
<ul>
<li>Unlimited projects</li>
<li>All components</li>
<li>Priority support</li>
</ul>
<pura-button slot="action" variant="primary">Subscribe to Pro</pura-button>
</pura-pricing-tier>
<pura-pricing-tier name="Enterprise" price="Custom">
<span slot="description">For large organizations.</span>
<ul>
<li>Dedicated SLA</li>
<li>SSO and auditing</li>
<li>Account manager</li>
</ul>
<pura-button slot="action" variant="outline">Talk to sales</pura-button>
</pura-pricing-tier>
</pura-pricing-table>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
label | string | — | Accessible name for the group of plans (becomes the table's aria-label and the snapshot's label field). Applies to <pura-pricing-table>. |
min | string | 15rem | Minimum width of each column (any CSS length, e.g. "16rem"); controls the grid's auto-fit. Applies to <pura-pricing-table>. |
name | string | — | Plan name (e.g. "Pro"). Applies to <pura-pricing-tier>. |
price | string | — | Price text (e.g. "$29" or "Free"). Applies to <pura-pricing-tier>. |
period | string | — | Billing period suffix (e.g. "/mo"). Applies to <pura-pricing-tier>. |
featured | boolean | false | Highlights this plan with an accent ring and a badge; also sets data-featured. Applies to <pura-pricing-tier>. |
badge | string | Popular | Custom text for the highlight badge (only appears with featured). Applies to <pura-pricing-tier>. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/pricing-table.js"></script>import "./pura/lib/pricing-table.js";