Ark UI empty state blocks.

Each of the 100 empty state blocks is a whole section for a screen that has nothing to show yet: a first project, a search with no hits, an empty inbox. It says what is missing and gives one clear next step, usually a create button or a short form. You render it in place of your list or table when the data comes back empty.

They are sorted into 17 groups by what is empty, such as First run, Projects and tasks, Calendar and time, Files and docs, Inbox and chat, Activity and updates. Each group's blocks use that screen's own wording, so an empty task board and an empty invoice list read differently.

For a filtered table, No Filter Results Empty State shows the active filters as removable chips with a Reset all filters button. For a search, No Search Results Empty State offers close matches as 'Did you mean' rows. For a brand-new account, First Project Empty State asks for a name and creates the first project.

A comment at the top says what the screen shows and does. Below it are typed constants for the product name, the copy and any sample rows, then the component. Swap those constants for your own text and data. Most blocks draw their illustration inline as SVG, so there is no image file to host.

Import the block (or its pieces) and render it where your list would be, behind a plain check such as items.length === 0. The demo keeps its own state and offers a Start over button so you can replay it in a preview; in your app, drop that and read your data instead.

Blocks with a form (the create project, API key and invite ones) handle submit with preventDefault and then only wait a moment. Put your API call or server action in that handler and show the result from its response. Nothing is created or saved by the demo.

Find the SVG in the file (it is a named piece of markup, not an imported asset) and replace it with your own SVG, an img or a next/image. Keep the heading and sentence beside it, since they carry the meaning and the drawing is decorative.

The product name, heading, sentence and button label are constants and strings at the top of the file. Change them in place; the sentences that count things, such as how many rows a filter would bring back, are worked out from the typed data and update with it.

The blocks announce what happened through a polite status line and move focus after a user's own action, never on load. When you replace the data and handlers, keep that status line and the focus move so a screen reader user hears the result of Create or Reset.

This page lists 100 of the category's 100 empty state blocks for React on Ark UI. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The empty state blocks here are written on Ark UI primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/ark/empty-state-connect-tools.json). The other bases are one picker away from /empty-state-block/ark.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on Ark UI. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/ark/empty-state-connect-tools.json for Connect Tools Empty State. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Connect Tools Empty State brings Badge, Button, Checkbox, Guides, Label and Shine Button, installed before it. Nothing else changes in your project.

Use the filters above the grid: 17 kinds of empty state block, led by files and docs (9), orders and money (9), data and analytics (8) and team and access (7), and sort by popular or name. A good first look: Connect Tools Empty State, First Project Empty State and Getting Started Empty State. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a empty state block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the work, people and data and dev kinds.

Open its page and use the full-screen viewer (/view/empty-state/ark/connect-tools) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each empty state block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the empty state blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 empty state blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a empty state block, read it with get_block and install it on your React on Ark UI stack.

Pass `category: "empty-state"` to search_blocks to search only the 100 empty state blocks, or to list_blocks for the 17 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "empty-state", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.