Skip to main content

​
Overview

The StudioMetadata type allows you to customize the appearance and branding of the Studio UI. Configure the title, logo, theme, colors, feature visibility, and more.

​
Type Definition

export type StudioMetadata = {
  title?: string;
  logo?: string;
  favicon?: string;
  company?: {
    name?: string;
    website?: string;
    supportEmail?: string;
  };
  theme?: "dark" | "light" | "auto";
  colors?: {
    primary?: string;
    secondary?: string;
    accent?: string;
  };
  features?: {
    users?: boolean;
    sessions?: boolean;
    organizations?: boolean;
    analytics?: boolean;
    tools?: boolean;
    security?: boolean;
  };
  links?: Array<{ label: string; url: string }>;
  custom?: Record<string, any>;
};

​
Fields

​
title
string
Custom title for the Studio UI. Displayed in the browser tab and header.Example:
metadata: {
  title: "Acme Corp Auth Studio"
}
URL or path to your company logo. Displayed in the Studio header.Example:
metadata: {
  logo: "/images/logo.png"
}
​
favicon
string
URL or path to your favicon. Displayed in the browser tab.Example:
metadata: {
  favicon: "/favicon.ico"
}
​
company
object
Company information displayed in the Studio UI.Example:
metadata: {
  company: {
    name: "Acme Corporation",
    website: "https://acme.com",
    supportEmail: "[email protected]"
  }
}
​
theme
'dark' | 'light' | 'auto'
Color theme for the Studio UI.
  • "dark" - Always use dark theme
  • "light" - Always use light theme
  • "auto" - Follow system preference
Default: "dark"Example:
metadata: {
  theme: "auto"
}
​
colors
object
Custom color palette for the Studio UI.Example:
metadata: {
  colors: {
    primary: "#3B82F6",
    secondary: "#8B5CF6",
    accent: "#10B981"
  }
}
​
features
object
Control visibility of Studio features and pages. Disable features you don’t use.Example:
metadata: {
  features: {
    organizations: false, // Hide if not using organizations
    analytics: true,
    users: true,
    sessions: true,
    tools: true,
    security: true
  }
}
​
links
Array<{ label: string; url: string }>
Custom navigation links to display in the Studio UI.Example:
metadata: {
  links: [
    { label: "Documentation", url: "https://docs.acme.com" },
    { label: "Support", url: "https://support.acme.com" },
    { label: "Main App", url: "https://app.acme.com" }
  ]
}
​
custom
Record<string, any>
Custom metadata for your own use. Store any additional configuration data.Example:
metadata: {
  custom: {
    apiVersion: "v2",
    region: "us-east-1",
    customFeature: true
  }
}

​
Usage Examples

​
Basic Branding

import { defineStudioConfig } from "better-auth-studio";

export const studioConfig = defineStudioConfig({
  auth,
  metadata: {
    title: "My App Studio",
    logo: "/logo.svg",
    theme: "dark",
  },
});

​
Full Customization

export const studioConfig = defineStudioConfig({
  auth,
  metadata: {
    title: "Acme Auth Studio",
    logo: "/images/acme-logo.svg",
    favicon: "/favicon.ico",
    company: {
      name: "Acme Corporation",
      website: "https://acme.com",
      supportEmail: "[email protected]",
    },
    theme: "auto",
    colors: {
      primary: "#FF6B6B",
      secondary: "#4ECDC4",
      accent: "#FFE66D",
    },
    features: {
      users: true,
      sessions: true,
      organizations: false,
      analytics: true,
      tools: true,
      security: true,
    },
    links: [
      { label: "Documentation", url: "https://docs.acme.com" },
      { label: "API Status", url: "https://status.acme.com" },
    ],
  },
});

​
Minimal Configuration

export const studioConfig = defineStudioConfig({
  auth,
  metadata: {
    title: "Admin Dashboard",
    features: {
      organizations: false, // Disable unused features
      analytics: false,
    },
  },
});

Build docs developers (and LLMs) love

Get started for freeTalk to us