Documentation

Settings Panel

A composable, themeable and customizable settings panel.

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
  • Custom emoji management
  • Workspace icon upload

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

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.
emojiEmojiAdapterCustom emoji 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.

Emoji Adapter

MethodTypeDescription
getAll*() => Promise<Emojis>Retrieve all emojis.
add*(data: { name: string; file: File }) => Promise<void>Add a custom emoji.
update*(data: { id: string; name?: string; file?: File }) => Promise<void>Update a custom emoji.
delete*(id: string) => Promise<void>Delete a custom emoji.

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 AdapterEmoji AdapterBilling AdapterSettingsPanelSettingsSidebarSettingsSidebarGroupSettingsSidebarTitleSettingsTabSettingsContentSettingsSectionSettingsRule