Swell UI components examples

Swell

A horizontal tab navigation component with four items. The 'Attributes' tab is currently selected, indicated by purple text and an underline.

• Tabs

Swell

A pill-shaped button with a question mark icon and text linking to more information about products.

• Tips

Swell

A vertical sidebar navigation menu for an admin dashboard, featuring a logo, primary navigation links with icons, an 'Admin' section, and a user profile/workspace switcher at the bottom.

• Vertical navigation

Swell

A toast notification confirming that a password recovery email has been sent.

• Notification Toast

Swell

A simple newsletter subscription form with a heading, descriptive text, and an email input field featuring an inline submit button.

• Newsletter signup form

Swell

A simple newsletter subscription form featuring an eyebrow heading, a descriptive text, and an email input field.

• Newsletter signup form

Swell

A centered newsletter signup form with an eyebrow, headline, email input field, submit button, and a success message.

• Newsletter signup form

Swell

A frequently asked questions section featuring a title, introductory text, and a list of expandable accordion items. The first item is expanded, showing its answer, while the others are collapsed.

• Accordion

Swell

A dark-themed code block displaying a base URL with a copy-to-clipboard icon.

• Code block

Swell

A vertical list of filter options with custom checkbox-like indicators and icons.

• Sorting & filtering

Swell

A pill-shaped switch component used to toggle between light and dark themes. The switch is currently in the active state, displaying a moon icon to indicate dark mode is enabled.

• Theme settings

Swell

A pill-shaped toggle switch used to change the interface theme, currently showing a sun icon indicating light mode is active.

• Theme settings