104Get started
HextaUI

Empty: Outline

variant="outline" draws a dashed hairline border, the usual way to mark a drop zone or an area waiting for content.

Cloud storage is empty
Upload files to keep them in sync across every device.
import { IconCloudUpload } from "@tabler/icons-react"

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

export function EmptyOutline() {
  return (
    <Empty variant="outline">
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <IconCloudUpload />
        </EmptyMedia>
        <EmptyTitle>Cloud storage is empty</EmptyTitle>
        <EmptyDescription>
          Upload files to keep them in sync across every device.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button variant="outline" size="sm">
          Upload files
        </Button>
      </EmptyContent>
    </Empty>
  )
}

Add this example

This adds the example as components/examples/empty/outline.tsx, together with the Empty component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/empty-outline.json

To add only the component, follow the Empty installation.

Props in this example

The Empty props this example sets, from the API reference.

Empty

PropTypeDefault
variant
"default" | "outline" | "muted""default"

EmptyMedia

PropTypeDefault
varianticon puts an icon in a muted tile. stack raises the tile over two fanned cards that spread when the empty state is hovered. Both hide the media from assistive tech.
"default" | "icon" | "stack""default"

Every prop is in the Empty API reference.

More Empty examples

See them all, with keyboard support and accessibility notes, on the Empty page.

Related components