Components
Every component the library exports, grouped by what it is for. Each summary says when to reach for it and, where two components are easy to confuse, which one you probably want instead.
The list is generated from the components themselves — the same @summary and @category doc comments that produce the catalogue @forte-ui/react ships for coding agents, which is why nothing here can fall behind the package.
Actions
Button
The clickable action control — submit, open, trigger; for a pressed state that sticks, use Toggle, and for pure navigation use a link.ButtonGroup
Fuses related buttons into one visual object with shared borders; purely presentational — for a single-choice set with state, use ToggleGroup.ThemeToggle
A ready-made light/dark mode button — pair with ThemeScript to avoid a wrong-theme flash at first paint; useTheme drives custom toggles.Toggle
A two-state button that stays pressed — bold in a text editor; for an on/off setting that reads as a control, use Switch.ToggleGroup
A set of Toggles sharing one value, single or multiple choice — the view-switcher pattern; for form data use RadioGroup or CheckboxGroup.Toolbar
A strip of related controls that behaves as one tab stop, arrow keys moving between them — the row above an editor or table.
Forms
Calendar
An inline month grid for picking one day, several days, or a range; for a form field that opens a calendar on demand, use DatePicker.Checkbox
An independent yes/no option with an optional mixed state; for one-of-many use RadioGroup, for a setting that applies immediately use Switch.CheckboxGroup
One array value shared by several Checkboxes, with an optional parent checkbox that summarises and toggles the lot.ColorPicker
Full colour selection — saturation/brightness canvas, hue and alpha rails, preset swatches, and a text field that speaks four CSS notations.Combobox
A text input combined with a filterable option list — the Select to reach for once the list is long enough to need typing.DatePicker
A form field that opens a Calendar in a popover — the input-shaped way to pick a day or a range.Field
Wires one control to its label, description and error message, and owns the validation state they all read — the wrapper every form control sits in.Fieldset
Groups related Fields under one legend, without the browser's default fieldset chrome.Form
A <form> that aggregates every Field's validity, blocks submission until they pass, and routes server errors back to fields by name.Input
The single-line text field; wrap in Field for label and error wiring, in InputGroup for inner icons and buttons; for numbers use NumberField.InputGroup
Puts icons, prefixes, buttons and counters inside a text field's boundary instead of bolted onto it.NumberField
A text input that knows it holds a number — parses, formats, steps, clamps, and scrubs by dragging; use over Input whenever the value is numeric.OTPField
A row of single-character slots holding one verification code — one value, one tab stop, and paste that lands where you expect.Radio
One option in a mutually exclusive set — always rendered inside a RadioGroup.RadioGroup
A single choice among a few options that all stay visible; once the list grows past a handful, use Select.Documented with Radio
Select
A dropdown for choosing one option from a closed list; once the list is long enough to need typing to navigate, use Combobox.Slider
Picks a numeric value or range by feel along a track; when the exact number matters more than the feel, use NumberField.Switch
An on/off control whose change applies immediately — no submit step; for a value collected and submitted by a form, use Checkbox.Textarea
A multi-line text control sized in rows, with an optional ceiling and CSS-driven auto-growth.
Overlays
AlertDialog
A modal for decisions that must be answered — it cannot be dismissed by clicking outside; the shape for destructive confirms. Shares Dialog's parts (see Dialog's props.json keys) under AlertDialog.*.Documented with Dialog
ContextMenu
A Menu that opens at the pointer on right-click or long-press over a region of the page rather than off a button.Dialog
A modal surface that takes focus until dismissed; for confirmations that must be answered use AlertDialog, for edge-anchored panels use Drawer.Drawer
A panel that slides in from any screen edge, with drag-to-dismiss and snap points; for a centred modal use Dialog.Menu
A button-opened list of commands with checkable items, submenus and shortcut hints; for choosing a form value use Select instead.Menubar
A row of Menus that behave as one strip — the application menu bar.Popover
An anchored non-modal surface for content the user reads or acts on — tabbable and touch-reachable; for a hover-only hint use Tooltip.PreviewCard
A rich preview of a link's destination revealed by resting on it — supplementary by design, never the only route to what it shows.Toast
Short transient messages raised imperatively from anywhere via useToast; for a persistent in-page message use Alert.Tooltip
A short label shown on hover or focus naming a control — never the only carrier of essential content; for interactive content use Popover.
Navigation
AppBar
The bar across the top of a screen — leading controls, a title and trailing actions, pinned, elevating or hiding on scroll; for a one-tab-stop strip of controls inside it, use Toolbar.Breadcrumb
The trail of ancestors above the current page, with automatic separators and a collapsible middle for narrow screens.NavigationMenu
A horizontal site-nav bar whose items open one shared panel of links that slides and resizes between them.NavList
A sidebar's vertical page list — titled sections, collapsible groups, nesting, and a controlled notion of the current page.Pagination
Page controls for a long set — previous, next, numbered pages and an ellipsis; for moving through steps of one task use Tabs, and for a position within a document use Breadcrumb.Steps
A numbered sequence of steps and the user's position in it — a wizard header or an order's progress; for a single fraction done, use Progress instead.Tabs
Switches between panels of related content in the same place, with a sliding active indicator.
Content & layout
Accordion
A stack of headings that each expand a panel, one or several open at a time; for a single independent disclosure, use Collapsible.Alert
A persistent in-page message about the page's state — the static counterpart to Toast, which is transient and floats above the page.AspectRatio
Reserves a fixed-ratio box from first paint so late-arriving media drops into already-reserved space instead of shifting the layout.Avatar
A picture of a person or thing with a sensible fallback when the image is missing or slow, plus an optional status badge and grouping.Badge
A small label for status, counts and categories.Card
The bordered grouping surface — header, title, action, content, footer and media slots for everything from settings sections to pricing tiers.Carousel
A strip of slides shown one (or a few) at a time, moved by drag, by buttons or on a timer; for panels chosen by name rather than by position use Tabs, and for a list that merely scrolls use ScrollArea.Collapsible
A single trigger and the region it reveals; for a stack of exclusive disclosures, use Accordion.Kbd
A keyboard key cap for shortcut hints — works in prose, tooltips, menu items and buttons.KbdGroup
A sequence of Kbds read as one shortcut (⌘ K).Documented with Kbd
Resizable
Panels the user re-proportions by dragging the divider between them — keyboard operable, constrainable, and persistable.ScrollArea
A scroll container with overlay scrollbars that look the same on every platform, plus scroll-position edge fades.Separator
A rule between things, horizontal or vertical, announced to assistive technology unless marked decorative.Table
Rows and columns of data on a real `<table>` — variants, sizes, striping, selection tint, numeric columns, sortable headers and a sticky header; the data, sorting and selection state stay with the consumer.
Feedback
Progress
A linear progress bar — determinate when passed a number, indeterminate when passed null; the circular form is ProgressCircle.ProgressCircle
The circular Progress — a ring for tight spaces; same determinate/indeterminate contract as the bar.Documented with Progress
Skeleton
A loading placeholder that occupies exactly the space the real content will, so the page doesn't jump when data lands.Spinner
An indeterminate busy indicator for waits with no measurable progress; when progress is known, use Progress.