Component

Empty State

A composed empty state with one visual signal and one clear action.

Preview

Nothing tracked yet

Use this when a list needs a first action instead of a blank panel.

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { EmptyState } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/empty-state.json

Copied source import

code

import "@/styles/axie.css";import { EmptyState } from "@/components/axie/empty-state";

Prefer @axie/empty-state? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { EmptyState } from "axie-ui";export function Example() {  return <EmptyState title="Nothing tracked yet" description="Add your first item." />;}

Accessibility

Describe what is empty and provide one clear next action.
Avoid decorative-only visuals that carry important meaning.
Keep empty state copy concise so it does not read like onboarding documentation.

API Reference

Prop	Type	Default	Description
title	string	-	Empty state heading.
description	string	-	Supporting empty state copy.
action	ReactNode	-	Optional call to action.