Parts
Each part has props with allowed values, slots that say which parts fit inside, and states. Each part is also a Velio component: its page shows variants, states and sizes rendered live from the spec in genui/parts.js.
Primitives (15)
TextAny run of copy. The variant sets the type role; never style text any other way.IconAn icon from the Velio set, optionally in a circular container.AvatarA person. Shows an initial or label on a color; empty marks an open seat.ImageA washed photo or a tinted placeholder at a fixed ratio.ButtonAn 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.Needs actionChipA compact choice. Choice picks one in a group, filter toggles, suggestion is a reply the user can tap.Needs actionBadgeA status pill. Read-only; it never takes an action.DividerSeparates groups. Prefer whitespace; use a divider only when rows run together.ProgressShows how far along something is, or that the bot is working.TextFieldFree text the user types. Use it when no choice list fits.Needs actionCheckboxPick any number of items.Needs actionRadioPick exactly one item in a group.Needs actionToggleTurns a setting on or off right away.Needs actionAmountMoney. Always pass a number and a currency; the part formats it.TimeA time, date, range or duration. Pass ISO values; the part formats them.
Composites (12)
ListItemOne row: leading slot, headline, supporting line, trailing slot.TabsSwitch between 2 to 5 views of the same thing. Each tab has one panel.Needs actionSegmentedPick one of 2 to 4 short options that change the view or a setting.Needs actionAvatarStackA group of people as overlapping faces, with an optional count label.KeyValueA labelled value: a fact row, a small tile, or a total.ActionRowThe buttons at the end of a card. Always the last child.BannerA one-line notice with up to 2 buttons. Consent prompts, nudges.ToastConfirms something just happened, with an undo. Disappears on its own.MapSnippetA small static map with place pins and people. Tap opens directions.SelectTileA large tappable choice with a title and an optional caption. For picks that need more than a chip.Needs actionStepsA short vertical sequence where each step is done, current or still to do.CalendarStripSeven days at a glance with busy and planned blocks.
Containers (8)
ListA run of list items. Shows at most 5, then a "Show more" text button.CarouselSwipe through 3 to 5 cards of the same kind.StackLays children out in a column or a row with a token gap. The only layout tool.CardThe one surface a bot message can hold. Never put a card inside a card.SectionA titled group inside a sheet or a long card.BottomSheetA modal over the chat. Every mini app and every confirm step opens in one. Close is always an X at the bottom: centred when there is no action, to the left of the primary action when there is.BubbleOne chat message. Holds text, one card, or one carousel.ThreadA run of messages, top to bottom. Quick replies sit in a Stack under the bubble they answer.