Model Table
AI Pass+table#search
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.
Table component
About Model Table
A terminal-flavored AI model comparison table with three view modes (table, cards, list), live search, category filtering, CSV export, and skeleton loading — fully token-driven and design-system agnostic.
Features
- Three synchronized view modes: scrollable table, card grid, and compact list
- Animated segmented mode switcher with a sliding indicator
- Debounced live search across model name, provider, and category
- Category filter dropdown with a listbox pattern
- CSV export of the current filtered result set
- Skeleton loading states during simulated API fetch
- Locally cached, Wikimedia-sourced provider logos with attribution
Accessibility
- ARIA labels
- All interactive controls have
aria-label - Mode switch
- Buttons expose view-mode labels
- Filter dropdown
role="listbox"witharia-haspopupandaria-expanded- Keyboard nav
Cmd/Ctrl+Kand/focus search,Escapeclears- Focus indicators
:focus-visibleoutlines with--ring- Reduced motion
prefers-reduced-motion: reducedisables animations
Customise it with AI
Open Model Table in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the table 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
Vinyl Vault
VanillaReact
A record-collection data table with search, sorting, multiple views, CSV export, and asynchronous loading.
#table#search
Deployments Table
VanillaReact
A developer-console deployments table: filter by environment, search commits and branches, sort every column, and switch between table, card, and stack views. Skeleton loading, row selection with a floating bulk-action bar, and dark mode support.
#table
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
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
Radial Share
ReactVanilla
A radial share speed-dial — a central share FAB fans four social spokes (Instagram, LinkedIn, Threads, YouTube) out along a springy clockwise arc, framed by a connecting accent ring and soft halo, closes on Escape or outside click, fully token-driven and design-system agnostic.
#social#radial
Flip Card
ReactVanilla
A 3D flip credit card. The front shows an embossed number, an EMV chip, a contactless glyph and duo-tone network marks; clicking or pressing Enter rotates it on the Y axis to reveal the magnetic stripe, an Allura signature panel and the CCV.
#payment#flip#3d
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
