Empty State

Used to indicate when a resource is empty or unavailable.

Your cart is empty

Explore our products and add items to your cart

import { EmptyState } from "@/components/ui/empty-state"
import { LuShoppingCart } from "react-icons/lu"

const Demo = () => {
  return (
    <EmptyState
      icon={<LuShoppingCart />}
      title="Your cart is empty"
      description="Explore our products and add items to your cart"
    />
  )
}

Setup

If you don't already have the snippet, run the following command to add the empty-state snippet

chakra snippet add empty-state

The snippet includes a closed component composition for the EmptyState component.

Usage

import { EmptyState } from "@/components/ui/empty-state"

<EmptyState />

Examples

Action

Here's an example of an empty state with an action button.

Start adding tokens

Add a new design token to get started

import { Group } from "@chakra-ui/react"
import { Button } from "@/components/ui/button"
import { EmptyState } from "@/components/ui/empty-state"
import { HiColorSwatch } from "react-icons/hi"

const Demo = () => {
  return (
    <EmptyState
      icon={<HiColorSwatch />}
      title="Start adding tokens"
      description="Add a new design token to get started"
    >
      <Group>
        <Button>Create token</Button>
        <Button variant="outline">Import</Button>
      </Group>
    </EmptyState>
  )
}

List

Here's an example of an empty state with a list.

No results found

Try adjusting your search

Try removing filters
Try different keywords

import { List } from "@chakra-ui/react"
import { EmptyState } from "@/components/ui/empty-state"
import { HiColorSwatch } from "react-icons/hi"

const Demo = () => {
  return (
    <EmptyState
      icon={<HiColorSwatch />}
      title="No results found"
      description="Try adjusting your search"
    >
      <List.Root variant="marker">
        <List.Item>Try removing filters</List.Item>
        <List.Item>Try different keywords</List.Item>
      </List.Root>
    </EmptyState>
  )
}

Props

Root

Prop	Default	Type
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink' \| 'accent'` The color palette of the component
`size`	`'md'`	`'md' \| 'lg'` The size of the component

Editable

Field