Empty

An empty state with icon, text and actions.

Import

tsx

import { Empty } from "@indoku/ui"

Examples

Basic usage

No Projects Yet

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

tsx

function EmptyDemo() {  return (    <Empty.Root variant="outline">      <Empty.Header>        <Empty.Media variant="icon">          <FolderIcon />        </Empty.Media>        <Empty.Title>No Projects Yet</Empty.Title>        <Empty.Description>You haven't created any projects yet. Get started by creating your first project.</Empty.Description>      </Empty.Header>      <Empty.Content>        <HStack>          <Button size="sm">Create Project</Button>          <Button size="sm" variant="outline">            Import Project          </Button>        </HStack>      </Empty.Content>    </Empty.Root>  )}

Props

Root

Prop	Type	Default	Description
`variant`	`"plain" \| "outline"`	`plain`	`"outline"` draws a dashed border.

Media

Prop	Type	Default	Description
`variant`	`"default" \| "icon"`	`default`	`"icon"` puts the icon in a muted box. `"default"` is free-form (image/illustration).

* required. Style props and HTML attributes are accepted as well.

← Scroll Area Kbd →

Created by @indokudev