Feedback

Empty state

The "nothing here yet" block: a glyph, a line explaining what is missing, and the action that fixes it.

Server safeSource

Import

import { EmptyState } from '@the_viveksingh/vivek-ui'

Nothing here yet

An empty state should say what will appear and how to make it appear. actions takes any node, usually one primary and one secondary button.

No invoices yet

Once you send your first invoice it will show up here, along with its payment status.

<EmptyState
  icon={<InboxIcon />}
  title="No invoices yet"
  description="Once you send your first invoice it will show up here."
  actions={
    <Stack direction="horizontal" gap={3} wrap justify="center">
      <Button>Create invoice</Button>
      <Button variant="outline">Import from CSV</Button>
    </Stack>
  }
/>

Compact

For a filtered list that came back empty, where a big illustration is noise.

No results

Try a different search term.

<EmptyState size="sm" title="No results" description="Try a different search term." />

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for EmptyState
Prop	Type	Default	Description
`icon`	`ReactNode`	—	Decorative glyph or illustration. Hidden from assistive technology.
`title`	`ReactNode`	—	—
`description`	`ReactNode`	—	—
`actions`	`ReactNode`	—	Usually one or two `Button`s. The way out of the empty state.
`size`	`EmptyStateSize`	—	—
`headingLevel`	`HeadingLevel`	—	Level of `title`, so the block does not break the page outline. Defaults to `3`.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

EmptyState carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.