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 — Ark UI
empty-state.tsx
1234567891011121314151617181920212223242526272829import { EmptyState } from "#components/ui/ark-ui/empty-state.tsx";import { Button } from "#components/ui/ark-ui/button.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // size/align resolve once on Root; every part inherits them via context. // 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> );}