Empty state
Empty state with one of four pixel illustrations that drop into place and float, plus a title, a line of help and room for actions.
Playground
Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.
<PxEmpty kind="search" />
Installation
pnpm dlx shadcn@latest add @lumesec/px-emptyFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-empty.jsonUsage
import { PxEmpty } from "@/components/lumesec/px-empty";
export function Example() {
return (
<PxEmpty kind="search">
<button type="button">Clear search</button>
</PxEmpty>
);
}Behaviour
Four pixel illustrations that drop into place and float gently, with a title, a line of help and a slot for actions.
API reference
Props
Also accepts every prop of <div> (React.ComponentProps<"div">), spread onto the root element.
kindType"inbox" | "search" | "error" | "done"Default"inbox"Illustration and default copy. Changing it drops the new illustration in.
headingTypeReact.ReactNodeDefaultper kindTitle. Defaults to "No messages yet", "No results", "Something went wrong" or "All caught up".
descriptionTypeReact.ReactNodeDefaultper kindHelp line under the title. Defaults to a sentence for the kind.
childrenTypeReact.ReactNodeActions, such as buttons, centred under the text.
Ref
ref points at the root HTMLDivElement.
Accessibility
- The illustration canvas is
aria-hidden. - The title is an
<h3>; the heading level cannot be changed. - Reduced motion: the pixels appear in place without dropping, and the floating and sparkles are off.
Theming
Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.
This component reads --foreground, --muted-foreground, --lumesec, --lumesec-shine, --lumesec-warning and --lumesec-success.
Notes
errordraws in the warning colour anddonein the success colour; the other kinds use the accent.- Without reduced motion the illustration animates continuously while it is on screen.
Related
Was this page helpful?