Twist UI components examples

Twist

A card prompting the user to upgrade their plan to access advanced security controls. It includes an icon, a title, a brief description of the benefits, and two buttons for upgrading or learning more.

• Upgrade your plan

Twist

A button with a label and an external link icon, indicating it opens a new page or tab.

• Button

Twist

A card displaying an integration option with its logo, name, description, and action buttons to add or view details.

• Card

Twist

A card component displaying an integration option with an icon, title, description, and action buttons.

• Card

Twist

A pill-shaped segmented control with three options: Manage, Browse, and Build. The 'Manage' option is currently selected.

• Button group

Twist

A horizontal row of checkboxes for selecting days of the week, labeled 'Weekly schedule'.

• Input date

Twist

A toggle switch with a label to control whether an email address is displayed on a profile.

• Toggle/Switch

Twist

A social login button for Google, featuring the Google logo and text 'Log in with Google', positioned below a 'Google' section heading.

• Social login button

Twist

A form field for uploading a user profile photo, featuring a default avatar placeholder, an upload button, and helper text specifying the file size limit.

• File upload input

Twist

A toggle switch for dark mode

• Theme settings

Twist

A dropdown menu for switching workspaces and accessing settings. It includes the current workspace details, options to create or invite, settings links with keyboard shortcuts, and a dark mode toggle.

• Dropdown menu

Twist

A card offering a tip or suggestion, featuring a title with an icon, a descriptive body text, and a link for more information.

• Tips