Component gallery

PageInfo

The centered message primitive under empty, loading, and error screens: icon, title, detail, and an actions row.

The one centered-message primitive

icon + title + subtitle + actions: empty states, error pages, upload prompts all speak through this

No results found

Try removing a filter or broadening the search.

Sizes

sm for table/card empties · md for sections · lg for full pages

Empty folder

sm: inline empties

No records yet

md: the default

Something broke

lg: the full-page error shape (the old PageError)

Tones

The disc and icon recolor. Neutral stays quiet; muted is the deliberate grey

Nothing here yet

tone=neutral, the default

No part types

tone=muted, reads as grey on purpose

Heads up

tone=info

All done

tone=success

Check this

tone=warning

Failed

tone=error

Skeleton

The loading placeholder keeps the block's shape

Consumers

EmptyState is a thin preset over PageInfo; Dropzone shares the same visual language

Upload a file

Click here or drag here to upload

Anything needing a centered message should compose PageInfo rather than hand-rolling.

Styling slots

Every className the component exposes, and what it reaches
className
the outer container
iconWrapClassName
the disc behind the icon
iconClassName
the icon
titleClassName
the heading
subtitleClassName
the secondary line under the title
actionsClassName
the actions slot under the text
@versable-git/ui · all states, both themes