Display

Empty

Server Component

Empty-state placeholder.

Import

tsx

import { Empty } from "@cronus-ui/ui";

bash

npx cronus-ui add empty

Examples

Empty state

A composable empty-state for zero-data views, with an icon, copy, and an action.

No messages yet

When someone sends you a message, it will show up here. Start a conversation to get going.

tsx

<Empty>
  <EmptyIcon>
    <Inbox aria-hidden="true" />
  </EmptyIcon>
  <EmptyTitle>No messages yet</EmptyTitle>
  <EmptyDescription>
    When someone sends you a message, it will show up here. Start a conversation to get going.
  </EmptyDescription>
  <EmptyContent>
    <Button>New message</Button>
  </EmptyContent>
</Empty>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component EmptyDefault layout:inline style:empty {
  label "No results"
}

page "/audit/empty/default" type:custom {
  use EmptyDefault
}