Atelier UI

Search components…

Search components…

Empty State

Empty state with icon, copy and actions, optionally dashed, for empty lists, searches and upload areas.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

EmptyStateProps

Also accepts all props of Omit<React.ComponentProps<"div">, "title">

PropTypeDefaultDescription
iconReact.ReactNode——
title* requiredReact.ReactNode——
descriptionReact.ReactNode——
actionsReact.ReactNode—Buttons or links rendered under the copy
borderedbooleanfalseDashed outline, good for drop areas and empty tables

Install

$ npx shadcn@latest add https://chromotion.dev/r/empty-state.json

More like this