Feedback

EmptyState

What's missing and how to fill it, with one main action.

import { EmptyState } from "@flinbu/seed";

Page

No components yet

Import them from Figma, or ask Pluto to draft the first ones from your tokens.

import { Button, EmptyState } from "@flinbu/seed";
import { Component } from "lucide-react";

<div className="w-full max-w-md rounded-xl border border-secondary bg-primary">
  <EmptyState icon={<Component />} title="No components yet" description="Import them from Figma, or ask Pluto to draft the first ones from your tokens."
    actions={<><Button variant="secondary">Import from Figma</Button><Button>Draft with Pluto</Button></>} />
</div>

Small, in a panel

No results

Try fewer filters.

import { Button, EmptyState } from "@flinbu/seed";

<div className="w-full max-w-xs rounded-xl border border-secondary bg-primary">
  <EmptyState size="sm" title="No results" description="Try fewer filters." actions={<Button size="sm" variant="secondary">Clear filters</Button>} />
</div>

Use it for

Empty pages, tables and search results.

Props

Prop	Type	Default	Description
`icon`	`IconProp`	`none`	Defaults to an inbox; false hides it. An element like <Search /> (works in server components) or, in client components, the component itself.
`title`	`ReactNode`	`none`	What isn't here yet.
`description`	`ReactNode`	`none`	How to add it.
`actions`	`ReactNode`	`none`	One primary Button, optionally a secondary.
`size`	`'sm' \| 'md'`	`'md'`	sm inside tables and narrow panels.

Accessibility

The title is a paragraph; wrap the region in a heading-level section if it needs one.