V7 UI components examples

V7

A dropdown menu for switching workspaces and accessing account settings. It displays the current workspace with an avatar and role, followed by options for settings, theme, help, and logging out.

• Dropdown menu

V7

A billing and usage page showing plan details and usage.

• Progress indicator

V7

A detailed pricing comparison table showing three tiers: Free, Pro, and Enterprise. It includes a toggle for monthly/annual billing and breaks down features across categories like Usage, Features, Security, Billing, and Support.

• Pricing section

V7

• Notification Toast

V7

A toast notification indicating an ongoing background process, featuring a loading spinner, a status message, and a dismiss button.

• Notification Toast

V7

This is a modal to import a CSV file and name the project.

• File upload input

V7

• File upload input

V7

A confirmation message indicating that a project ID has been copied to the clipboard.

• Notification Toast

V7

A progress bar component displaying usage limits. It shows a label, a numeric fraction representing current usage versus the total limit, and a visual progress bar.

• Progress indicator

V7

Invite user modal

• Progress indicator

V7

A progress bar component displaying current token usage against a maximum limit. It includes a label, numeric values, and a visual progress indicator.

• Progress indicator

V7

A card displaying a project with a background image, title, property count, and a more options menu.

• Card