Empty State

Import

import { EmptyState } from '@darkcode-ui/react';

Usage

import {Button, EmptyState} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
import React from "react";

export function Default() {

Anatomy

Import the EmptyState component and access all parts using dot notation.

import { EmptyState } from '@darkcode-ui/react';

export default () => (
  <EmptyState>
    <EmptyState.Media />
    <EmptyState.Header>
      <EmptyState.Title />
      <EmptyState.Description />
    </EmptyState.Header>
    <EmptyState.Content />
  </EmptyState>
)

Minimal

import {Button, EmptyState} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
import React from "react";

export function Minimal() {

Outline

import {Button, EmptyState} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
import React from "react";

export function Outline() {

Sizes

The size prop controls padding and spacing. Available sizes are sm, md (default), and lg.

Full Height

import {Button, EmptyState} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
import React from "react";

export function FullHeight() {

With Avatar

import {Avatar, Button, EmptyState} from "@darkcode-ui/react";
import React from "react";

export function WithAvatar() {
  return (

With Avatar Group

import {Avatar, Button, EmptyState} from "@darkcode-ui/react";
import React from "react";

const users = [
  {

With Background

import {Button, EmptyState} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
import React from "react";

export function WithBackground() {

Styling

Passing Tailwind CSS classes

import { EmptyState, Button } from "@darkcode-ui/react";

function CustomEmptyState() {
  return (
    <EmptyState className="max-w-md rounded-xl border border-dashed border-border">
      <EmptyState.Media variant="icon" />
      <EmptyState.Header>
        <EmptyState.Title className="text-lg">No data yet</EmptyState.Title>
        <EmptyState.Description>Get started by creating your first record.</EmptyState.Description>
      </EmptyState.Header>
      <EmptyState.Content>
        <Button size="sm" variant="primary">Create</Button>
      </EmptyState.Content>
    </EmptyState>
  );
}

Customizing the component classes

To customize the EmptyState component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .empty-state {
    @apply gap-8;
  }

  .empty-state__title {
    @apply text-lg;
  }

  .empty-state__media[data-variant="icon"] {
    @apply bg-accent-soft text-accent-soft-foreground;
  }
}

DarkCode UI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The EmptyState component uses these CSS classes (View source styles):

Base & Size Classes

• .empty-state - Base centered column layout
• .empty-state--sm - Small size (less padding and gap)
• .empty-state--md - Medium size (default)
• .empty-state--lg - Large size (more padding and gap)

Element Classes

• .empty-state__header - Groups media, title, and description
• .empty-state__media - Icon or avatar container
• .empty-state__title - Primary heading text
• .empty-state__description - Secondary descriptive text
• .empty-state__content - Action area for buttons, inputs, or links

Data Attributes

• [data-variant="icon"] on .empty-state__media - Adds circular muted background for icon display
• [data-variant="default"] on .empty-state__media - Default media styling (no background)

API Reference

EmptyState

The root component. Renders a centered container for empty state content.

Also supports all native div HTML attributes.

EmptyState.Header

Groups the media, title, and description elements.

Also supports all native div HTML attributes.

EmptyState.Media

Container for icons, avatars, or images.

Also supports all native div HTML attributes.

EmptyState.Title

Primary heading rendered as an h3.

Also supports all native h3 HTML attributes.

EmptyState.Description

Secondary descriptive text rendered as a p.

Also supports all native p HTML attributes.

EmptyState.Content

Action area for buttons, links, or other interactive elements.

Also supports all native div HTML attributes.