Empty State

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Empty State — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class empty-state, with 9 modifiers:

• .empty-state
• .empty-state-actions
• .empty-state-description
• .empty-state-icon
• .empty-state-lg
• .empty-state-md
• .empty-state-sm
• .empty-state-title
• .empty-state-xl
• .empty-state-xs

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { EmptyState } from "@wizeworks/silicaui-react";

Props

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

import { EmptyState, Button } from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";

function InboxIcon() {
    return (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="32" height="32">
            <path d="M4 12h4l2 3h4l2-3h4" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M5 6h14l1.5 6.5v6a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1v-6z" strokeLinejoin="round" />
        </svg>
    );
}

export function EmptyStateDemo() {
    return (
        <>
            <Section title="Real use · empty inbox">
                <EmptyState
                    icon={<InboxIcon />}
                    title="No messages yet"
                    description="When someone sends you a message, it'll show up here."
                    actions={<Button color="primary">Invite teammates</Button>}
                    className="max-w-sm rounded-box border border-base-300"
                />
            </Section>

            <Section title="Compact (sm)">
                <EmptyState
                    size="sm"
                    title="No results"
                    description="Try a different search term."
                    className="max-w-sm rounded-box border border-base-300"
                />
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

EmptyState — the centered "nothing here yet" placeholder; icon/title/ description/actions are DATA slots (mirrors Stat's prop-driven rows). Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("EmptyState", "empty-state", { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "empty-state empty-state-primary" rather than passing a colour as a prop.

Takes children

no

Hydrated by

nothing — this one is static markup