Empty State

Free · MIT

Headless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.

← Description List List →

Install

Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).

Unstyled — behavior only, you write the CSS

npx astrocraft-ui add display/empty-state

Plain-CSS theme — no build step

npx astrocraft-ui add display/empty-state --theme css

Tailwind theme — needs Tailwind v4

npx astrocraft-ui add display/empty-state --theme tailwind

Plain-CSS theme, re-pointed onto Lumos tokens

npx astrocraft-ui add display/empty-state --theme css --bridge lumos

Tailwind theme, re-pointed onto Lumos tokens

npx astrocraft-ui add display/empty-state --theme tailwind --bridge lumos

EmptyState

The illustration is wrapped aria-hidden in one place rather than left to whoever pastes the SVG in — it repeats what the heading says. Mark it live when it replaces a list after a filter, and it announces itself; a server-rendered one has no change to report.

No invoices

Nothing matches “draft” in the last 90 days.

Attribute surface

With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.

Component	Slots	Variants	Runtime state	Native state
`EmptyState.astro`	`empty-state` `empty-state-media`	`data-size`: `sm` · `md` · `lg`	—	—
`EmptyStateActions.astro`	`empty-state-actions`	—	—	—
`EmptyStateDescription.astro`	`empty-state-description`	—	—	—
`EmptyStateTitle.astro`	`empty-state-title`	—	—	—

Source

What the command copies — 5 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.

src/components/ui/display/empty-state/EmptyState.astro

---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div"> & {
  live?: boolean;
  size?: "sm" | "md" | "lg";
};

const { live = false, size = "md", class: className, ...rest } = Astro.props;
---

<div
  role={live ? "status" : undefined}
  class={className}
  data-slot="empty-state"
  data-size={size}
  {...rest}
>
  {
    Astro.slots.has("media") && (
      <div data-slot="empty-state-media" aria-hidden="true">
        <slot name="media" />
      </div>
    )
  }
  <slot />
</div>

src/components/ui/display/empty-state/EmptyStateActions.astro

---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div">;

const { class: className, ...rest } = Astro.props;
---

<div class={className} data-slot="empty-state-actions" {...rest}><slot /></div>

src/components/ui/display/empty-state/EmptyStateDescription.astro

---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"p">;

const { class: className, ...rest } = Astro.props;
---

<p class={className} data-slot="empty-state-description" {...rest}><slot /></p>

src/components/ui/display/empty-state/EmptyStateTitle.astro

---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"h3">;

const { class: className, ...rest } = Astro.props;
---

<h3 class={className} data-slot="empty-state-title" {...rest}><slot /></h3>

src/components/ui/display/empty-state/index.ts

import EmptyState from "./EmptyState.astro";
import EmptyStateActions from "./EmptyStateActions.astro";
import EmptyStateDescription from "./EmptyStateDescription.astro";
import EmptyStateTitle from "./EmptyStateTitle.astro";

export { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateTitle };
export default EmptyState;

What you get

The component source, copied into your project by npx astrocraft-ui add display/empty-state — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.