Reusable empty, error and offline states with an illustration slot and retry action.
npx shadcn@latest add @lokalhost/empty-errorAlso installs Buttons.
The source is copied to components/ui/state-view.tsx — it’s yours to edit.
import { StateView } from "@/components/ui/state-view";
if (isError) return <StateView variant="error" actionLabel="Try again" onAction={refetch} />;
if (!data?.length)
return (
<StateView
title="No messages yet"
description="When people message you, conversations will show up here."
actionLabel="Start a conversation"
onAction={() => {}}
/>
);| Prop | Type | Default | Description |
|---|---|---|---|
variant | "empty" | "error" | "offline" | "empty" | Picks icon and default copy. |
title | string | per variant | Heading. |
description | string | per variant | Supporting text. |
actionLabel | string | undefined | Primary action label. |
onAction | () => void | undefined | Primary action handler. |