Pricing Tiers
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 Tiers
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.
Features
- Three pricing tiers (Starter, Pro, Enterprise) laid out in a responsive grid
- Monthly/annual billing switch that swaps every price with an opacity/blur fade
- Highlighted "Most Popular" Pro tier with a lime accent border and floating badge
- Feature lists with leading Tabler
checkicons; unavailable features use Tablerxin dim text - Per-tier CTA buttons in primary, secondary, and outline styles
- Dark mode via the host-driven
darkclass with smooth cross-fade transitions - Scroll-reveal entrance animations for the header and cards via
IntersectionObserver - Responsive layout: 3 columns on desktop, stacking to a single column on mobile
Accessibility
- ARIA labels
- All interactive elements have
aria-label - Billing toggle
- Real
<button>witharia-label - Focus indicators
:focus-visiblewith an accent outline on toggles and buttons- Reduced motion
prefers-reduced-motion: reducedisables all animations- Viewport
100dvhfor mobile-safe viewport height
Customise it with AI
Open Pricing Tiers 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 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
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
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
Skeleton — Outline
VanillaReact
An outline skeleton loading placeholder — wireframe shapes fill in one after another across an article card while content loads. Token-driven, design-system agnostic, with dark mode and reduced-motion support.
#skeleton#loading#outline
Modal — Aperture
VanillaReact
An accessible observatory-style dialog that opens through an animated circular aperture, with keyboard support and light and dark themes.
#modal#dialog#animation
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
