Feedback

EmptyState

A list or a widget with nothing in it. It fits inside a Card, where ChromeMessage takes the whole page. It says what is missing and offers the one thing to do: create or connect when there is nothing yet, clear the filters when a filter found nothing.

view .md

Preview

No entries yet

Add one, or connect an account to bring them in.

Nothing for this filter

No entries in books this month.

Installation

terminal

bash

npx @entrepta/cli@latest add empty-state

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

empty-state.tsx

tsx

import { EmptyState } from "@/components/entrepta/empty-state"

<EmptyState
  icon={TrayIcon}
  title="No entries this month"
  description="Add one, or connect an account to bring them in."
  action={<Button>add an entry</Button>}
/>

<EmptyState
  size="sm"
  title="Nothing for this filter"
  action={<Button variant="ghost" onClick={clear}>clear filters</Button>}
/>

Props

Prop	Type	Default	Description
title	ReactNode	-	What is missing, in the reader's words. Required
description	ReactNode	-	The next step, not a welcome
icon / action	Icon \| ReactElement / ReactNode	-	A tile above, and one action below
size	"sm" \| "md"	"md"	sm for a widget