Uizard UI components examples

Uizard

A hero section for an AI design tool featuring a top banner, a navigation header, a large headline, a subheadline, an AI prompt input field with a generate button, and a partial view of the product interface below.

• Hero section

Uizard

• Toggle/Switch

Uizard

• Segmented control

Uizard

A segmented progress indicator showing 4 out of 5 steps completed, accompanied by a numeric badge.

• Progress indicator

Uizard

A toggle switch with a label and helper text to enable using a project as a template.

• Toggle/Switch

Uizard

A radio group for selecting privacy settings, with options for 'Public to organization' and 'Private to me'. Each option includes an icon.

• Checkbox & radio

Uizard

A collapsible panel section titled 'Screen Color' containing a row of circular color swatches for selection.

• Color picker

Uizard

A floating panel containing design controls for alignment, layering, layout, style, screen color, and grouping, along with a prominent call to action to save the selection as a template.

• Toolbox

Uizard

• Artificial intelligence

Uizard

A floating prompt interface for generating UI screens using AI. It includes dropdowns for configuration, a text area for the prompt, a character counter, and a primary generate button.

• Artificial intelligence

Uizard

A pill-shaped button labeled 'Use Autodesigner 1.5' with a sparkle icon, indicating an AI-powered feature.

• Artificial intelligence

Uizard

A vertical sidebar menu for a design editor, featuring a top navigation bar with project details and a main area for adding new screens via various methods like empty screens, generating screens, scanning from wireframes or screenshots, and importing from other design tools.

• Toolbox