Empty

Composable empty-state layout: media, title, description, and optional actions.

✎

No sketches yet

Start a new drawing or import from your notebook.

Roughness1.5Lock seedBorderedAnimate

<Empty roughness={1.5}>
  <EmptyTitle>No sketches yet</EmptyTitle>
  <EmptyDescription>...</EmptyDescription>
</Empty>

CLI install

npx doodleui-react add empty

Usage

import { Button, Empty, EmptyAction, EmptyDescription, EmptyTitle } from "doodleui-react";

<Empty>
  <EmptyTitle>No results</EmptyTitle>
  <EmptyDescription>Try a different search.</EmptyDescription>
  <EmptyAction>
    <Button size="sm">Clear filters</Button>
  </EmptyAction>
</Empty>

Props

Prop	Type	Default	Notes
bordered	boolean	true	Sketch frame and hachure fill around the empty state.
animate	boolean	true	Draw-in the frame when bordered. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.