Data display

Empty state

Themed placeholder surface for no-data, no-results, or error scenarios with title, description, and actions.

Import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjEmptyStateComponent } from '@kouji-ui/components';

Loading editor

Playground

#playground

No projects yet

Create your first project to get started.

variant

title

description

show action

<kj-empty-state kjVariant="neutral">
  <kj-empty-state-title>No projects yet</kj-empty-state-title>
  <kj-empty-state-description>Create your first project to get started.</kj-empty-state-description>
  <kj-empty-state-actions>
    <kj-button kjVariant="default">Create project</kj-button>
  </kj-empty-state-actions>
</kj-empty-state>