Empty State
Standardized empty result UI with illustration slot, title, description, and action.
Preview
No results found
Try changing the filters or search for a different term.
Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.
Playground
Flip props to see how the component responds. The snippet below updates as you change options.
No results found
Try changing the filters or search for a different term.
Installation
Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.
$ pnpm add @sisyphos-ui/reactThen import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";
Usage
import { EmptyState, Button } from "@sisyphos-ui/react";
export const NoResults = () => (
<EmptyState
bordered
title="Nothing here yet"
description="Once you create an item it'll show up here."
actions={<Button>New item</Button>}
/>
);With custom icon
Pass any ReactNode as `icon` to reinforce the message.
Inbox zero
You're all caught up. New items will show up here.
Sizes
`size` tunes the vertical density.
size="sm"
Same content, different density.
size="md"
Same content, different density.
size="lg"
Same content, different density.
API
Props table is being written. See the package README for the complete API surface.
The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.