None
No sheets yet
The press is idle. The grid is empty on purpose.
Empty
Explains an empty state with a title, one sentence, and an optional action.
Preview
No projects yet
Start one. The grid is empty on purpose.
In action
When to use
Use it for
- A list, table, or search with nothing to show.
- One sentence and one action at most.
Not for
- Errors; use Alert.
- Loading; use Skeleton.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { Button, Empty } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/empty.
2. Vendor the source
npx @noorddev/vlak-cli add empty
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/empty.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { Button, Empty } from "@noorddev/vlak-react";
<Empty title="No projects yet" action={<Button variant="ghost" size="sm">New project</Button>}>
Start one. The grid is empty on purpose.
</Empty>Props
Empty
A vacant cell. Title, one sentence, optional action.
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | ||
action | ReactNode |
Also accepts Omit<HTMLAttributes<HTMLDivElement>, "title">.
Accessibility
- Plain text in a cell; the action is whatever you pass, so give it a real control.
Markup
<div class="rs-empty"><p class="rs-empty-title">No projects yet</p><p class="rs-empty-body">Start one. The grid is empty on purpose.</p><div class="rs-empty-action"><button class="rs-btn-ghost rs-btn-sm">New project</button></div></div>
Classes
.rs-empty.rs-empty-title.rs-empty-body.rs-empty-action