Skip to main content

Multi-Tenant Settings & White-Label UI Builder

Design a multi-tenant settings UI with tenant switching, white-label branding, feature flags and audit logs for SaaS platforms.

Fill in the placeholders

Edit the values, then copy your finished prompt.

Your Prompt
prompt.txt
Design the multi-tenant settings and white-label configuration interface for CloudDesk, a customer support platform.

**Multi-tenancy model:**
- Tenant isolation: shared database with tenant_id column, separate schemas for enterprise
- Tenant hierarchy: Organization > Workspace > Team (3 levels)
- White-label depth: full white-label: custom domain, logo, colors, email sender, login page
- Framework: Next.js + Tailwind + Radix UI

**Design the following interfaces:**

1. **Tenant Switcher:**
   - Position: top-left of navigation or user menu dropdown
   - Current tenant display: logo thumbnail + name + role badge
   - Switcher dropdown: search + recent tenants + "Create new organization" CTA
   - Visual indicator of active tenant (color accent or persistent banner)
   - Keyboard shortcut for quick switching (Cmd+K style)
   - Remember last-active tenant per browser session

2. **Organization Settings Dashboard:**
   - **General:** Org name, slug/subdomain, logo upload, timezone, language
   - **Billing:** Current plan, usage meters, upgrade/downgrade, payment methods, invoices
   - **Members:** Invite flow (email/link), role assignment, pending invitations, deactivation
   - **Security:** SSO/SAML configuration, 2FA enforcement policy, session timeout, IP allowlist
   - **API:** API key management (create, rotate, revoke), webhook configuration, usage logs
   - Settings navigation: vertical tabs on desktop, horizontal scroll on mobile

3. **White-Label Branding Studio:**
   - **Colors:** Primary, secondary, accent color pickers with live preview pane
   - **Logo:** Logo upload with size constraints, favicon, email header logo
   - **Typography:** Font selection from approved list (or custom font upload on enterprise tier)
   - **Custom Domain:** Domain verification flow (DNS CNAME), SSL certificate status
   - **Email Templates:** From name, reply-to, email footer customization
   - **Login Page:** Background image/color, custom welcome message, terms of service link
   - Live preview panel showing changes in real-time (split-screen: settings left, preview right)
   - "Reset to defaults" with confirmation dialog

4. **Feature Flags & Plan Gating:**
   - Feature flag matrix: features times plans (Free, Pro, Enterprise)
   - Per-tenant overrides (grant beta access, extend trial features)
   - Graceful degradation UI: locked feature with upgrade prompt (not hidden)
   - Usage-based limits: progress bars showing current vs. limit (e.g., "4/10 projects used")
   - Limit-approaching warnings and upgrade nudges

5. **Audit Log:**
   - Who changed what setting, when, with before/after values
   - Filterable by: member, action type, date range, setting category
   - Exportable as CSV for compliance
   - Retention period configuration

6. **Next.js + Tailwind + Radix UI Implementation:**
   - Theme provider component that applies tenant branding via CSS custom properties
   - Tenant context hook/composable for accessing current tenant throughout the app
   - Settings form with auto-save (debounced) and explicit save button option
   - Role-based UI: show/hide settings sections based on user permissions

Every setting change should feel safe — show what will change, who it affects, and offer undo where possible.

What this prompt does

This prompt designs the multi-tenant settings and white-label configuration interface for your SaaS platform. You describe [product_name], [product_type], the [isolation_model], [tenant_hierarchy], [white_label_level], and [framework], and it lays out a tenant switcher, an organization settings dashboard, a white-label branding studio, feature flags and plan gating, an audit log, and [framework] implementation patterns.

The structure works because multi-tenancy and white-labeling touch many surfaces that must stay coherent — switching tenants, applying per-tenant branding, gating features by plan, and logging every change. The prompt maps all of it before you touch the theme provider or tenant-context code. It ties branding depth to your [white_label_level] (just colors, or full custom-domain and email customization) and grounds the architecture in your [isolation_model], so the design matches how your data is actually partitioned.

