Supabase UI components examples

Supabase

A success alert displaying a newly generated access token. It includes a success icon, a confirmation message, a warning to save the token, and a read-only input field containing the token with a copy button.

• Alert

Supabase

A settings section for selecting the interface theme, featuring a section title, a label, a select dropdown with an icon, and helper text.

• Theme settings

Supabase

A settings section for selecting the interface theme. It shows an open dropdown menu with 'Dark' currently selected.

• Theme settings

Supabase

A settings section for selecting the interface theme, featuring a dropdown menu currently set to 'Dark'.

• Theme settings

Supabase

A group of selectable chips used to gather feedback on why a user is downgrading their plan. One chip is currently selected.

• Badge

Supabase

A data table displaying a list of invoices with columns for date, amount due, invoice number, and status. Each row includes a download button and a status badge. The table includes a footer with pagination controls.

• Table

Supabase

A list displaying database usage metrics with progress bars indicating consumption against limits.

• Charts

Supabase

An inline banner informing the user of a plan limitation and prompting them to upgrade to a higher tier for increased limits.

• Upgrade your plan

Supabase

A multi-select dropdown input field displaying selected options as removable tags.

• Input tag

Supabase

A dropdown menu for filtering by HTTP method, featuring a list of checkboxes and action buttons to clear or save the selection.

• Sorting & filtering

Supabase

A log visualization interface with a modal

• Charts

Supabase

A segmented control or toggle group with three options: Status, Product, and Method, used for filtering or grouping data.

• Button group