Pricing Table
AI Pass+pricing#cards
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Pricing component
About Pricing Table
A three-tier pricing table with a monthly/yearly billing toggle, a highlighted "Most Popular" tier, and Tabler-icon feature lists — fully token-driven and design-system agnostic.
Features
- Three pricing tiers (Starter, Pro, Enterprise) in a responsive grid
- Monthly/Yearly billing toggle implemented as an accessible
role="switch"button - Price text updates via
textContentwith an opacity-only fade animation - Highlighted "Most Popular" tier with
--primaryaccent border, badge, and elevation - Feature lists with leading Tabler
checkicons; unavailable features use Tablerxin dim text - Per-tier CTA buttons sized with
--buttons-height-medium - Dark mode via the host-driven
darkclass with smooth transitions - Responsive layout: 3 columns on desktop, stacking to 1 column at 375px
Accessibility
- ARIA labels
- All interactive elements have
aria-label - Billing toggle
role="switch"witharia-checkedand Enter/Space activation- Real buttons
- CTAs and toggles are real
<button>elements - Focus indicators
:focus-visiblewith--ringoutline on all elements- Reduced motion
prefers-reduced-motion: reducedisables all animations- Viewport
100dvhfor mobile-safe viewport height
Customise it with AI
Open Pricing Table in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the pricing is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Pricing Cards
VanillaReact
A three-tier Atheros AI Builder pricing showcase with a highlighted "Most Popular" plan, monthly AI-credit badges, gradient gem icons, and a dark/light theme toggle — fully token-driven and design-system agnostic.
#pricing#cards
Pricing Tiers
VanillaReact
A three-tier pricing component (Starter, Pro, Enterprise) with a monthly/annual billing switch, animated price transitions, a highlighted "Most Popular" tier, and an accent highlight — fully token-driven and design-system agnostic.
#pricing#cards
Radio Group
VanillaReact
A token-driven card-style radio group where selecting a card highlights it with a check indicator, built on native radios for inherent arrow-key navigation.
#checkbox#radio#cards
Pill Pagination
VanillaReact
A pure CSS pills pagination with rounded items, ellipsis windowing for 9 pages, and keyboard navigation — fully token-driven and design-system agnostic.
#cards#navigation#pagination
Outlined Toasts
VanillaReact
A grid of eight outlined toast notifications — each a light-tinted card with a 1.5px coloured outline, a 24px line icon, a short message, and a smoothly filling progress bar. One toast spins a loader; one carries an inline link. Fully token-driven and design-system agnostic.
#toast#notification
Classic Checkbox Group
VanillaReact
A minimal animated checkbox group rendered from a data array, with a drawn tick animation and a clean single-column list — fully token-driven and design-system agnostic.
#checkbox#form
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
