Empty

Use the Empty component to display an empty state.

No Projects Yet

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

Installation


npx shadcn@latest add @rescript-shadcn/Empty

Usage

<Empty>
  <Empty.Header>
    <Empty.Media variant=Icon>
      <Icons.Folder />
    </Empty.Media>
    <Empty.Title> {"No data"->React.string} </Empty.Title>
    <Empty.Description> {"No data found"->React.string} </Empty.Description>
  </Empty.Header>
  <Empty.Content>
    <Button> {"Add data"->React.string} </Button>
  </Empty.Content>
</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 Empty.Media component to display an avatar in the empty state.

User Offline

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

Avatar Group

Use the Empty.Media component to display an avatar group in the empty state.

CNLRER

No Team Members

Invite your team to collaborate on this project.

InputGroup

You can add an InputGroup component to the Empty.Content component.

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

/

Need help? Contact support

API Reference

Empty

The main component of the empty state. Wraps the Empty.Header and Empty.Content components.

Prop	Type	Default
`className`	`string`

<Empty>
  <Empty.Header />
  <Empty.Content />
</Empty>

Empty.Header

The Empty.Header component wraps the empty media, title, and description.

Prop	Type	Default
`className`	`string`

<Empty.Header>
  <Empty.Media />
  <Empty.Title />
  <Empty.Description />
</Empty.Header>

Empty.Media

Use the Empty.Media component to display the media of the empty state such as an icon or an image. You can also use it to display other components such as an avatar.

Prop	Type	Default
`variant`	`Default \| Icon`	`Default`
`className`	`string`

<Empty.Media variant=Icon>
  <Icon />
</Empty.Media>

<Empty.Media>
  <Avatar>
    <Avatar.Image src="..." />
    <Avatar.Fallback> {"CN"->React.string} </Avatar.Fallback>
  </Avatar>
</Empty.Media>

EmptyTitle

Use the EmptyTitle component to display the title of the empty state.

Prop	Type	Default
`className`	`string`

<Empty.Title> {"No data"->React.string} </Empty.Title>

Empty.Description

Use the Empty.Description component to display the description of the empty state.

Prop	Type	Default
`className`	`string`

<Empty.Description> {"You do not have any notifications."->React.string} </Empty.Description>

Empty.Content

Use the Empty.Content component to display the content of the empty state such as a button, input or a link.

Prop	Type	Default
`className`	`string`

<Empty.Content>
  <Button> {"Add Project"->React.string}</Button>
</Empty.Content>