Empty

Use the Empty component to display an empty state.

module TablerIcons = {
  type props = {className?: string}

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Empty
Copy

Usage

Copy<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.

module TablerIcons = {
  module Cloud = {
    @module("@tabler/icons-react") @react.component

Background

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

module TablerIcons = {
  module Bell = {
    @module("@tabler/icons-react") @react.component

Avatar

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

@react.component
let make = () =>
  <Empty>

Avatar Group

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

@react.component
let make = () =>
  <Empty>

InputGroup

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

@react.component
let make = () =>
  <Empty>

API Reference

Empty

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

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

Empty.Header

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

Copy<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.

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

Copy<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.

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

Empty.Description

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

Copy<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.

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