0

EmptyView

PreviousNext

A ready-made empty state composed from Empty and Button.

No Projects Yet
You haven't created any projects yet. Get started by creating your first project.
Learn More 
import { IconArrowUpRight, IconFolderCode } from "@tabler/icons-react"

import { EmptyView } from "@/components/compositions/empty-view"

Installation

bunx --bun shadcn@latest add @ondo-ui/empty-view

This installs EmptyView along with its empty and button dependencies.

Usage

import { EmptyView } from "@/components/compositions/empty-view"
<EmptyView
  icon={<Icon />}
  title="No data"
  description="No data found."
  actions={<Button>Add data</Button>}
/>

Examples

Basic

Only title is required. Omit icon and actions for the simplest empty state.

No notifications
You're all caught up. New notifications will appear here.
import { EmptyView } from "@/components/compositions/empty-view"

export default function EmptyViewBasic() {

With actions

Pass buttons or links through the actions slot.

Cloud Storage Empty
Upload files to your cloud storage to access them anywhere.
import { IconCloud } from "@tabler/icons-react"

import { EmptyView } from "@/components/compositions/empty-view"

API reference

EmptyView accepts every prop of Empty (it spreads ...props onto the root), plus:

PropTypeDefaultDescription
titleReact.ReactNode—Required heading text.
descriptionReact.ReactNode—Optional supporting text. Omitted when not provided.
iconReact.ReactNode—Optional media, rendered inside EmptyMedia (icon variant).
actionsReact.ReactNode—Optional buttons/links, rendered inside EmptyContent.
classNamestring—Passed through to the root Empty.

Built on

EmptyView composes these primitives:

  • Empty — the underlying empty-state container and its parts.
  • Button — used for the actions slot.

Need a layout EmptyView doesn't cover? Compose Empty directly for full control over the parts.