# Components

Every component, with a live preview you can run, a generated API reference and what assistive technology makes of it.

- ## [Accordion](/docs/components/accordion)
  [A column of sections where opening one is a decision about the others — one at a time, or as many as the reader likes.](/docs/components/accordion)
- ## [Alert](/docs/components/alert)
  [A bordered callout with an icon, a title, a description and whatever it offers to do about itself.](/docs/components/alert)
- ## [AlertDialog](/docs/components/alert-dialog)
  [A modal confirmation dialog that interrupts the user with important content and expects an explicit response.](/docs/components/alert-dialog)
- ## [AspectRatio](/docs/components/aspect-ratio)
  [A box that locks its height to a fraction of its width, for the image, video frame or chart that must not squash.](/docs/components/aspect-ratio)
- ## [AttachmentRow](/docs/components/attachment-row)
  [One attached file — a preview, the name, a line of meta, the stage its upload is at, and the actions that act on it.](/docs/components/attachment-row)
- ## [Avatar](/docs/components/avatar)
  [A face with a fallback for when there is no picture, a corner badge for presence, and a row for a group of them.](/docs/components/avatar)
- ## [Badge](/docs/components/badge)
  [A small pill for a status, a tag or a count, in the tones the theme publishes.](/docs/components/badge)
- ## [Breadcrumb](/docs/components/breadcrumb)
  [The path to where you are, whose middle collapses into one affordance rather than off the edge of the strip.](/docs/components/breadcrumb)
- ## [Button](/docs/components/button)
  [A pressable control that runs an action, in eight variants and four sizes, each with a square icon form.](/docs/components/button)
- ## [ButtonGroup](/docs/components/button-group)
  [A cluster of buttons that assistive technology announces as one thing before it reads them.](/docs/components/button-group)
- ## [Calendar](/docs/components/calendar)
  [A month-grid calendar over a model you supply — days, ranges and per-day states, named by an absolute day serial.](/docs/components/calendar)
- ## [Card](/docs/components/card)
  [A surface with a header, a body and a footer — six exported parts, and none of them an affordance.](/docs/components/card)
- ## [Carousel](/docs/components/carousel)
  [A snap-to-item scroller along a row or down a column, with optional looping, autoplay and controls of your own.](/docs/components/carousel)
- ## [Checkbox](/docs/components/checkbox)
  [A box with three states, the third of which Slint has no property for.](/docs/components/checkbox)
- ## [Collapsible](/docs/components/collapsible)
  [A trigger and the region it shows or hides, announcing its own expanded state.](/docs/components/collapsible)
- ## [Combobox](/docs/components/combobox)
  [An autocomplete input and popup picker supporting single selection, multi-tag picking with chips, and rich item rows.](/docs/components/combobox)
- ## [Command](/docs/components/command)
  [A fast, keyboard-navigable command palette with search filtering, item grouping, and modal dialog support.](/docs/components/command)
- ## [ContextMenu](/docs/components/context-menu)
  [A right-click context menu anchored to the pointer, with keyboard shortcuts, checkable items, and nested submenus.](/docs/components/context-menu)
- ## [DataTable](/docs/components/data-table)
  [A sortable, selectable, pageable table with hideable columns and a virtualized body — the component owns the UX, your model owns the data.](/docs/components/data-table)
- ## [DatePicker](/docs/components/date-picker)
  [A calendar in a popup, opened by a trigger you own and closed by the pick.](/docs/components/date-picker)
- ## [Dialog](/docs/components/dialog)
  [A modal overlay that dims the window behind it and holds the reader on one focused task until they close it.](/docs/components/dialog)
- ## [Drawer](/docs/components/drawer)
  [A modal surface anchored to the bottom of the screen with a grab handle and drag-to-dismiss gesture.](/docs/components/drawer)
- ## [DropdownMenu](/docs/components/dropdown-menu)
  [A click-triggered menu with keyboard navigation, grouped items, checkable options, and nested submenus.](/docs/components/dropdown-menu)
- ## [Empty](/docs/components/empty)
  [The pane that stands where content would be — nothing found, nothing yet, nothing set up.](/docs/components/empty)
- ## [Field](/docs/components/field)
  [The composition that ties a label, a control, its description and its errors into one announced unit.](/docs/components/field)
- ## [GroupBox](/docs/components/group-box)
  [A titled frame around a set of related controls, announced as one group.](/docs/components/group-box)
- ## [HoverCard](/docs/components/hover-card)
  [A hover-revealed floating surface that displays rich preview content when the pointer rests on an interactive trigger.](/docs/components/hover-card)
- ## [Icon](/docs/components/icon)
  [The wrapper every Glint glyph goes through, giving a Lucide icon one size, tint and stroke width.](/docs/components/icon)
- ## [Input](/docs/components/input)
  [A single line of text, as plain text, a password or a file path.](/docs/components/input)
- ## [InputGroup](/docs/components/input-group)
  [A text input with things welded to its edges — icons, text, a spinner, a control of your own.](/docs/components/input-group)
- ## [InputOTP](/docs/components/input-otp)
  [A one-time code, one character per cell, advancing as it is typed.](/docs/components/input-otp)
- ## [Item](/docs/components/item)
  [The generic dense row — a media gutter, a content column, and the actions against the trailing edge.](/docs/components/item)
- ## [Kbd](/docs/components/kbd)
  [A key cap, and the row of them a chord is written as.](/docs/components/kbd)
- ## [Label](/docs/components/label)
  [The caption for a control, which moves focus to it when clicked and marks it required.](/docs/components/label)
