ComponentsOverlays & feedback

Empty state

Points to the next step when a list is empty, a search finds nothing, access is denied or something failed. Five kinds with default icons and copy, three sizes, an illustration slot and a dashed frame. Server-compatible.

components/empty-state.tsx, styles/overlays.csstheme · material · accent · density · font

No posts yet

Write your first post, or bring your archive over from WordPress in one step.

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

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

<EmptyState
  title="No posts yet"
  description="Write your first post."
  actions={<Button variant="primary">Write a post</Button>}
/>

Examples

No results (CRM)

kind="no-results" is announced with role="status". Offer "Clear filters".

No contacts match “istanbul” + Enterprise

Try fewer filters, or check the spelling of the city.

Inside a table (HR)

size="sm" fits a table body or a card.

Employee	Type	Until
Nobody is on leave today The whole Istanbul team is in.

No access

Say who can grant access.

You don't have access to Payroll

Payroll is limited to the Finance role. Ask an admin — Deniz Aydın manages roles for your workspace.

Error

kind="error" with a "Try again" action; framed draws the dashed border.

Couldn't load the pipeline

The CRM service took too long to respond. Your data is safe.

Sizes

sm for cards, md for page sections, lg for a whole page (display font title).

No messages

Small — inside a card or popover.

Launch your first site

Large — a whole page. The title switches to the display font.

API

EmptyState

Prop	Type	Default
`kind` Default icon, tint and title (dictionary empty.*).	`"first-use" \| "no-results" \| "error" \| "forbidden" \| "done"`	`"first-use"`
`size` sm inside a table/card, md a page section, lg a full page.	`"sm" \| "md" \| "lg"`	`"md"`
`title` Defaults to the kind's dictionary text.	`ReactNode`	`—`
`description` Why it's empty and what to do.	`ReactNode`	`—`
`actions` One primary next step, optionally a secondary one.	`ReactNode`	`—`
`icon` Replace the kind's icon, or none.	`ReactNode \| false`	`—`
`illustration` A larger picture in place of the icon well.	`ReactNode`	`—`
`framed` Dashed frame — empty columns and drop zones.	`boolean`	`false`
`as` Title element — match the page outline.	`"h2" \| "h3" \| "h4" \| "p"`	`"h3"`

EmptyStateIcon / EmptyStateTitle / EmptyStateDescription / EmptyStateActions

Prop	Type	Default
`className` Parts for a custom arrangement. Title and Description take size; Title takes as.	`string`	`—`

Editor layout

Entity card