Empty

Ready

Empty state.

No results found

Try a different search term, or clear your filters.

Installation

$ npx @oratiq-js/ui add empty

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import

import { Empty, EmptyMedia, EmptyTitle, EmptyDescription, EmptyActions } from "@/components/ui/empty";

Default

No results found

No workouts match "deadlift". Try a different term or clear your filters.

First-run

No plans yet

Create your first workout plan, or browse plans built by coaches.

Three different empties

"Nothing yet" needs a call to action. "No results" needs a way to widen the search. "Something broke" needs a retry. Using one generic empty state for all three wastes the moment the user most needs direction.

View source on GitHub → components/ui/empty.tsx