Explore UI components examples

Explore

A simple text link displaying a URL alongside a copy icon.

• Click to copy

Explore

A card with a title, a link and a menu

• Card

Explore

A card component providing instructions for configuring a custom domain. It includes a header with the domain name and a 'Test' button, followed by a gray section containing detailed DNS setup instructions and a help link.

• Tooltip

Explore

A text input field for setting a custom subdomain, featuring an inline label and a fixed domain suffix.

• Input text

Explore

A notification item showing a user avatar, name, action, and timestamp.

• Avatar

Explore

A section for uploading cover and profile images, featuring a preview area and two file upload inputs.

• File upload input

Explore

A success toast notification confirming a post was saved.

• Notification Toast

Explore

A notification toast indicating an error state due to a free tier limit, prompting the user to upgrade to a PRO plan.

• Notification Toast

Explore

A toast notification indicating that a post link has been successfully copied to the clipboard.

• Notification Toast

Explore

A small, pill-shaped badge indicating a 'Pro' status or feature.

• Tag

Explore

A dropdown menu triggered by an icon button, offering options to add new content or organize existing content. Some options are gated behind a PRO subscription.

• Dropdown menu

Explore

A vertical list of checkbox items for selecting notification preferences. The list includes options for 'New follower', 'Appreciations', 'Comments', and 'Explore news', with the last option currently checked.

• Checkbox & radio