Empty State
What an empty list or page says: a title, one line on what goes here, and one action.
No deploys yet
Deploy robin to see its builds and logs here.
<EmptyState
icon={<RocketIcon />}
title="No deploys yet"
description="Deploy robin to see its builds and logs here."
action={<Button variant="primary" size="sm">Deploy robin</Button>}
/>Props
as
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/empty-state.jsonThe CLI writes components/ikada/empty-state.tsx and merges the ikada theme into your CSS. Or take it from the package: import { EmptyState } from "@sproutboat/ikada";
Usage
import { EmptyState } from "@/components/ikada/empty-state";
<EmptyState
icon={<RocketIcon />}
title="No deploys yet"
description="Deploy robin to see its builds and logs here."
action={<Button variant="primary" size="sm">Deploy robin</Button>}
/>Examples
No deploys yet
Deploy robin to see its builds and logs here.
<EmptyState
icon={<RocketIcon />}
title="No deploys yet"
description="Deploy robin to see its builds and logs here."
action={
<Button variant="primary" size="sm">
<PlusIcon />
Deploy robin
</Button>
}
/>No alerts
finch and wren are both healthy.
<EmptyState
icon={<InboxIcon />}
title="No alerts"
description="finch and wren are both healthy."
/>No sprouts in eu-west
<EmptyState title="No sprouts in eu-west" />Props
| Prop | Type | Description |
|---|---|---|
| icon | ReactNode | Icon above the title, drawn on a soft tile. |
| titlerequired | ReactNode | What is empty, as a short heading. |
| description | ReactNode | One line: what this list will hold or what to do next. |
| action | ReactNode | One action. A second one means the empty state is saying too much. |
| as | "h2" | "h3" | "h4" | Heading level of the title. Default `h3`. |
Also takes every prop of Omit<ComponentProps<"div">, "title">.
Source: src/components/empty-state.tsx