Dashboard

Empty Dashboard

A polished zero-state screen shown to new users who haven't set anything up yet. Features a subtle dot-grid background, an illustration placeholder, customisable title, description, and actions slot.

Welcome to your workspace

Create your first project to get started, or import existing data.

import { EmptyDashboard } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add empty-dashboard

Import

import.tsx

import { EmptyDashboard } from "@aetherstack/blocks"

Usage

empty-dashboard.tsx

import { EmptyDashboard } from "@aetherstack/blocks"
import { Button } from "@aetherstack/ui"

export default function DashboardPage() {
  return (
    <EmptyDashboard
      title="Welcome to your workspace"
      description="Create your first project to get started."
      actions={
        <>
          <Button onClick={() => openCreateDialog()}>Create project</Button>
          <Button variant="outline">Import data</Button>
        </>
      }
    />
  )
}

Props

Prop	Type	Default	Description
title	string	"Welcome to your dashboard"	Heading text.
description	string	—	Supporting description below the heading.
actions	ReactNode	—	CTA buttons or other actions rendered below the description.
className	string	—	Additional classes on the wrapper.

* Required

Accessibility

→The dot-grid background is aria-hidden so it doesn't pollute screen reader output.
→The SVG illustration is also aria-hidden — it is purely decorative.
→Action buttons are rendered as standard accessible <button> elements via the Button primitive.