Resend UI components examples

Resend

A dark-themed card displaying a key performance indicator (Total Emails) alongside a bar chart showing daily volume over the last 7 days.

• Charts

Resend

A progress bar showing email usage against a quota, with current count and remaining balance.

• Progress indicator

Resend

A read-only input field displaying an obscured signing secret. It includes a success checkmark indicating it was recently copied, and a reveal icon button.

• Click to copy

Resend

A read-only input field displaying a masked signing secret, with icons to copy the value or reveal it.

• Click to copy

Resend

A form section for selecting API key permissions and domain scope. It includes a radio-style list for access level and a dropdown for domain selection.

• Input select

Resend

A dark-themed data table displaying API log entries. It includes columns for Endpoint, Status, Method, and Created time, with a pagination indicator at the bottom.

• Table

Resend

A warning alert banner informing the user that DNS records verification is in progress.

• Alert

Resend

An informational alert box providing instructions on how to configure DNS settings.

• Alert

Resend

A settings section containing a title, a detailed description explaining the feature, and a toggle switch to enable or disable it.

• Toggle/Switch

Resend

A read-only input field displaying a shareable URL with a copy-to-clipboard icon button.

• Click to copy

Resend

A small, rounded badge indicating a 'Delivered' status with green text on a dark green background.

• Badge

Resend

A success toast notification indicating that an email has been sent.

• Notification Toast