Documentation

Settings Panel

A composable, themeable and customizable settings panel.

Account
Workspace
Features
Integrations
Admin
Access & billing

Preferences

Appearance

Customize how Notion looks on your device.

Language & Time

Language

Change the language used in the user interface.

Start week on Monday

This will change how all calendars in your app look.

Set timezone automatically using your location

Reminders, notifications and emails are delivered based on your time zone.

Timezone

Current timezone setting.

Desktop App

Open on start

Choose what to show when Notion starts or when you switch workspaces.

Open links in desktop app

You must have the macOS app installed

Privacy

Cookie settings

Customize cookies. See Cookie Notice for details.

Show my view history

People with edit or full access will be able to see when you've viewed a page. Leran more.

Profile discoverability

Users with your email can see your name and profile picture when inviting you to a new workspace. Learn more.

Supported Features

  • Account settings
    • Update/delete account
    • Change password
    • Device sessions
    • Passkeys management
    • Link social accounts
  • Theme select
  • Localization support for EN, DE, ES
  • Timezone support
  • Workspace settings
    • Update/delete/leave workspace
    • Members & scopes management
    • Teamspaces management
  • Billing
    • Payment method, billing address, billing email
    • Plan upgrade / change
    • Stripe integration

Installation

pnpm add @notion-kit/settings-panel

Anatomy

<SettingsProvider adapters={adapters}>
  <SettingsSidebar>
    <SettingsSidebarGroup>
      <SettingsSidebarTitle>{/* Your sidebar title */}</SettingsSidebarTitle>
      <SettingsTab />
      <SettingsTab />
      <SettingsTab />
    </SettingsSidebarGroup>
  </SettingsSidebar>
  <SettingsContent>
    <SettingsSection>
      <SettingsRule>{/* Your settings rule 1 */}</SettingsRule>
      <SettingsRule>{/* Your settings rule 2 */}</SettingsRule>
      <SettingsRule>{/* Your settings rule 3 */}</SettingsRule>
    </SettingsSection>
    <SettingsSection>
      <SettingsRule>{/* Your settings rule 4 */}</SettingsRule>
      <SettingsRule>{/* Your settings rule 5 */}</SettingsRule>
    </SettingsSection>
  </SettingsContent>
</SettingsProvider>

Examples

Notion Settings Panel

Account
Workspace
Features
Integrations
Admin
Access & billing

Preferences

Appearance

Customize how Notion looks on your device.

Language & Time

Language

Change the language used in the user interface.

Start week on Monday

This will change how all calendars in your app look.

Set timezone automatically using your location

Reminders, notifications and emails are delivered based on your time zone.

Timezone

Current timezone setting.

Desktop App

Open on start

Choose what to show when Notion starts or when you switch workspaces.

Open links in desktop app

You must have the macOS app installed

Privacy

Cookie settings

Customize cookies. See Cookie Notice for details.

Show my view history

People with edit or full access will be able to see when you've viewed a page. Leran more.

Profile discoverability

Users with your email can see your name and profile picture when inviting you to a new workspace. Learn more.

<SettingsProvider adapters={adapters}>  <SettingsPanel>    <SettingsSidebar>      <SettingsSidebarPreset tab={tab} onTabChange={setTab} />    </SettingsSidebar>    <SettingsContent>      <SettingsBodyPreset tab={tab} onTabChange={setTab} />    </SettingsContent>  </SettingsPanel></SettingsProvider>

API Reference

SettingsProvider

A provider that supplies adapters for each settings domain.

PropTypeDescription
adapters*SettingsAdaptersDomain-specific adapter objects for each settings group.

SettingsAdapters

Each adapter is optional; only include the ones your application supports.

PropTypeDescription
accountAccountAdapterAccount management.
sessionsSessionsAdapterDevice session management.
passkeysPasskeysAdapterPasskey management.
connectionsConnectionsAdapterSocial connections management.
workspaceWorkspaceAdapterWorkspace settings.
peoplePeopleAdapterMember management.
invitationsInvitationsAdapterInvitation management.
teamspacesTeamspacesAdapterTeamspace management.
billingBillingAdapterBilling and subscription.
uploadFile(file: File) => Promise<void>File upload handler.

Account Adapter

MethodTypeDescription
getAll*() => Promise<AccountStore>Retrieve the account data.
update*(data: Partial<Omit<AccountStore, "id">>) => Promise<void>Update account fields.
delete*(data: { accountId: string; email: string }) => Promise<void>Delete the account.
sendEmailVerification*(email: string) => Promise<void>Send email verification.
changePassword*(data: { newPassword: string; currentPassword: string }) => Promise<void>Change the password.
setPassword(newPassword: string) => Promise<void>Set password (for OAuth-only accounts).

Sessions Adapter

MethodTypeDescription
getAll*() => Promise<SessionRow[]>Retrieve all active sessions.
delete*(token: string) => Promise<void>Revoke a specific session.
deleteAll*() => Promise<void>Revoke all sessions except current.

