Components

Triggers the primary action in a form, dialog or panel.

Groups related buttons into a compact action cluster.

A navigation link for moving between pages and resources.

Shows an important message, warning or action status.

A short label for a status, category or counter.

Adds a status or count badge on top of an element.

Explains an empty state and suggests the user’s next step.

Indicates that a section or action is currently loading.

Shows the progress of a task or a loading process.

Shows progress as a ring or a gauge, with the value in the middle.

A universal generic banner for server or network response errors: it takes a raw error/response, runs it through a chain of parsers (HTTP statuses, Laravel/JSON:API/RFC 7807 validation, file/network/abort) and renders a title, main message, an optional list of per-field details and retry/dismiss actions — without knowing anything about a specific feature (file upload, forms, transactions).

A temporary interface skeleton while the content is still loading.

Shows brief pop-up notifications about the result of actions.

Bottom navigation for the key sections of a mobile interface.

Shows where the user is and lets them step back up the path.

Opens a ⌘K search over app commands with groups and shortcuts.

Top navigation for the main sections and global actions.

Splits a long list into pages and manages navigation between them.

A table of contents that highlights the section you are reading and scrolls to the one you pick.

Side navigation for sections, filters and supporting actions.

Shows where the user is in a multi-step process and can hold them back until the step checks out.

Renders tab panels linked to `GrTabs` by ARIA for accessible tabs.

Switches between related content sections without leaving the page.

Pairs a tab row with its panels under one model and one id base.

Shows a short hint on hover or focus.

Collapses and expands additional content on demand.

Asks to confirm a potentially important or dangerous action.

Brings actions to the pointer: right-click a row, a tree node or a canvas.

A dialog for confirmations, forms and focused scenarios.

A sliding panel for secondary content and quick actions.

Opens a floating list of actions or options next to the trigger.

A ready-made actions menu for a button, link or context invocation.

Opens an image in a convenient viewing and zooming mode.

A modal window for an important scenario that temporarily blocks the background.

An anchored panel for a short form, settings or a confirmation right next to the trigger.

Requests a short text input from the user in a dialog.

A combobox with type-ahead search over options, async loading and multi-select chips.

Lets you toggle independent options and select multiple items.

Collects checkboxes into one multi-select field with a shared model and states.

Picks a color for theme and branding settings: hue, saturation, lightness and opacity sliders, a hex field and a palette.

Accepts files via selection or drag-and-drop and shows their state.

Orchestrates form validation via declarative rules and the GrFormField context.

Combines label, control, hint and error into a single field.

Binds file uploads to a form field and validation.

Groups related form fields into a clear, meaningful section.

A single-line field for text, search and short values.

Lets you enter and edit a list of tags or values.

A number field with stepper controls and range constraints.

A field for a code of known length: an SMS confirmation, a one-time password, a PIN.

A single choice within a group of mutually exclusive options.

Combines radio options into a single-choice selection flow.

Collect and display a star rating, with half steps and a read-only mode.

A compact single-choice control with a pills/button presentation and a moving selection indicator.

Selection of one or several values from a list of options.

Pick a number or a range by dragging a thumb, with steps, marks and keyboard support.

Quickly turns a binary setting on and off.

A multi-line field for long text and comments.

Moves items between two lists — pick from a directory on the left, order what you picked on the right.

Selection of a value from a tree structure in a single control.

Displays a user photo, or initials / a fallback when it is missing.

A container for a meaningful block of content and actions.

Shows a set of slides one screen at a time — swipe, arrows, dots and thumbnails, with autoplay you can pause.

An interactive tag: removable, selectable, with an icon. Where GrBadge only shows a status, a chip answers to a click.

A set of chips sharing one value: list filters, record labels, a quick pick.

A table for large data sets with sorting and filtering.

Shows a signed value with its sign, tone and arrow inline in a sentence.

Lists label-value pairs as a real description list, values aligned in a column.

Separates content with a line, optionally with a centered label.

Shows a stored file as a tile: the image itself, or an icon for its type.

Renders an icon as a standalone interface element.

Walks an unknown value as a tree: collapsible nodes, search by key or value, copy a node with its path.

Displays a keyboard key or shortcut in a `<kbd>` element.

Displays a vertical list of uniform items or actions.

Let people reorder a list by dragging — or entirely from the keyboard, announced as they go.

Highlights a key metric with a caption, formatting and a trend line.

A simple table for compact display of structured data.

Shows a chronological feed of events with an axis, markers and day headings.

Shows a hierarchy of items with node expansion and selection.

A tree whose top level becomes a section heading instead of a node.

A quantity with its affixes: prefix, value, suffix — and nothing else.

Keeps a block in view while the page scrolls — a section header, a table of contents, form actions.

Provides global defaults (control size, per-component props, i18n) to nested components — imperative dialogs included.

Splits a layout into two resizable panels with a draggable divider.