Project Empty State
layout#cards
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 Project Empty State
A clean empty-state project card that guides users to create or import their first project, with clear hierarchy, subtle dark styling, and a reusable SaaS-ready layout.
Customise it with AI
Open Project Empty State 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 React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Tri-Sidebar
ReactVanilla
A tri-sidebar app-frame layout — a full-width header and footer wrap a left nav rail, a central main surface, a status strip, and a right widgets aside. Regions reflow from a single mobile column to the full three-column frame, mobile-first and design-system agnostic.
#layout#grid#skeleton
Expanding Bento
VanillaReact
A seven-tile lifestyle bento on grid-template-areas: tap a tile and it takes the 2×2 hero slot while the others reflow, animated with View Transitions. Five container-query tiers from one to five columns, flat tinted tiles, light and dark.
#layout#bento#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
Split Bento
VanillaReact
A split bento layout — two columns, each a self-contained asymmetric sub-grid with one wide tile and two half-width tiles, plus skeleton placeholders, a dark/light theme toggle, and full design-system token integration.
#layout#bento#grid
Blog Article
VanillaReact
A responsive blog article layout with navigation, hero image, article body, sidebar with TOC/tags/related posts, related articles grid, and footer — skeleton wireframe, design-system agnostic.
#layout#skeleton
Card Grid
VanillaReact
A responsive card-grid bento — thirteen skeleton cards, each a distinct anatomy (KPI, stat, usage, banner, team, article, media hero, profile, product, tasks) placed with named `grid-template-areas` that reflow across four breakpoints, mobile-first and design-system agnostic.
#layout#bento#grid-areas
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
