Component gallery

Alert

Inline banners in five tones with a title line, actions, dismissal, and markdown-lite bodies.

Tones

Five tones, each with its default icon
Ingest picks the header row automatically.
All 412 parts mapped cleanly.
3 rows were skipped for missing part numbers.
The vendor feed rejected the submission.
This workspace has no scheduled jobs.

Title + body

title bolds the first line; children carry the detail
Review before export
17 parts still carry unresolved errors. Exporting now sends them as-is.

Actions

The trailing slot takes buttons or links, in text shade with an icon
A newer taxonomy is available
Upgrading re-runs part type matching on open jobs.

Markdown-lite

markdown parses the string children subset
Rows with bold part numbers were matched by exact rule.

No icon + skeleton

noIcon drops the glyph; skeleton is the placeholder
Icon-free banner for dense placements.

Long single-line message

The body wraps across lines; the icon stays pinned to the top
The vendor feed for AC Delco Q3 returned 1,204 rows using a part number format the current normalization rules do not recognize, so nothing in this batch was mapped automatically and the whole catalog needs a manual review pass before it can move on to content generation.

Multi-paragraph body with a list

JSX children carry paragraphs and a list, not just one string
3 issues stopped this export

The loadsheet was not sent. Fix these before re-running the job.

  • Tail Light Assemblies: part type not mapped to the PCdb
  • Fuel Injectors: part type not mapped to the PCdb
  • 412 rows are missing Bolt Pattern, a critical attribute

Once these clear, the same job can be re-queued without re-uploading the file.

Schema-change notice with dismiss

Two actions plus a dismiss control; dismissing offers an Undo toast
Attribute schema changed since this run
Bolt Pattern gained 2 accepted values. Re-run matching to pick them up on open jobs.

Sidebar stack

Mixed tones stacked in a narrow 320px column
Scrape queued for 6 vendor pages.
Attribute mapping saved.
Bolt Pattern coverage dropped to 71%.

Inline inside a Card

An Alert sits between two paragraphs in a Card body, the UsageOverview shape

Plan usage

This cycle

AC Delco Q3 workspace, 3 active jobs.

You are over one or more plan limits this month. Work continues for now, contact Versable to raise your limits.

Overage so far this month: $128.40

Markdown link + code

markdown-lite's [label](url) token alongside inline code
Rows failing exact matching fall back to the PCdb browser for a manual pick.

Styling slots

Every className the component exposes, and what it reaches
className
the outer banner
titleClassName
the bold first line
bodyClassName
the detail text under the title
@versable-git/ui · all states, both themes