Component gallery

ListItem

One row of a list-in-card: icon or avatar, title, subtitle, metadata, actions.

List-in-card

Rows sit flush in any divide-y surface; title + subtitle + right-aligned meta
flip-sweep
100 products with taxonomy
1d ago
empty-verify
Empty-state exercises
0 SKUs

Row as link

href makes the whole row navigate: hover bg, never an underline; linkAs injects the app router's Link
Browse the combined catalog
1,204
Module runs and their logs

Actions stay clickable on link rows

Buttons in the actions zone stack above the row link
Table · 100 rows

States

disabled and skeleton
Restricted workspace
Ask an admin for access

Styling slots

Every className the component exposes, and what it reaches
className
the row
iconWrapClassName
the leading icon or avatar disc
titleClassName
the title
subtitleClassName
the subtitle
metaClassName
the right-aligned metadata
actionsClassName
the trailing actions zone
@versable-git/ui · all states, both themes