Official components

The Official component catalogue provides layout and interaction structure. It does not supply application state, a complete accessibility model, or a finished palette. Install the Official preset separately from Standard.

Each guide names the exact exported shortcuts, gives a small structural example, and links to the corresponding interactive Storybook specimen. For colors and behavior, combine these classes with the application’s theme and appropriate native or application-controlled state.

Component guides

1. Alert — A message container with optional icon, title, description, and action.
2. Avatar — A cropped identity image or fallback, with optional overlapping groups.
3. Badge — A compact status or category label that can also be linked.
4. Breadcrumb — A wrapping trail of links to parent locations and the current page.
5. Button — Shared control geometry for buttons and button-shaped links.
6. Calendar — Month-grid geometry for a semantic date table.
7. Card — A content surface with header, body, actions, media, and footer.
8. Carousel — A scroll-snap track with items and directional controls.
9. Chat — A conversation layout for messages on either side.
10. Checkbox — Native checkbox geometry and optional sibling mark layers.
11. Collapse — Disclosure styling for native details or an application-controlled region.
12. Color Input — Sizing and swatch geometry for a native color input.
13. Divider — A horizontal or block-axis separator with an optional label.
14. Dock — A safe-area-aware bottom navigation band with equal-width items.
15. Dropdown — A disclosure surface that can use native popover or application-managed visibility.
16. Empty — A structured empty state with explanation and a next action.
17. Floating action button — A floating action button; the application owns its action and placement.
18. Field — Field labels, hints, native inputs, groups, errors, and affixes.
19. File Input — A native file picker and an optional dropzone presentation.
20. Filter — A compact selection filter and reset control.
21. Footer — A responsive footer arrangement for navigation groups and supporting content.
22. Frame — A side/main split in which the main area can shrink and scroll.
23. Hero — A bounded hero grid for content, actions, and decoration.
24. Indicator — A small status marker positioned relative to another element.
25. Join — Adjacent controls with welded visible edges.
26. Keyboard key — Keycap and keyboard-chord presentation.
27. List — A structured content list with media, body, and secondary columns.
28. Listbox — A scroll-safe list of options for a consumer-owned selection model.
29. Loading — A decorative rotating glyph and optional inline shell.
30. Menu — Vertical or horizontal navigation with grouped items.
31. Meter — A value label and proportional visual track.
32. Mockup — Code or device mockups for examples and demonstrations.
33. Modal — A dialog surface with header, body, footer, and optional motion.
34. Navbar — A navigation bar with brand and start, center, and end regions.
35. One-time code — A row of native one-character code inputs.
36. Pagination — Page navigation links and an accessible ellipsis.
37. Popover — A positioned panel with heading and description.
38. Progress — Determinate or indeterminate progress geometry.
39. Prose — Scoped long-form typographic defaults for semantic content.
40. Radio — Native radio geometry with a consumer-owned dot color.
41. Range — A native range input with a consistent touch target.
42. Rating — A five-item rating row for native inputs, custom controls, or read-only display.
43. Select — A native select with optional customizable-picker enhancement.
44. Sheet — A side or block-edge dialog panel with optional safe-area spacing.
45. Site — Shared site framing and aligned content sections.
46. Stat — A labelled metric and a scrollable group of metrics.
47. Status — A compact status label whose color is supplied by the application.
48. Steps — A horizontal or vertical sequence of labelled steps.
49. Swap — Overlaid faces switched by a consumer-owned state.
50. Table — Data-table geometry with a scroll container and optional pinned edges.
51. Tabs — Tab list, triggers, and panels with application-owned state.
52. Timeline — Horizontal or vertical sequence of events.
53. Toast — A notification surface inside a positioned list.
54. Toggle — Native or ARIA switch geometry.
55. Toolbar — A group of controls with optional separators and vertical layout.
56. Tooltip — A lightweight explanation positioned around its trigger.
57. Tree — Nested lists and native details for hierarchical navigation.

For the reusable layout, control, typography, and accessibility fragments used by these components, see Official Commons.