Components / Data

EmptyState

Placeholder for an empty list or panel.

Extracted fromExplorer

Import

tsx

import { EmptyState } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { EmptyState } from "@somnia-chain/ui/next"

Examples

Empty panel

No subscriptions yet

Subscribe a contract to an event or a schedule and it will show up here.

New subscription

examples/empty-state/default.tsxShow code

tsx

import { Button, EmptyState, Panel } from "@somnia-chain/ui"
import { Inbox } from "lucide-react"

export default function EmptyStateExample() {
  return (
    <Panel className="max-w-xl">
      <EmptyState title="No subscriptions yet" icon={<Inbox className="size-4" />}>
        Subscribe a contract to an event or a schedule and it will show up here.
      </EmptyState>
      <div className="flex justify-center pb-10">
        <Button href="#" size="sm">
          New subscription
        </Button>
      </div>
    </Panel>
  )
}

Props

EmptyState

Prop	Type	Default	Description
title	ReactNode	—	One line saying what is empty.
icon	ReactNode	—	Shown in a ring above the title.
children	ReactNode	—	What to do about it.
...props	<div> attributes	—	Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <div>.