Inventory
58 components are in Dense data. The components answers picked them (see Components). Anything not in is out, and its page says why.
58In4Left out10Families
Action
Things people press. 4 in Dense data.
ButtonTriggers an action.In · builtButton groupRelated buttons joined as one control.In · builtToggleA button that stays pressed or not.In · builtToggle groupA set of toggles where one or many stay pressed.In · built
Form
Things people fill in. 15 in Dense data.
CalendarA month grid for picking dates.In · builtCheckboxAn on-off choice in a list or form.In · builtComboboxA text field with a filtered list of choices.In · builtDate pickerA button that opens a calendar, for one date or a range. Built on calendar and popover, after shadcn's Date Picker.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 · builtInput otpSeparate boxes for a one-time code.In · builtLabelThe name of a form control.In · builtRadio groupOne choice from a short list.In · builtSelectOne choice from a list, in a menu.In · builtSliderA value picked by dragging along a track.In · builtSwitchAn on-off setting that applies at once.In · builtTextareaMulti-line text entry.In · built
Data
Tables and charts. 3 in Dense data.
ChartBars, lines and areas built on Recharts.In · builtData 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.In · builtTableRows and columns of records.In · built
Feedback
Status and messages. 7 in Dense data.
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 · builtProgressHow far a task has come.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. 9 in Dense data.
BreadcrumbThe path to the current page.In · builtCommandA search-first menu of actions, opened from the keyboard.In · builtContext menuA menu on right-click.In · builtDropdown menuA menu of actions opened from a button.In · builtKbdA keyboard key or shortcut.In · builtMenubarA row of menus, as in desktop apps.In · builtPaginationMoves between pages of results.In · builtSidebarThe side navigation of an app.In · builtTabsSwitches between views of the same thing.In · built
Overlay
Things that float above the page. 6 in Dense data.
Alert dialogA dialog that asks to confirm an action that cannot be undone.In · builtDialogA window over the page for a focused task.In · builtHover cardA preview card on hover.In · builtPopoverRich content in a floating panel, opened by click.In · builtSheetA panel that slides in from an edge.In · builtTooltipA short hint on hover or focus.In · built
Layout
The frame around content. 6 in Dense data.
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 · builtResizablePanels the user can resize by dragging.In · builtScroll areaA region with styled scrollbars.In · builtSeparatorA line between groups.In · built
Content
Ways to show more content. 1 in Dense data.
Media
Pictures and slides. 2 in Dense data.
Aspect ratioKeeps an image or video at a fixed shape.In · builtAvatarA small image or initials for a person.In · built
Conversation
5 in Dense data.
AttachmentA file attached to a message.In · builtBubbleA chat message bubble.In · builtMarkerA divider or status line inside a conversation.In · builtMessageOne message with its author and time.In · builtMessage scrollerA scrolling list of messages that keeps the newest in view.In · built
Left out
The components answers did not pick these. Each page still shows how it would look.