Saturation UIsaturation UI
DocsComponentsBlocks
⌘K

Getting Started

IntroductionInstallationTheming

Components

AccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendarCardChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDropdown MenuEmptyFieldGlow EffectInputInput GroupItemKbdMenubarNovel EditorPaginationProgressive BlurProgressSelectSheetSkeletonSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Components
/
Empty

Empty

Display an empty state when there's no data to show.

Preview

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

Installation

npx shadcn@latest add https://ui.saturation.io/r/empty.json

Usage

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

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon />
    </EmptyMedia>
    <EmptyTitle>No data</EmptyTitle>
    <EmptyDescription>No data found</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Add data</Button>
  </EmptyContent>
</Empty>

Examples

Outline

Use the border utility class to create an outline empty state.

Cloud Storage Empty
Upload files to your cloud storage to access them anywhere.

Background

Use the bg-* and bg-gradient-* utilities to add a background to the empty state.

No Notifications
You're all caught up. New notifications will appear here.

Avatar

Use the EmptyMedia component to display an avatar in the empty state.

LR
User Offline
This user is currently offline. You can leave a message to notify them or try again later.

On This Page

  • Preview
  • Installation
  • Usage
  • Examples

Deploy your Saturation UI app

Build beautiful, saturated interfaces with our component library.

Deploy to Vercel for the best performance and developer experience.