Substack UI components examples

Substack

A dark tooltip pointing to a help icon, explaining the source of the recommendations.

• Tooltip

Substack

A read-only input field displaying a referral link with a prominent button to copy the link to the clipboard.

• Click to copy

Substack

A read-only input field displaying an RSS feed URL, accompanied by a 'Copy' button.

• Click to copy

Substack

A read-only input field displaying a URL with an attached button to copy the link to the clipboard. It includes a title and helper text with a reset link.

• Click to copy

Substack

• File upload input

Substack

A card prompting the user to insert a referral button into their newsletter draft.

• Tips

Substack

A vertical checklist guiding a new user through the setup process, featuring a progress bar, completed steps, pending steps, and a primary call to action.

• Stepper

Substack

A circular avatar placeholder with an overlapping add button, used to upload a profile picture.

• File upload input

Substack

A text input field for choosing a custom subdomain, showing a success state with a green checkmark icon.

• Input text

Substack

A grid of selectable tags representing various topics or interests, used for personalization during onboarding.

• Badge

Substack

A list item displaying a publication's avatar, title, author, and a short description, with a checked checkbox indicating it is selected.

• Checkbox & radio

Substack

A menu item or list item used to toggle dark mode, featuring a moon icon and text label.

• Theme settings