Vinyl Vault
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 Vinyl Vault
A record-collection data table with search, sorting, multiple views, CSV export, and asynchronous loading.
Features
- Searchable and sortable record collection
- Table, card, and stacked presentation modes
- Compact two-column record-card grid on mobile viewports
- Hue-coded genre badges and condition grades (WCAG AA in both themes)
- CSV export and async data seam
Customise it with AI
Open Vinyl Vault 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
Model Table
VanillaReact
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.
#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
Messaging
VanillaReact
A real-time messaging interface with conversation threads, chat bubbles, typing indicators, and simulated API integration — fully token-driven and design-system agnostic.
#messaging#chat
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
Spinner
VanillaReact
A token-driven loading panel with a dual-ring spinner, an indeterminate progress track, and a smooth transition to a success state — fully design-system agnostic.
#loader#spinner#loading
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
