Pricing Cards
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 Cards
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.
Features
- Three pricing tiers (Free, Atheros AI Pass, Ultra) in a responsive grid
- Highlighted "Most Popular" featured tier with a gradient fill, badge, and elevated shadow
- Monthly AI-credit badge on every tier with a gradient gem icon
- Tabler-style check icons on each feature row, dimmed on the featured card
- Per-tier CTA buttons sized with
--buttons-height-medium - Dark/light theme toggle with smooth color transitions and
prefers-color-schemedefault - Responsive layout: 3 columns on desktop, 2 columns on tablet, single column on mobile
Accessibility
- ARIA labels
- The theme toggle carries
aria-label - Theme toggle
role="switch"witharia-checkedtoggled by JS- Keyboard
- Theme toggle activates on
EnterandSpace - 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 Cards 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 Table
VanillaReact
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.
#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
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
Training Status Popover
VanillaReact
A premium model training-status popover: a gradient progress ring with live percentage count-up, a running status badge with pulsing dot, an epoch segment strip with ETA, live loss/accuracy/step metric tiles and pause / view-logs actions, revealed from a trigger with staggered entrance.
#popover#progress#ai
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
