Bento Dashboard
AI Pass+layout#dashboard#skeleton#visualization
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.
Layout component
About Bento Dashboard
A six-tile bento dashboard layout — an asymmetric `3fr 1fr 2fr` grid of unequal skeleton tiles with mixed row and column spans, a full-width hero, dark/light theme toggle, and full design-system token integration, mobile-first and design-system agnostic.
Features
- Asymmetric
3fr 1fr 2frbento grid viagrid-template-areas— six unequal tiles with mixed row and column spans - Six named regions, each a distinct dashboard role (hero, stats, chart, list, widget, activity)
- Skeleton wireframe placeholders with color-mixed accents derived from design tokens
- Three-stage responsive grid — single column, two-column mosaic at 36rem, asymmetric three-column bento at 56rem
- Row tracks grow to content via
grid-auto-rows: minmax(min, auto)so tiles never clip and the page scrolls instead - Dark/light theme toggle with smooth CSS transitions
- All colors, spacing, and radii driven by design-system tokens
- Prefers-reduced-motion support for accessibility
- Per-region accent colors computed via oklch color-mix from semantic palette tokens
Accessibility
- ARIA label
.bentogrid hasaria-label="Bento dashboard layout"- Busy state
.bentostartsaria-busy="true"and is cleared tofalsebymarkReady()once rendered- Reduced motion
prefers-reduced-motion: reducekills all animations and transitions- Focus-visible
- Interactive focus styling relies on
:focus-visiblefrom the design tokens - Dynamic viewport
- Uses
100dvhfor proper mobile viewport height
Customise it with AI
Open Bento Dashboard in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the layout 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
Grid Dashboard
VanillaReact
A responsive grid dashboard layout — six wireframe regions (header app bar, sidebar nav with pinned profile, KPI + multi-bar chart main, goal-progress widget, statistics table, status-bar footer) on a named-area CSS grid, mobile-first and design-system agnostic.
#layout#dashboard#skeleton
Bento Stats
VanillaReact
A responsive 12-cell stats bento — workspaces, emails, PRs, brand, runs, contacts, records, deploy, timeline, uptime, api and storage skeleton cells on a `grid-template-areas` layout that reflows from one column to a four-column bento, mobile-first and design-system agnostic.
#layout#bento#skeleton
Asymmetric Quad
ReactVanilla
An asymmetric quad layout — four differently sized panels: an oversized hero, a nested stat/goals/spark trio, an avatar feed with captioned media, and a checkbox task panel. Skeleton wireframes driven by design tokens, reflowing from a 2×2 grid to a single column, mobile-first.
#layout#grid#bento
Bento Grid
ReactVanilla
A responsive bento grid layout with asymmetric skeleton cells, dark/light theme toggle, and full design-system token integration — mobile-first and design-system agnostic.
#layout#bento#grid
Dual Sidebar Widgets
ReactVanilla
A responsive dual-sidebar layout wireframe with header, twin sidebars, main content area, widget and statistics panels, and footer — skeleton placeholders, CSS-only dark mode (`body.dark`), and full design-system token integration.
#layout#sidebar#grid
Bento Skyline
VanillaReact
An eight-cell bento — hero, skyline chart, image, two stats, list, quote and CTA — that rebuilds its grid-template-areas at 480, 768, 1024 and 1280px, keeps its own eight-hue region palette in light and dark, and switches between skeleton placeholders and real content from a fixed toolbar.
#bento#grid#layout
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
