LogoLogo

Acebuilder

beta

Dashboard with empty screen

Demo
All demosStart building

Create a dashboard with a sidebar with regular links, a header, main content section with empty state as: @aceternity/empty-state-with-cards . Use lighter stroke icons on the left sidebar. Make it for a landing page builder. Current page will be projects, show some stats.

Plan
build
Read filesrc/App.tsx
Read filesrc/index.css
Read file…/block/empty-state-with-cards.tsx
Read filesrc/components/ui/card.tsx
Search codebase
  • PageCraft landing-builder dashboard with sidebar (light stroke icons), header, and Projects as the active page
  • Stats row for projects, published pages, views, and conversion rate
  • Empty state with template cards for starting the first landing page

for boxes, use box shadows instead of borders. darker stroke for icons make sure no overflow in the empty state, lose the dashed borders as well

id like to see some graphs on the top cards.

theme it something else except for black, maybe tailwind blue with inner rings and box shadows

Read filesrc/index.css
Read filesrc/App.tsx
Read filesrc/components/dashboard/sidebar.tsx
Read filesrc/components/dashboard/header.tsx
Read filesrc/components/dashboard/stats.tsx
Read file…/block/empty-state-with-cards.tsx
  • Switched cards to soft shadows and inset rings; removed dashed empty-state borders
  • Darkened sidebar icon strokes and added sparkline graphs on the top stats cards
  • Rethemed surfaces toward Tailwind blue with inner rings and box shadows

blue i only want on the buttons, not on the entire page. remove bg from lets build your first landing container

Read filesrc/index.css
Read file…/block/empty-state-with-cards.tsx
Read filesrc/components/dashboard/stats.tsx
Read filesrc/components/dashboard/sidebar.tsx
Read filesrc/components/dashboard/header.tsx
  • Reverted all neutral theme tokens from blue-tinted to pure achromatic gray — the page chrome is now neutral, no blue cast
  • Blue is now scoped to actions only: --primary (buttons), --ring (focus rings), --chart-* (stat-card sparklines), and the sidebar logo mark
  • Removed the bg-muted/40 outer and bg-muted/20 inner backgrounds from the empty-state container, keeping its shadow and inset ring

use bolt icon use shadow-sm shadow-black/10 ring-1 ring-black/10 lose the bg from these icons lose the background / shadow / border

Read filesrc/components/dashboard/sidebar.tsx
Read filesrc/components/dashboard/stats.tsx
Read file…/block/empty-state-with-cards.tsx
Search codebase
  • Swapped the sidebar logo mark to a bolt icon
  • Stats cards use shadow-sm shadow-black/10 ring-1 ring-black/10; icon chips no longer have a filled background
  • Empty-state container drops background, shadow, and border so the CTA reads cleaner
How can Acebuilder help you today?