Scribe UI components examples

Scribe

A horizontal stepper indicating progress through a three-step checkout flow. The first step is currently active.

• Stepper

Scribe

A completed onboarding checklist showing a 100% progress bar and a list of completed tasks with green checkmarks.

• Progress indicator

Scribe

A horizontal row of circular color swatches under the label 'Click Target Color'. The orange swatch is currently selected, indicated by an outer ring. A hash symbol icon sits at the end of the row, likely to open a custom hex code input.

• Color picker

Scribe

A progress bar showing 40% completion, accompanied by a 'Level up on Scribe' label and a 'PRO' badge with a lightning bolt icon.

• Upgrade your plan

Scribe

A read-only input field displaying a referral link with a copy icon button.

• Click to copy

Scribe

This is a user profile dropdown menu.

• Upgrade your plan

Scribe

A user profile header displaying a large initial avatar, a role badge, the user's name, and their email address.

• Avatar

Scribe

A dark-themed dropdown menu originating from a help icon in a sidebar, displaying various support and information links.

• Dropdown menu

Scribe

A card displaying a user's profile information, including an avatar, name, email, role, activity stats, and join date.

• Card

Scribe

A document card displaying a title, metadata, and a top-right action bar. The 'more' icon is clicked, opening a dark dropdown menu with actions like Share, Move to Team, Duplicate, and Delete.

• Dropdown menu

Scribe

A list of recent user activity, showing viewed and created guides with timestamps. It includes tabs to switch between personal and team activity.

• Timeline & history

Scribe

A top navigation bar for a document view, featuring a back button, logo, user avatar, and action buttons for editing and sharing.

• Horizontal navigation