Standards UI components examples

Standards

A dark-themed text input field displaying a base URL and an editable slug.

• Input text

Standards

A segmented control for selecting project privacy, with options for Private and Public.

• Segmented control

Standards

A dark-themed color picker panel with a gradient area, hue and opacity sliders, hex input, and a list of saved color swatches.

• Color picker

Standards

• Slider

Standards

A segmented control to toggle the background theme between Dark and Light modes.

• Segmented control

Standards

A dark-themed sidebar panel for editing layout properties like sizing, spacing, fill, and stroke.

• Toolbox

Standards

A dark-themed vertical sidebar navigation menu with sections for Navigation, Pages, Contents, and support links.

• Vertical navigation

Standards

A dark-themed top navigation bar for a design editor, featuring a logo, tool selection, view toggles, and a publish button.

• Horizontal navigation

Standards

A toggle switch with a label for enabling or disabling responsive scaling.

• Toggle/Switch

Standards

A dark-themed color picker interface featuring a saturation/brightness area, hue and opacity sliders, and hex/opacity input fields.

• Color picker

Standards

A vertical stepper component showing progress through a project setup flow. Completed steps have green checkmarks, the current step is white, and future steps are muted. A blue Finish button sits at the bottom.

• Stepper

Standards

A vertical stepper showing the stages of a project setup wizard, with the first step active and subsequent steps muted. A 'Skip Setup' button is provided at the bottom.

• Stepper