Empty

Explains an empty state and offers a useful next step.

No projects yet

You haven't created any projects yet. Get started by creating your first project.

Installation

Install Empty from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/empty

Usage

import {
  Empty,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
  EmptyMedia,
} from "@/components/ui/empty"

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
Empty	The root component that owns the primary structure and state.
EmptyHeader	Groups heading and introductory content.
EmptyTitle	Provides the visible heading for the current region.
EmptyDescription	Provides supporting context for the current region.
EmptyContent	Contains the primary visible content.
EmptyMedia	A composable part of the component anatomy.

API Reference

Empty exports 6 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

Empty Component
EmptyHeader Component
EmptyTitle Component
EmptyDescription Component
EmptyContent Component
EmptyMedia Component

Accessibility

Empty adds no application-specific accessible name by itself; use semantic content and label any interactive descendants.
Do not communicate state or meaning through color alone, and verify the composed result at text zoom and with keyboard navigation.

Source

Empty uses the standard shadcn API and is distributed through Oros. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Dropdown Menu Field