Front UI components examples

Front

A dropdown menu used to switch between different knowledge bases. It shows the currently selected knowledge base, a list of available knowledge bases with their status, and an option to create a new one.

• Dropdown menu

Front

A comprehensive pricing section featuring a toggle for monthly/annual billing, four distinct plan cards (Starter, Growth, Scale, Premier), and a detailed feature comparison table below. The 'Growth' plan is highlighted as the current trial, and 'Scale' is marked as popular.

• Pricing section

Front

The screenshot displays an automation feature for resolving customer inquiries in front chat using AI-generated responses.

• Upgrade your plan

Front

A feature gate empty state prompting the user to upgrade to the Scale plan to enable Single Sign-On (SSO). It features a custom illustration, a plan badge, a title, a descriptive paragraph, and two call-to-action buttons.

• Empty state

Front

A section displaying a code snippet for a chat widget, complete with instructions, a copy button, and an alert box offering to email the instructions.

• Code block

Front

A notification setting with a toggle and a number input.

• Input number

Front

An inline warning alert banner indicating a pending invitation status, featuring a warning icon, descriptive text, and an action link to resend the invitation.

• Message

Front

A floating error toast notification indicating a webhook verification failure, with a link to developer documentation and a close button.

• Message

Front

A form field for inputting a URL pattern, featuring an inline popover menu that allows users to select predefined regex character types to insert into the input field.

• Tooltip

Front

• File upload input

Front

A help menu popover containing tabs for Help, Suggestions, and What's new. The active Help tab features a search bar, recommended training cards with illustrations, and links to other resources like the community and help center.

• Dropdown menu

Front

A radio group for selecting site visibility settings, with a title, description, and three options. Each option includes a label and helper text. The second option includes an info icon and a beta badge.

• Checkbox & radio