Dashral Pro is on the wayGet 30% off at launch

Dashral

Empty State

What a page, list or table shows when there's nothing in it yet — and the next step to take.

$ pnpm dlx shadcn@latest add https://dashral.com/r/empty-state.json

No projects yet

Projects keep your boards, files and reports together. Start one, or import from another tool.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/empty-state.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json
{
  "registries": {
    "@dashral": "https://dashral.com/r/{name}.json"
  }
}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/empty-state

Usage

example.tsx
import { Inbox } from "lucide-react"
import { Button } from "@/components/dashral/button"
import { EmptyState } from "@/components/dashral/empty-state"

<EmptyState
  icon={<Inbox />}
  title="No invoices yet"
  description="Invoices you send show up here."
  actions={<Button>Create invoice</Button>}
/>

Examples

No results, inside a card

variant="plain" drops the dashed outline.

Invoices

No invoices match “acme”

Check the spelling or clear the filters.

First run

The empty state as a page's first screen: create a project and the list takes its place.

Projects

Create your first project

Projects keep boards, files and reports together. It takes a few seconds.

API reference

EmptyState

Also takes every prop of <div>(opens in a new tab).

PropTypeDefault
iconReactNode

In a soft circle above the title (hidden from assistive technology).

—
title / descriptionReactNode

What would be here.

—
titleAs"h2" | "h3" | "h4" | "p"

The title's heading level, to fit the page's outline.

"h3"
actionsReactNode

The next step, e.g. a button.

—
variant"default" | "plain"

Dashed outline, or none (inside a card).

"default"
classNames{ icon, title, description, actions }

Classes for each part.

—
classNamestring

Extra classes, merged with cn() so yours win.

—

Accessibility

  • The title is a real heading. Say what would be here and how to get it, not just “No data”.