104Get started
HextaUI

Empty: Small

size="sm" tightens the padding, gaps, icon tile and title for sidebars, popovers and narrow panels.

No messages
Messages from your team land here.
import { IconInbox } from "@tabler/icons-react"

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

export function EmptySmall() {
  return (
    <div className="w-full max-w-xs">
      <Empty variant="outline" size="sm">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <IconInbox />
          </EmptyMedia>
          <EmptyTitle>No messages</EmptyTitle>
          <EmptyDescription>
            Messages from your team land here.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button size="sm">New message</Button>
        </EmptyContent>
      </Empty>
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/empty-small.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"
sizesm tightens padding, gaps, the icon tile and the title.
"default" | "sm""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