Cycle UI components examples

Cycle

A radio group presenting three visual theme options (Nightfall, Eclipse, Sunrise) using thumbnail previews. The Sunrise option is currently selected, indicated by a blue border and a checkmark badge.

• Theme settings

Cycle

A form field section allowing users to view their current avatar and upload a new one.

• File upload input

Cycle

A popover displaying a grid of color swatches for selection. One swatch is currently selected, indicated by a checkmark.

• Color picker

Cycle

A circular initial avatar paired with a text label, representing a company or user entity.

• Avatar

Cycle

A circular logo avatar paired with the company name 'Cycle App'.

• Avatar

Cycle

A horizontal tab navigation component showing two tabs, 'People' and 'Companies', each with a numerical count badge. The 'Companies' tab is currently active, indicated by a green underline.

• Tabs

Cycle

A horizontal layout displaying a placeholder avatar next to an email address.

• Avatar

Cycle

User profile card

• Avatar

Cycle

A circular avatar with a letter initial and a status indicator, stacked above an email address and a signup status message.

• Avatar

Cycle

A filter builder component showing two active filter rules and an option to add more. Each rule consists of a property, an operator, and a value, displayed as inline chips within a gray container.

• Sorting & filtering

Cycle

A single filter rule row within a filter builder, showing an active condition for 'Assignee is Select users' with an option to add more filters.

• Sorting & filtering

Cycle

A horizontal row containing an icon, a label, and a toggle switch, used to enable or disable a specific setting.

• Toggle/Switch