- ## [Marker](/docs/components/marker)
  [The inline transcript annotation — a status line, a system note, and the labeled divider between one day's messages and the next.](/docs/components/marker)
- ## [Menubar](/docs/components/menubar)
  [A desktop application menu bar presenting a horizontal strip of top-level menus with full keyboard navigation.](/docs/components/menubar)
- ## [MenuPanel](/docs/components/menu-panel)
  [The shared menu surface component that renders menu items, group headers, and nested submenu cards.](/docs/components/menu-panel)
- ## [MessageBubble](/docs/components/message-bubble)
  [One turn of a chat transcript — a role-tinted surface carrying the turn's text, its slotted content and its reactions.](/docs/components/message-bubble)
- ## [MessageRow](/docs/components/message-row)
  [The frame around a turn — the avatar gutter, the author-and-timestamp header, and the footer a turn's actions sit in.](/docs/components/message-row)
- ## [MessageScroller](/docs/components/message-scroller)
  [The transcript viewport — a virtualized list of turns, anchored to the newest one, that reports the band the reader has in front of them.](/docs/components/message-scroller)
- ## [NavigationMenu](/docs/components/navigation-menu)
  [A header nav whose keyboard walks the strip without changing route on every keystroke.](/docs/components/navigation-menu)
- ## [Pagination](/docs/components/pagination)
  [A pager whose window is a fixed handful of slots, so a 200-page set draws what a 20-page one does.](/docs/components/pagination)
- ## [Popover](/docs/components/popover)
  [A click-opened floating surface for rich interactive content, anchored to a trigger and dismissed on click-outside or Escape.](/docs/components/popover)
- ## [Progress](/docs/components/progress)
  [A determinate bar, and the wait that has a bar but not yet a percentage.](/docs/components/progress)
- ## [Questionnaire](/docs/components/questionnaire)
  [The multi-step form — one question at a time, with the answer living in the question it answers.](/docs/components/questionnaire)
- ## [RadioGroup](/docs/components/radio-group)
  [A set of options where exactly one is chosen, walked with the arrow keys.](/docs/components/radio-group)
- ## [RangeSlider](/docs/components/range-slider)
  [Several stops on one track, each bounded by its neighbours.](/docs/components/range-slider)
- ## [Resizable](/docs/components/resizable)
  [Two panes and the handle that trades room between them, with minimums, collapsing and a keyboard.](/docs/components/resizable)
- ## [ScrollArea](/docs/components/scroll-area)
  [A window onto content larger than itself, with a slim scrollbar drawn from tokens on each axis that overflows.](/docs/components/scroll-area)
- ## [Select](/docs/components/select)
  [A dropdown selection control with typeahead search, grouped options, and custom placement.](/docs/components/select)
- ## [Separator](/docs/components/separator)
  [A hairline between sections — a line, and deliberately nothing more.](/docs/components/separator)
- ## [Sheet](/docs/components/sheet)
  [A side-anchored panel that slides out from any screen edge to present complementary content or forms.](/docs/components/sheet)
- ## [Sidebar](/docs/components/sidebar)
  [The app's navigation column — a shell that owns its width and collapse, and the parts you stack inside it.](/docs/components/sidebar)
- ## [Skeleton](/docs/components/skeleton)
  [A pulsing placeholder for content that has not arrived, sized where you use it.](/docs/components/skeleton)
- ## [Slider](/docs/components/slider)
  [A number picked along a track, continuous or stepped, on either axis.](/docs/components/slider)
- ## [SpinBox](/docs/components/spin-box)
  [A bounded number with steppers, clamped on the way in.](/docs/components/spin-box)
- ## [Spinner](/docs/components/spinner)
  [The indeterminate busy indicator — an arc that turns, announcing itself politely.](/docs/components/spinner)
- ## [Switch](/docs/components/switch)
  [A two-state toggle for a setting that takes effect as it is flipped.](/docs/components/switch)
- ## [Table](/docs/components/table)
  [A static table whose columns carry the geometry every row obeys, and whose cells can hold a widget rather than only a string.](/docs/components/table)
- ## [Tabs](/docs/components/tabs)
  [A segmented strip that owns the selection and leaves the panel to you.](/docs/components/tabs)
- ## [Textarea](/docs/components/textarea)
  [Several lines of text, growing with what is typed until it scrolls instead.](/docs/components/textarea)
- ## [TimePicker](/docs/components/time-picker)
  [An hour-and-minute grid in a popup, opened by a trigger you own and walked entirely from the arrow keys.](/docs/components/time-picker)
- ## [Toast](/docs/components/toast)
  [Notifications pushed into a queue from anywhere and stacked in one corner, each on its own countdown.](/docs/components/toast)
- ## [Toggle](/docs/components/toggle)
  [A button that stays pressed — a tool state rather than an action.](/docs/components/toggle)
- ## [ToggleGroup](/docs/components/toggle-group)
  [A strip of toggles that acts as one control — pick one, or pick several.](/docs/components/toggle-group)
- ## [Tooltip](/docs/components/tooltip)
  [A hover-revealed bubble that displays a brief description or keyboard shortcut when a trigger receives pointer hover or keyboard focus.](/docs/components/tooltip)
- ## [TreeView](/docs/components/tree-view)
  [Hierarchical navigation over a flattened row model, virtualized and walked entirely from the keyboard.](/docs/components/tree-view)
- ## [Typography](/docs/components/typography)
  [The two text primitives the theme's type ladder is spelled through, plus the blocks that are more than a font.](/docs/components/typography)