Switches

Discover our switches, a graphical representation for toggling between two states, often used for preferences or settings.

Basic

A basic and straightforward switch design for simple on/off functionality.

Source code

The source code for Basic can be found at the following location, inside the downloaded package:

Live preview:

Card

Switches integrated within a card layout, suitable for settings or preferences panels.

Source code

The source code for Card can be found at the following location, inside the downloaded package:

Live preview:

Card Dividers

Switches presented on cards with dividers, enhancing organization and clarity.

Source code

The source code for CardDividers can be found at the following location, inside the downloaded package:

Live preview:

Card Dividers Middle

A variation of switch cards with dividers placed in the middle for a distinct layout.

Source code

The source code for CardDividersMiddle can be found at the following location, inside the downloaded package:

Live preview:

Colors

Switches available in various colors, offering customization to match different UI themes.

Source code

The source code for Colors can be found at the following location, inside the downloaded package:

Live preview:

List

Switches presented in a list format, ideal for settings or option lists.

Source code

The source code for List can be found at the following location, inside the downloaded package:

Live preview:

Positions

Switches with various position options, providing flexibility in UI design.

Source code

The source code for Positions can be found at the following location, inside the downloaded package:

Live preview:

Sizes

Switches offered in different sizes to accommodate different space requirements and design needs.

Source code

The source code for Sizes can be found at the following location, inside the downloaded package:

Live preview:

Switches

Switches styled differently that toggle interaction across the parent component.

Source code

The source code for Switches can be found at the following location, inside the downloaded package:

Live preview:

Thermostat

This integration shows an UI built for a thermostat component.

Source code

The source code for Thermostat can be found at the following location, inside the downloaded package: