Skip to main content
Urbicon UI
source

EmptyState

Centered placeholder block for 'no data yet' and 'no results' states. Pairs an icon with a heading, supporting text, and an optional CTA.

Playground

No items yet

Get started by adding the first item.

Loading syntax highlighting...

01 Examples

With icon and CTA

No apartments yet

Get started by adding the first apartment.

Loading syntax highlighting...

Compact — for inline empty rows

Use density='compact' inside table bodies and small cards where the full-page layout is too tall.

No matches

Try adjusting your filter.

Loading syntax highlighting...

Embedded inside a Card

The compact density shines when nested inside a container — Cards, table bodies, sidebar panels, search-result lists. The default density would dominate the parent; compact stays proportional.

Recent activity

Nothing here yet

New events will show up as they happen.

Loading syntax highlighting...

02 Customization

Pair with any icon from @urbicon-ui/blocks. The container picks up the semantic bg-primary-subtle / text-primary tokens, so the look adapts automatically to your theme override.

Use the cta snippet for the primary action; render arbitrary markup via children for richer empty states (e.g. tutorials, illustrations).

03 Accessibility

  • The decorative icon is hidden from screen readers via its built-in aria-hidden.
  • The title renders as <h3> so it slots into existing page heading hierarchy without competing with the page <h1>.

04 API Reference

11 props
11 props 1 required

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt