Write ToonUI
Catalog
The current official component catalog exposed by @toon-ui/core.
The official catalog comes from @toon-ui/core and defines what the language supports today.
Hard rule:
- use ONLY this catalog
- do NOT invent pseudo-components like
header,footer,input,modal,grid, ordivider
Component groups
| Group | Components |
|---|---|
| Content | text, heading, separator, badge |
| Structure | card, list, item, table, empty, tabs, accordion |
| Capture | form, field, button, confirm |
| Overlay | dialog, sheet, popover, tooltip |
| Feedback | alert, progress, loading, toast |
| Navigation | breadcrumb, pagination, menu, command |
| Analytics | chart |
Official components
textheadingseparatorcardformfieldbuttonconfirmlistitembadgealerttableemptytabsaccordiondialogsheetpopovertooltipprogressloadingtoastbreadcrumbpaginationmenucommandchart
Variants and type families
| Family | Values |
|---|---|
| Button variants | primary, secondary, danger, ghost, outline |
| Badge variants | success, warning, danger, neutral, info |
| Alert variants | info, success, warning, danger |
| Confirm variants | neutral, info, warning, danger, success |
| Chart types | bar, line, area, pie |
| Sheet sides | left, right, top, bottom |
| Separator orientations | horizontal, vertical |
Field types
text, email, number, password, date, time, textarea, select, checkbox, radio, switch, combobox, otp, slider, multiselect
Important modeling rule
The catalog defines the language, not your product semantics.
For example:
formmeans “collect structured input”buttonmeans “trigger interaction”reply="open:customer-42"is your app-level intent encoding
The catalog should stay generic. Your app decides what those actions mean.