Tabs
AI Pass+tabs#navigation
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.
Tabs component
About Tabs
An accessible ARIA tabs component with a sliding active indicator, roving tabindex keyboard navigation, and a job-board panel layout — fully token-driven and design-system agnostic.
Features
- Proper ARIA tabs pattern with
role="tablist",role="tab", androle="tabpanel" - Roving tabindex with ArrowLeft/ArrowRight wrap and Home/End jumps
- Animated active-tab indicator that slides via
transform: translateX() - Panel switch with fade-and-translate entrance animation
- Job-board content with company brand logos, bookmark toggles, and location markers
- Responsive layout collapsing card rows on mobile
Accessibility
- ARIA labels
- Tablist has
aria-label, bookmarks have descriptive labels - Theme toggle
role="switch"witharia-checkedtoggled by JS- Tabs
role="tab"witharia-selectedandaria-controls- Panels
role="tabpanel"witharia-labelledbyandtabindex- Roving tabindex
- Selected tab
tabindex="0", otherstabindex="-1" - Keyboard nav
ArrowLeft/ArrowRightwrap,Home/Endjump- 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 Tabs in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the tabs 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
Vertical Tabs
VanillaReact
A data-driven smart-home settings panel styled as an industrial field console — a numbered vertical channel rail with per-tab meta lines, a springy sliding indicator, skeleton loading, custom dropdowns, persisted form state, and full WAI-ARIA keyboard support.
#tabs#vertical#navigation
Segmented Tabs
VanillaReact
A health dashboard widget with segmented pill tabs for Move, Heart, and Sleep data — featuring SVG activity rings, animated pulse dot, heart-rate range bar, and stacked sleep-stages visualisation.
#tabs#segmented#pill
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
Modal — Bottom Sheet
VanillaReact
An accessible mobile-app bottom sheet that springs up from the bottom edge with a grab handle, an amount summary, and list-rows instead of a paragraph — a fintech payment-confirmation sheet themed by the Neovault design system (inspired by Revolut), with a full-width pill CTA and full keyboard.
#modal#dialog#animation
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
Timeline Scroll
VanillaReact
A scroll-driven expedition timeline whose center rail fills with a glacial-azure gradient as you scroll. Day badges anchor beside their rail nodes and country-tagged cards reveal in a soft cascade with flag markers, activity tags and a leg stat to the next stop.
#card#timeline
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
