EmptyState

free

EmptyState centers an illustration over one of three SVG background patterns with a content slot below for titles, descriptions, and actions.

Preview

Dark

No data available

import EmptyState from '@/components/composites/EmptyState';
import IconFrame from '@/components/composites/IconFrame';
import { PiFolderOpen } from 'react-icons/pi'

export default function UsageDemo() {
  return (
    <EmptyState
      size={240}
      illustration={
        <IconFrame>
          <PiFolderOpen className="text-xl heading-text" />
        </IconFrame>
      }
    >
      <div className="text-center">
        <h5>No data available</h5>
      </div>
    </EmptyState>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add EmptyState

Examples

Variants

Preview

Dark

Wave

Grid

Dots

import EmptyState from '@/components/composites/EmptyState';
import IconFrame from '@/components/composites/IconFrame';
import { PiFile, PiFolderOpen, PiMagnifyingGlass } from 'react-icons/pi'

export default function VariantsDemo() {
  return (
    <div className="flex flex-wrap gap-2 justify-center">
      <EmptyState
        variant="wave"
        size={240}
        illustration={
          <IconFrame>
            <PiFolderOpen className="text-xl heading-text" />
          </IconFrame>
        }
      >
        <p>Wave</p>
      </EmptyState>
      <EmptyState
        variant="grid"
        size={240}
        illustration={
          <IconFrame>
            <PiFile className="text-xl heading-text" />
          </IconFrame>
        }
      >
        <p>Grid</p>
      </EmptyState>
      <EmptyState
        variant="dots"
        size={240}
        illustration={
          <IconFrame>
            <PiMagnifyingGlass className="text-xl heading-text" />
          </IconFrame>
        }
      >
        <p>Dots</p>
      </EmptyState>
    </div>
  );
}

With Offset

Preview

Dark

No documents uploaded

import EmptyState from '@/components/composites/EmptyState';
import IconFrame from '@/components/composites/IconFrame';
import { PiFileArrowDown } from 'react-icons/pi'

export default function WithOffsetDemo() {
  return (
    <EmptyState
      variant="dots"
      size={200}
      offset={-10}
      illustration={
        <IconFrame>
          <PiFileArrowDown className="text-xl heading-text" />
        </IconFrame>
      }
    >
      <div className="text-center">
        <h5>No documents uploaded</h5>
      </div>
    </EmptyState>
  );
}

API

Prop	Description	Type	Default
`variant`	Background pattern variant.	`'wave' \| 'grid' \| 'dots'`	`'wave'`
`size`	Width and height of the background container in pixels.	`number`	`300`
`illustration`	Icon or illustration rendered centered on the background.	`ReactNode`	—
`offset`	Vertical offset (negative margin) for the content below the illustration.	`number`	`0`
`children`	Content to display below the background — title, description, actions.	`ReactNode`	—