Components
Framework-free HTML and CSS that the app teams port to their platform. Components marked Gen UI can also be generated by VelioBot.
Content
AmountMoney. Always pass a number and a currency; the part formats it.Gen UIAvatarA person. Shows an initial or label on a color; empty marks an open seat.Gen UIIconAn icon from the Velio set, optionally in a circular container.Gen UIImageA washed photo or a tinted placeholder at a fixed ratio.Gen UITextAny run of copy. The variant sets the type role; never style text any other way.Gen UITimeA time, date, range or duration. Pass ISO values; the part formats them.Gen UI
Actions
Action rowThe buttons at the end of a card. Always the last child.Gen UIButtonAn action. Filled (primary, green) is the one main action. Secondary (charcoal) and tonal (tertiary, light grey) follow; text is the quietest. Icon is a white disc for top bars and dismiss; icon-filled is the green disc for the main nav action; onImage makes an icon button translucent over photos.Gen UIChipA compact choice. Choice picks one in a group, filter toggles, suggestion is a reply the user can tap.Gen UI
Inputs and selection
CheckboxPick any number of items.Gen UIRadioPick exactly one item in a group.Gen UISegmentedPick one of 2 to 4 short options that change the view or a setting.Gen UISelect tileA large tappable choice with a title and an optional caption. For picks that need more than a chip.Gen UIText fieldFree text the user types. Use it when no choice list fits.Gen UIToggleTurns a setting on or off right away.Gen UI
Status and feedback
BadgeA status pill. Read-only; it never takes an action.Gen UIBannerA one-line notice with up to 2 buttons. Consent prompts, nudges.Gen UIProgressShows how far along something is, or that the bot is working.Gen UIStepsA short vertical sequence where each step is done, current or still to do.Gen UIToastConfirms something just happened, with an undo. Disappears on its own.Gen UI
Data display
Avatar stackA group of people as overlapping faces, with an optional count label.Gen UICalendar stripSeven days at a glance with busy and planned blocks.Gen UIKey valueA labelled value: a fact row, a small tile, or a total.Gen UIListA run of list items. Shows at most 5, then a "Show more" text button.Gen UIList itemOne row: leading slot, headline, supporting line, trailing slot.Gen UIMap snippetA small static map with place pins and people. Tap opens directions.Gen UI
Navigation
Layout
CardThe one surface a bot message can hold. Never put a card inside a card.Gen UICarouselSwipe through 3 to 5 cards of the same kind.Gen UIDividerSeparates groups. Prefer whitespace; use a divider only when rows run together.Gen UISectionA titled group inside a sheet or a long card.Gen UIStackLays children out in a column or a row with a token gap. The only layout tool.Gen UI