Component

Empty State

A composed message for a surface with no content yet.

Preview

No projects yet

Create a project to start organizing your work.

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add empty-state

Full installation guide

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

import { EmptyState, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, Button } from '@nimjs/ui';

export function Example() {
  return <EmptyState><EmptyStateTitle>No projects yet</EmptyStateTitle><EmptyStateDescription>Create a project to get started.</EmptyStateDescription><EmptyStateActions><Button>Create project</Button></EmptyStateActions></EmptyState>;
}

System metadata

Registry

empty-state

Category: display

Status: preview

Version marker: 0.0.0 (unreleased)

Files

empty-state.tsx

Tokens

bordercardcard-foregroundmuted-foregroundradius

Dependencies

utilstokens

Copy-mode npm packages

clsxtailwind-merge

Accessibility

native semanticsscreen reader readable

Anatomy

EmptyState

EmptyState part of the empty-state composition.

EmptyStateTitle

EmptyStateTitle part of the empty-state composition.

EmptyStateDescription

EmptyStateDescription part of the empty-state composition.

EmptyStateActions

EmptyStateActions part of the empty-state composition.

Usage patterns

basic use

Explain what is missing and offer one useful next action when possible.

Composition

Use a title, concise explanation, and a relevant action. The component does not own product data or navigation.

Accessibility

The title is a heading and actions retain their native button or link semantics. Keep the heading level appropriate to its page context.