Components

<sui-button>

Every action, verb first.

<sui-icon-button>

One icon, one action, one required label.

<sui-button-group>

Attached actions with a toolbar feel.

<sui-split-button>

A main verb with close relatives.

<sui-copy-button>

Copy a value, confirm at once.

<sui-speed-dial>

Quick creation from one floating point.

<sui-input-text>

The plain field, done right.

<sui-textarea>

Notes that can breathe.

<sui-input-number>

Numbers that line up.

<sui-input-mask>

Patterns typed clean.

<sui-input-otp>

Six boxes, zero friction.

<sui-input-tags>

Free entry, chip by chip.

<sui-password>

Secrets with a strength check.

<sui-icon-field>

Search boxes and filter fields.

<sui-float-label>

The label rides the border.

<sui-ifta-label>

The label lives inside.

<sui-input-group>

One field, joined addons.

<sui-form>

Submit, validated.

<sui-form-layout>

Forms with a spine.

<sui-select>

One choice, found fast.

<sui-multi-select>

Many picks, shown as chips.

<sui-cascade-select>

Two levels, one pick.

<sui-tree-select>

Pick from a hierarchy.

<sui-listbox>

The list that stays open.

<sui-auto-complete>

Suggest as they type.

<sui-checkbox>

Yes, no, or somewhere between.

<sui-checkbox-group>

Multi-pick with one label.

<sui-radio-button>

One of a few, spelled out.

<sui-choice-cards>

Choices that need a sentence.

<sui-toggle-switch>

Settings, on or off.

<sui-toggle-button>

A button that remembers.

<sui-select-button>

A track of near equals.

<sui-slider>

Drag a number into place.

<sui-rating>

Stars for feedback moments.

<sui-color-picker>

Brand colors only.

<sui-color-editor>

The full color tool.

<sui-date-picker>

Dates without doubt.

<sui-time-picker>

Time of day, typed or picked.

<sui-knob>

A dial for what-if numbers.

<sui-data-table>

The ledger table.

<sui-data-grid>

A million rows, cell by cell.

<sui-paginator>

Pages, ranges and row counts.

<sui-data-view>

Cards or rows, one toggle.

<sui-list>

The master list of a list-and-detail screen.

<sui-tree>

Hierarchy you can walk.

<sui-tree-table>

A table with depth.

<sui-timeline>

Events in order.

<sui-order-list>

Reorder with clicks or drags.

<sui-pick-list>

Available on the left, chosen on the right.

<sui-board>

Cards in columns, moved three ways.

<sui-calendar>

A month of work, moved by hand.

<sui-org-chart>

Who reports to whom.

<sui-virtual-scroller>

Ten thousand rows, no sweat.

<sui-description-list>

Facts about one record.

<sui-stat-card>

One number that matters.

<sui-trend>

Which way a figure moved.

<sui-filter-builder>

Any column, And or Or.

<sui-filter-panel>

Stage filters, apply once.

<sui-accordion>

Sections that take turns.

<sui-card>

The standard surface.

<sui-panel>

A titled container with moods.

<sui-fieldset>

A legend on the border.

<sui-divider>

Space with a spine.

<sui-splitter>

Two panes, one handle.

<sui-scroll-panel>

Bounded scroll with fade cues.

<sui-stepper>

Progress with numbered feet.

<sui-tabs>

Underline or pills.

<sui-toolbar>

Start, center, end.

<sui-page-header>

How every screen opens.

<sui-dialog>

A modal that means it.

<sui-confirm-dialog>

Sure about that?

<sui-confirm-popup>

A small second thought.

<sui-drawer>

Detail without leaving.

<sui-popover>

Rich content on demand.

<sui-tooltip>

One line, on hover.

<sui-tour>

A guided first walk.

<sui-menubar>

Horizontal menus with depth.

<sui-menu>

The vertical action list.

<sui-tiered-menu>

Menus inside menus.

<sui-panel-menu>

Accordion navigation.

<sui-mega-menu>

A dropdown with columns.

<sui-breadcrumb>

You are here.

<sui-context-menu>

Right-click, act.

<sui-side-nav>

The app rail.

<sui-bottom-nav>

Thumb-reach navigation.

<sui-dock>

The suite switcher.

<sui-anchor>

Jump links that track scroll.

<sui-message>

Inline notices that stay put.

<sui-toast-host>

News that fades.

<sui-progress-bar>

How far along.

<sui-progress-ring>

Progress in the round.

<sui-progress-spinner>

Working on it.

<sui-skeleton>

Shape before substance.

<sui-empty-state>

Absence with a next step.

<sui-block-ui>

Freeze while it posts.

<sui-carousel>

Page through anything.

<sui-galleria>

Hero plus thumbnails.

<sui-image>

Click to look closer.

<sui-image-compare>

Before meets after.

<sui-theme-picker>

Presets, a custom pair, and the kit in a toolbar.

<sui-avatar>

People at a glance.

<sui-avatar-group>

The team, stacked.

<sui-badge>

Counts and presence.

<sui-overlay-badge>

A count on a corner.

<sui-tag>

The status pill.

<sui-chip>

Removable tokens.

<sui-kbd>

A key, drawn as a key.

<sui-meter-group>

Parts of a whole.

<sui-spoiler>

Long text, short leash.

<sui-qr-code>

Scan to pay.

<sui-code-block>

Code that reads like code.

<sui-scroll-top>

Back up fast.

<sui-inplace>

Click, edit, done.

<sui-terminal>

The admin console.

<sui-file-upload>

Drop it here.

<sui-fluid>

Everything full width.

<sui-chart-line>

Lines, areas and stacked areas.

<sui-chart-bar>

Columns, grouped, stacked, horizontal.

<sui-chart-scatter>

Points and bubbles.

<sui-chart-waterfall>

Bridges from one total to the next.

<sui-chart-pie>

Pie, donut and nightingale.

<sui-chart-gauge>

One value against a range.

<sui-chart-radar>

Several series over shared axes.

<sui-chart-heatmap>

Cells on a single-hue scale.

<sui-chart-treemap>

Composition by area.

<sui-chart-candlestick>

Candles, OHLC and hollow.

<sui-chart-combo>

Bars with a line on a second axis.

<sui-chart-navigator>

A draggable context window.

<sui-chart-synced>

One hover across many charts.

<sui-scheduler-builder>

Complex recurrence, plain words.

<sui-config-list>

Settings that explain themselves.

<sui-notification-center>

The persistent inbox.

<sui-command-palette>

Every action, one keystroke away.

<sui-rich-text-editor>

ProseMirror in ShineUI clothes.