Flora UI components examples

Flora

A user interface displaying editor seat allocation with a quantity selector.

• Progress indicator

Flora

Display of monthly usage statistics with a progress bar indicating 100% usage.

• Progress indicator

Flora

An empty state screen for a trash or recently deleted projects section, featuring a central icon, a main heading, a descriptive subtitle, and a call-to-action button.

• Empty state

Flora

A vertical navigation sidebar displaying user profile, main menu items, project lists, workspace categories, and utility actions with a usage indicator.

• Vertical navigation

Flora

• Input code

Flora

A dark mode application interface featuring a vertical navigation bar, a header with a title and user name, and a usage indicator at the bottom.

• Vertical navigation

Flora

A top navigation bar with a back button and a persistent alert banner indicating low account credits with options to get more or upgrade.

• Upgrade your plan

Flora

A user interface for setting access permissions for a technique, offering community, workspace, and private options.

• Radio button

Flora

Project sharing and access management modal

• Dropdown menu

Flora

A modal window displaying a library of design techniques and tools, categorized for brand and visual design and product visualization, with options to search, browse, and publish a workflow.

• Modal

Flora

A user interface displaying two toggle settings with information icons.

• Toggle/Switch

Flora

A dark mode interface displaying a dropdown menu for model selection and a list of providers, alongside a separate popover showing different model options with their details.

• Dropdown menu