Passkeys Adapter

MethodTypeDescription
getAll*() => Promise<Passkey[]>Retrieve all passkeys.
add*() => Promise<boolean>Add a new passkey. Returns success.
update*(data: { id: string; name: string }) => Promise<void>Rename a passkey.
delete*(id: string) => Promise<void>Delete a passkey.

Connections Adapter

MethodTypeDescription
getAll*() => Promise<Connection[]>Retrieve all connections.
add*(strategy: ConnectionStrategy) => Promise<void>Add a new connection.
delete*(connection: Connection) => Promise<void>Remove a connection.

Workspace Adapter

MethodTypeDescription
getAll*() => Promise<WorkspaceStore>Retrieve workspace data.
update*(data: Partial<Omit<WorkspaceStore, "id">>) => Promise<void>Update workspace.
delete*(id: string) => Promise<void>Delete workspace.
leave*(id: string) => Promise<void>Leave workspace.
resetLink*() => Promise<void>Reset the invite link.

People Adapter

MethodTypeDescription
getAll*() => Promise<Memberships>Retrieve all members.
update*(data: { id: string; memberId: string; role: Role }) => Promise<void>Update a member's role.
delete*(data: { id: string; memberId: string }) => Promise<void>Remove a member.

Invitations Adapter

MethodTypeDescription
getAll*() => Promise<Invitations>Retrieve all invitations.
add*(data: { emails: string[]; role: Role }) => Promise<void>Send invitations.
cancel*(invitationId: string) => Promise<void>Cancel an invitation.

Teamspaces Adapter

MethodTypeDescription
getAll*() => Promise<Teamspaces>Retrieve all teamspaces.
add*(data: { name: string; icon: IconData; description?: string; permission: TeamspacePermission }) => Promise<void>Create a teamspace.
update*(data: { id: string; name?: string; icon?: IconData; description?: string; permission?: TeamspacePermission }) => Promise<void>Update a teamspace.
delete*(teamspaceId: string) => Promise<void>Delete a teamspace.
leave*(teamspaceId: string) => Promise<void>Leave a teamspace.
addMembers*(data: { teamspaceId: string; userIds: string[]; role: TeamspaceRole }) => Promise<void>Add members.
updateMember*(data: { teamspaceId: string; userId: string; role: TeamspaceRole }) => Promise<void>Update a member's role.
deleteMember*(data: { teamspaceId: string; userId: string }) => Promise<void>Remove a member.

Billing Adapter

Prop/MethodTypeDescription
stripePublishableKeystringStripe publishable key for Elements.
getAll*() => Promise<BillingStore>Retrieve billing data.
upgrade*(plan: Plan, annual: boolean) => Promise<void>Upgrade the plan.
changePlan*(plan: Plan) => Promise<void>Change the plan.
editMethod*() => Promise<void>Edit payment method.
editBilledTo*(address: BillingAddress & { businessName: string }) => Promise<void>Edit billing address.
editEmail*(email: string) => Promise<void>Edit billing email.
toggleInvoiceEmails(checked: boolean) => voidToggle invoice email receipts.
editVat() => voidEdit VAT number.
viewInvoice() => voidView invoices.

See schema definitions for:

SettingsPanel

The portal of the entire settings panel. A SettingsPanel extends the <div> element.

SettingsSidebar

A SettingsSidebar extends the <div> element.

We offer some components for layout in sidebar:

SettingsSidebarGroup

A SettingsSidebarGroup extends the <div> element.

SettingsSidebarTitle

A SettingsSidebarTitle extends the <div> element.

SettingsTab

PropTypeDescription
name*stringName of the tab.
Icon*React.ReactNodeIcon of the tab.
isActive*booleanWhether the tab is active.
onClick() => voidHandler that is called when the tab is clicked.

SettingsContent

A SettingsContent extends the <div> element.

We offer some components for layout in settings content:

SettingsSection

PropTypeDefaultDescription
title*string-Name of the section.
childrenReact.ReactNode-Section content.
hideSeparatorbooleanfalseWhether the separator below the title should be hidden.

SettingsRule

PropTypeDefaultDescription
title*string-Name of the rule.
description\React.ReactNode-Description of the rule.
childrenReact.ReactNode-Section content.
planstring-Plan information for the rule.

Navbar Presets

A collection of preset components in Notion navbar.

Settings Objects

Next Page

On this page

Supported FeaturesInstallationAnatomyExamplesNotion Settings PanelAPI ReferenceSettingsProviderSettingsAdaptersAccount AdapterSessions AdapterPasskeys AdapterConnections AdapterWorkspace AdapterPeople AdapterInvitations AdapterTeamspaces AdapterBilling AdapterSettingsPanelSettingsSidebarSettingsSidebarGroupSettingsSidebarTitleSettingsTabSettingsContentSettingsSectionSettingsRule