Tally UI components examples

Tally

A radio group styled as stacked cards for selecting between monthly and annual billing options.

• Checkbox & radio

Tally

A read-only email input field displaying the current email address, accompanied by an inline 'Change email' action button.

• Input text

Tally

A horizontal tab navigation component with two options: 'My account' and 'Notifications'. The 'My account' tab is currently active, indicated by a dark underline.

• Tabs

Tally

A dropdown menu with actions.

• Dropdown menu

Tally

A small overlapping avatar group containing an add button and a user avatar with initials.

• Avatar

Tally

A dropdown menu showing workspace navigation and settings options.

• Dropdown menu

Tally

A user profile card with a circular avatar and name and email

• Avatar

Tally

A horizontal row of three large, square toggle buttons for selecting a theme: Light, Dark, and Custom. The Custom option is currently selected, indicated by a blue border and blue text/icon.

• Checkbox & radio

Tally

A small, rounded badge indicating a 'Pro' feature or status.

• Badge

Tally

A color picker component with a label and a color preview.

• Color picker

Tally

A right-side drawer panel for configuring form design settings, including theme selection, font choice, and custom CSS.

• Drawer

Tally

A simple two-tab navigation component allowing users to switch between 'Upload' and 'Link' methods. The 'Upload' tab is currently active, indicated by a dark underline.

• Tabs