Clerk UI components examples

Clerk

A form section for adding a phone number, featuring a country code selector and an input field, enclosed within a card layout.

• Input number

Clerk

Email verification modal

• Input code

Clerk

Email verification modal

• Input code

Clerk

A user account dropdown menu

• Dropdown menu

Clerk

A horizontal banner displaying a usage limit and a call to action to upgrade. It features a circular progress indicator showing current usage against the limit.

• Progress indicator

Clerk

A form card for inviting new members to an organization. It includes a multi-email input field with tag-like chips for entered addresses, a role selection dropdown, and action buttons to send invitations or cancel.

• Checkbox & radio

Clerk

• Tabs

Clerk

A form card for inviting new members by email. It includes a textarea for entering multiple email addresses, a role selection dropdown, and action buttons to cancel or send the invitations.

• Input tag

Clerk

A breadcrumb navigation component where each segment acts as a dropdown selector. It displays the current account, project, and environment hierarchy.

• Breadcrumb

Clerk

A dropdown menu with a selected item and an action item

• Dropdown menu

Clerk

• Checkbox & radio

Clerk

• Upgrade your plan