When to use it

  • You're building a multi-tenant SaaS and need the settings and tenant-switching UX mapped before coding.
  • A client wants to resell your platform under partner brands and needs white-label depth defined.
  • You need a tenant switcher with search, recent tenants, and a clear active-tenant indicator.
  • You're designing plan gating and feature flags with graceful upgrade prompts, not hidden features.
  • You need an audit log of setting changes with before/after values for compliance.
  • You want [framework] patterns for a theme provider and tenant-context hook driven by CSS variables.

Example output

You get a full interface design: a tenant switcher with logo, role badge, search, and a keyboard shortcut; an organization settings dashboard (General, Billing, Members, Security, API) with vertical-tab navigation; a white-label branding studio with color pickers, logo upload, custom-domain verification, and a live split-screen preview scoped to your [white_label_level]; a feature-flag matrix of features-by-plans with per-tenant overrides and usage meters; an exportable audit log; and [framework] implementation notes for a CSS-variable theme provider, tenant-context hook, and role-based UI.

Pro tips

  • Describe [isolation_model] accurately (shared DB with tenant_id vs. separate schemas); it shapes the whole architecture.
  • Set [white_label_level] precisely — colors-only and full custom-domain branding are very different builds.
  • Spell out [tenant_hierarchy] (Org > Workspace > Team) so the switcher and settings scope correctly.
  • Use the feature-flag matrix to plan plan-gating early; show locked features with upgrade prompts rather than hiding them.
  • Don't skip the audit log; before/after values on setting changes are often a compliance requirement.
  • Match [framework] to your stack so the theme-provider and tenant-context patterns are directly usable.

Frequently Asked Questions

Does it address tenant data isolation?
It designs the UI and architecture around whatever you specify in `[isolation_model]` — shared database with a tenant_id column, separate schemas, or a hybrid. The prompt focuses on the settings and branding interfaces; the actual data partitioning is your backend's responsibility to enforce.
How deep can the white-labeling go?
As deep as you set in `[white_label_level]`. That ranges from just custom colors and logo up to full white-label with custom domains, email sender customization, and a branded login page, each with a live preview pane in the branding studio.
Does it include feature flags and plan gating?
Yes. It designs a feature-flag matrix of features against plans (Free, Pro, Enterprise) with per-tenant overrides for beta access or extended trials, plus usage meters and upgrade nudges. Locked features show an upgrade prompt rather than being hidden entirely.
Will it produce the theme-provider code?
It provides implementation patterns for your `[framework]` — a theme provider that applies tenant branding via CSS custom properties, a tenant-context hook, and role-based UI logic. Treat these as a tested-against starting point rather than drop-in production code.
Engr Mejba Ahmed

Need this built for real?

Engr Mejba Ahmed

AI Developer · Software Engineer

I'm Mejba — I design and ship production AI systems, automations, and full-stack apps. If you want this turned into a working solution for your team, let's talk.

More in Tech & SaaS UI Prompts

Engr Mejba Ahmed

Engr Mejba Ahmed

AI assistant · trained on my work

👋

Hey there!

Quick Actions

WhatsApp Direct line to me

Chat on WhatsApp

+880 1723 741224 · Replies within the hour on working days

Popular Questions

Engr Mejba Ahmed is connected
Engr Mejba Ahmed is typing...
Engr Mejba Ahmed avatar

✉ Want me to follow up? Drop your email

Engr Mejba Ahmed avatar

📞 Connect Directly

Choose how you'd like to reach me

WhatsApp

+880 1723 741224

Email

mejba.13@gmail.com

✓ Details sent! I'll get back to you shortly.

Powered by OpenAI

335+

Blog Posts

25

AI Courses

63

Projects

Services & Expertise

Pricing & Process

Learning & Resources

Connect & Support