Supabase design examples

Supabase

Sign-in screen where the user authenticates with GitHub, SSO, or email, featuring a developer quote about the product.

• Forgot Password

Supabase

Sign-in screen where the user attempts to authenticate with email and password but encounters validation errors.

• Sign In
• Error

Supabase

Sign-in screen where the user authenticates to their enterprise account via SSO using their email, featuring a prominent customer testimonial.

• Sign In
• SSO

Supabase

Sign-up screen where the user creates a new account using email and password or GitHub OAuth, featuring a prominent customer testimonial on the right.

• Sign Up

Supabase

Verification screen where the user is prompted to check their email to confirm their new account, featuring a large customer testimonial quote.

• Verification
• Success

Supabase

Dashboard where the user views their organization's projects, currently showing an empty state with a prompt to create a new project.

• Empty State
• Dashboard

Supabase

Search overlay where the user can jump to documentation, navigate to the table editor, or trigger AI actions like asking questions or generating SQL.

• Command Palette
• AI Assistant

Supabase

Projects list page where the user has opened a modal to generate SQL statements using an AI assistant, featuring prompt suggestions categorized by tables, views, and indexes.

• AI Assistant
• AI Generation

Supabase

Projects list view with an AI modal open where the user prompts the assistant to generate SQL statements for creating a table and inserting sample data.

• AI Chat
• AI Generation

Supabase

List view where the user manages their projects, currently showing an empty state with an open popover to submit page feedback.

• Empty State
• Feedback

Supabase

Dashboard empty state where the user is prompted to create their first project, with a support popover open showing documentation and community links.

• Empty State
• Dashboard

Supabase

Form where the user configures a new database project by selecting an organization, naming the project, setting a password, choosing a region, and picking a pricing plan.

• Add & Create
• Settings