Inventory
36 components are in Content first. The components answers picked them (see Components). Anything not in is out, and its page says why.
36In26Left out9Families
Action
Things people press. 1 in Content first.
Form
Things people fill in. 10 in Content first.
CheckboxAn on-off choice in a list or form.In · builtFieldA label, control, hint and error laid out together.In · builtFormForm state and validation wired to fields.In · builtInputSingle-line text entry.In · builtInput groupAn input with addons such as icons or buttons.In · builtLabelThe name of a form control.In · builtNative selectThe browser select, styled.In · builtRadio groupOne choice from a short list.In · builtSelectOne choice from a list, in a menu.In · builtSwitchAn on-off setting that applies at once.In · built
Data
Tables and charts. 2 in Content first.
Feedback
Status and messages. 6 in Content first.
AlertA message that stays on the page.In · builtBadgeA short label for a status or count.In · builtEmptyWhat to show when there is nothing yet.In · builtSkeletonA placeholder while content loads.In · builtSpinnerA small loading indicator.In · builtToastA short message that confirms an action and goes away.In · built
Navigation
Ways around. 5 in Content first.
BreadcrumbThe path to the current page.In · builtDropdown menuA menu of actions opened from a button.In · builtNavigation menuSite navigation with links and panels.In · builtPaginationMoves between pages of results.In · builtTabsSwitches between views of the same thing.In · built
Overlay
Things that float above the page. 3 in Content first.
Alert dialogA dialog that asks to confirm an action that cannot be undone.In · builtDialogA window over the page for a focused task.In · builtSheetA panel that slides in from an edge.In · built
Layout
The frame around content. 5 in Content first.
CardA bordered container for one item or group.In · builtCollapsibleOne section that opens and closes.In · builtItemA row with media, title, description and actions.In · builtScroll areaA region with styled scrollbars.In · builtSeparatorA line between groups.In · built
Content
Ways to show more content. 1 in Content first.
Media
Pictures and slides. 3 in Content first.
Aspect ratioKeeps an image or video at a fixed shape.In · builtAvatarA small image or initials for a person.In · builtCarouselSlides that move left and right.In · built
Left out
The components answers did not pick these. Each page still shows how it would look.
AttachmentA file attached to a message.Left outBubbleA chat message bubble.Left outButton groupRelated buttons joined as one control.Left outCalendarA month grid for picking dates.Left outComboboxA text field with a filtered list of choices.Left outCommandA search-first menu of actions, opened from the keyboard.Left outContext menuA menu on right-click.Left outData tableMany records in one view: search, faceted filters, sorting, column choice, row selection with bulk actions, pagination and a density switch. Wraps TanStack Table, after shadcn's Data Table guide.Left outDate pickerA button that opens a calendar, for one date or a range. Built on calendar and popover, after shadcn's Date Picker.Left outDrawerA panel that slides up from the bottom, for phones.Left outHover cardA preview card on hover.Left outInput otpSeparate boxes for a one-time code.Left outKbdA keyboard key or shortcut.Left outMarkerA divider or status line inside a conversation.Left outMenubarA row of menus, as in desktop apps.Left outMessageOne message with its author and time.Left outMessage scrollerA scrolling list of messages that keeps the newest in view.Left outPopoverRich content in a floating panel, opened by click.Left outProgressHow far a task has come.Left outResizablePanels the user can resize by dragging.Left outSidebarThe side navigation of an app.Left outSliderA value picked by dragging along a track.Left outTextareaMulti-line text entry.Left outToggleA button that stays pressed or not.Left outToggle groupA set of toggles where one or many stay pressed.Left outTooltipA short hint on hover or focus.Left out