Eighty components is a lot to scroll past alphabetically. This groups them by the job they do, so you can find the one you need without knowing its name.
If you are new, start with Structure — layout is the part everything else sits inside.
The primitives, and the containers built from them.
- Flex — the layout primitive; one axis, and every shared prop
- Grid — two-dimensional layout with a responsive column count
- MasonryGrid — columns for items of uneven height
- SplitView — two resizable panes, collapsing to tabs when narrow
- Line — a rule, horizontal or vertical
- Mask — reveal content through a shape or cursor-following window
Things that hold other things.
- Card — a surface that can be selected or clicked
- Background — gradients, dots, grids and lines behind a section
- Fade — an edge that dissolves into the surface behind it
- Banner — a full-width strip for an announcement
- Book — a 3D cover, for showing a publication
- Heading — headings on the type scale
- Text — everything else on the type scale
- BlockQuote — a pulled quote
- InlineCode — code inside a sentence
- Kbd — a key or shortcut
- List — ordered and unordered lists
- Table — sortable, selectable, paginated rows
- Timeline — events in order
- Media — images and video, with the framework's optimizer when there is one
- MediaPlayers — audio and video with real controls
- CompareImage — two images under a draggable divider
- Logo / LogoCloud — a mark, and a grid of them
- OgCard — a link rendered as its own preview
- SmartLink — the link, routed through the framework adapter
- Button / IconButton / ToggleButton
- SegmentedControl — one choice from a small set
- Dropdown / DropdownWrapper / Option
- ContextMenu — a menu on right-click
- UserMenu — the account menu
- NavIcon — the hamburger, animated
- Arrow — a pointer that follows a trigger
- ScrollToTop — the button that comes back on scroll
- Dialog — a modal, stackable
- Modal — a full-screen modal with an optional backdrop, separate from Dialog
- Tooltip — a label on hover
- HoverCard — a preview on hover
- InfoTip — an info icon that explains a field
- Toast — transient confirmation
- EmojiPicker / EmojiPickerDropdown
- Spinner — work in progress, duration unknown
- Skeleton — the shape of content that has not arrived
- ProgressBar — work in progress, duration known
- StatusIndicator — a state dot
- Badge / Tag — a count, and a label
- Feedback — an inline message with a severity
- Pulse — a live indicator
- Avatar / AvatarGroup — a person, and several
- User — avatar, name and detail as one unit
- Icon — the icon set, typed by name
- Scroller — a scrollable strip with arrow affordances
- ScrollContainer — a scroll area with faded edges
- Carousel / Swiper — one item at a time
- AutoScroll — a continuously moving strip
- InfiniteScroll — load more as it comes into view
- ScrollLock — freeze the page behind an overlay
- RevealFx — enter on scroll
- Animation — the primitive the rest are built on
- Hover — a hover-driven transition
- Scrubber — a playhead over time
See Effects for the ambient layers — blobs, matrix, weather, glitch, holo and the rest.
- ThemeSwitcher — light, dark, system
- StylePanel — the full customization surface, composable
- StyleOverlay — the panel in a floating shell
- Setting — one labelled control, for building your own
Components with no UI of their own.
- ElementType — render as a link, a button or a div by prop
- FocusTrap — keep focus inside an overlay
- ArrowNavigation — arrow keys across a collection
- CursorCard — content that follows the pointer
- Form controls — inputs, selects, pickers, toggles
- Data — charts and gauges
- Effects — ambient and text effects
- Modules — CodeBlock, MediaUpload, MegaMenu, Meta, Schema