Tailscale UI components examples

Tailscale

A progress bar showing the number of devices with access out of a total available limit.

• Progress indicator

Tailscale

A horizontal stepper showing three stages of a checkout process, with the first step currently active.

• Stepper

Tailscale

A numeric input field with inline minus and plus buttons to adjust the quantity of devices.

• Input number

Tailscale

A progress bar showing current device usage against a total limit, with a title and numeric count.

• Progress indicator

Tailscale

A settings section for configuring key expiry duration, featuring a title, description with a link, a number input with stepper controls and a unit label, helper text, and disabled Save and Reset buttons.

• Input number

Tailscale

A settings section with a title, description, a 'Learn more' link, and a toggle switch to enable or disable a specific feature.

• Toggle/Switch

Tailscale

A tooltip displaying access control information for a service, triggered by an info icon.

• Tooltip

Tailscale

A horizontal toolbar containing a wide search input with active query text and a clear button, followed by two dropdown filter buttons for Type and User.

• Sorting & filtering

Tailscale

A data table displaying a list of network services, including their port, type, machine name, and access controls.

• Table

Tailscale

A horizontal tab group with three options: Edit file, Preview changes, and Preview rules. The middle tab is currently selected, indicated by blue text and icon on a white background, while the others have a light gray background.

• Tabs

Tailscale

A code editor interface for editing JSON configuration files, featuring a main editor area with line numbers and syntax highlighting, a top toolbar with tabs, a side panel with collapsible documentation and feature sections, and bottom action buttons.

• Code block

Tailscale

An informational alert box indicating that no ACL tags were found, with a link to create them.

• Alert