Empty state
No data / error screens. 4 types.
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";
import { Inbox } from "@/components/ui/icons";
export default function Example() {
return (
<EmptyState
icon={<Inbox />}
title="Your cart is empty"
description="Pick a tea you like and it will wait for you here."
actions={<Button>Browse teas</Button>}
/>
);
}
Installation
$ npx uix-ui@latest add empty-stateThis copies the file into components/ui/empty-state.tsx in your project. npx shadcn@latest add @uix/empty-state works too.
Usage
import { EmptyState } from "@/components/ui/empty-state";
<EmptyState
icon={<Inbox />}
title="Your cart is empty"
description="Pick a tea you like and it will wait for you here."
actions={<Button>Browse teas</Button>}
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | default | search | error | success | "default" | |
title | React.ReactNode | – | |
description | React.ReactNode | – | |
icon | React.ReactNode | – | Replaces the default icon of this type. |
actions | React.ReactNode | – | Buttons under the text. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.tscomponents/ui/icons.tsx