EmptyState.

An empty space with a useful next step.

import { EmptyState, Button } from "luminescent";
import "luminescent/style.css";


export function Example() {
  return (
    <EmptyState
      title="No projects yet"
      description="Create your first project to bring the team together."
      action={<Button>Create project</Button>}
    />
  );
}

Installation

npm install luminescent

Import luminescent/style.css once at your application root. The example above uses the same package implementation as Storybook.

Variants and states

Use the preview controls to explore the supported variants, sizes, disabled/loading states and reduced motion. Controls appear only where the component exposes the corresponding prop. Theme and glow apply to every component.

API reference

Generated from the source TypeScript interfaces. Native attributes, className, style, aria-* and data-* also pass through to the documented element. Import EmptyStateProps from the package for the full inherited contract.

Accessibility and keyboard

A semantic heading, descriptive text and optional real action. headingLevel integrates into the document outline. Icons are decorative. There is no automatic focus movement.

Keep labels meaningful and test application-level contrast, focus order and screen-reader output. See the accessibility guide for composition requirements.

Theme customization

import { LuminescentProvider, EmptyState, Button } from "luminescent";
import "luminescent/style.css";


export function Example() {
  return (
    <LuminescentProvider theme="light" accent="violet" glow="subtle">
      <EmptyState
        title="No projects yet"
        description="Create your first project to bring the team together."
        action={<Button>Create project</Button>}
      />
    </LuminescentProvider>
  );
}

Switch between light and dark in the preview, or open the playground for a larger workspace. Custom CSS variables can override spacing, color, typography and effects.

Related components