Menu

Empty state

No data / error screens. 4 types.

Your cart is empty

Pick a tea you like and it will wait for you here.

Installation

$ npx uix-ui@latest add empty-state

This copies the file into components/ui/empty-state.tsx in your project. npx shadcn@latest add @uix/empty-state works too.

Usage

empty-state.tsx
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

PropTypeDefaultDescription
typedefault | search | error | success"default"
titleReact.ReactNode–
descriptionReact.ReactNode–
iconReact.ReactNode–Replaces the default icon of this type.
actionsReact.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-authority
  • clsx
  • tailwind-merge
  • lib/utils.ts
  • components/ui/icons.tsx
esc

↑↓ to navigate · ↵ to select · esc to close