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.
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.
Navigation component
A floating pill tab bar for a fitness app: five slots with Tabler icons and labels, a raised flame action button above the bar, and a sliding indicator that glides under the active tab. Idle tabs rest muted, the active tab and CTA at full strength.
aria-current="page" tracks the active tab and keyboard activation works through the linksprefers-reduced-motion<nav aria-label="Fitness sections"> wraps the tab listaria-current="page" on the active tab link<button type="button"> with aria-label="Start workout"aria-hidden="true" and focusable="false":focus-visible with --ring outline on links and the CTAprefers-reduced-motion: reduce disables all animationsOpen Fitness Tab Bar in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the navigation 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.
A four-slot mobile bottom bar with a raised centre action disc that crests the bar edge, and destination icons that spring as they take selection.
A translucent five-slot mobile bottom bar floating on a tinted wash, where a frosted pane slides behind the active slot.
A squared five-slot mobile bottom bar marked by a short two-tone rule that slides along the bottom edge beneath the active label.
An icon-only mobile bottom bar where the chosen slot widens into a tinted tab and unfolds its label inline, its neighbours giving way.
A floating pill tab bar for a social app: four labelled slots with Tabler icons and a bold accent marker bar that rides the top edge above the active tab. Idle tabs rest muted, the active tab and its icon in the accent, with a springy press.
A token-driven onboarding stepper with a continuous progress rail, animated number-to-check nodes, a live percentage readout, and a rich per-step content stage that advances real Back/Next state — fully design-system agnostic.
Starting at $9.9 per month, billed annually
Don't miss a beat with our newsletter!
BUILDER
ABOUT US
© 2026 Atheros Intelligence Ltd.