All componentssmmdlg
Empty State
Zero-data placeholders with an accent indicator, title, description, and actions.
No projects yet
Create your first project to get started.
Sizes
No projects yet
Create your first project to get started.
No projects yet
Create your first project to get started.
No projects yet
Create your first project to get started.
Install
zsh — empty-state
1bunx stylexblocks add empty-stateUsage — Base UI
empty-state.tsx
123456789101112131415161718192021222324252627282930import { EmptyState } from "#components/ui/base-ui/empty-state.tsx";import { Button } from "#components/ui/base-ui/button.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // size/align resolve once on Root; parts inherit them via context and // expose data-* attributes. The indicator tints from the palette; Icon // sizes an svg to it. <EmptyState.Root size="md" align="center" palette={indigoPalette}> <EmptyState.Content> <EmptyState.Indicator> <EmptyState.Icon viewBox="0 0 24 24" fill="none"> <path d="…" stroke="currentColor" /> </EmptyState.Icon> </EmptyState.Indicator> <EmptyState.Title>No projects yet</EmptyState.Title> <EmptyState.Description> Create your first project to get started. </EmptyState.Description> <EmptyState.Actions> <Button variant="solid" size="xs" palette={indigoPalette}> New project </Button> <Button variant="ghost" size="xs">Import</Button> </EmptyState.Actions> </EmptyState.Content> </EmptyState.Root> );}