EmptyState

Zero-data placeholder with an icon, title, description, and optional call-to-action. Use to fill tables, lists, or panels that have no content.

Import

tsx

import { EmptyState } from '@velocityuikit/velocityui'

Preview

No results found

Try adjusting your search or filters to find what you're looking for.

No files yet

Upload your first file to get started.

Props

Prop	Type	Default	Description
title	`string`	—	Main heading of the empty state.
description	`string`	—	Supporting text below the title.
icon	`ReactNode`	—	Icon or illustration rendered inside a circular background above the title.
action	`ReactNode`	—	Call-to-action element (e.g. a Button) rendered below the description.

Examples

Basic

tsx

import { EmptyState, Button } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <EmptyState
      title="No results found"
      description="Try adjusting your search or filters to find what you're looking for."
      action={<Button variant="outline">Clear filters</Button>}
    />
  )
}

With icon

tsx

import { EmptyState, Button } from '@velocityuikit/velocityui'

const FolderIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
      d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
  </svg>
)

export default function Example() {
  return (
    <EmptyState
      icon={<FolderIcon />}
      title="No files yet"
      description="Upload your first file to get started."
      action={<Button>Upload file</Button>}
    />
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */