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

Installation

pnpm add @notion-kit/settings-panel

Anatomy

<SettingsProvider>
  <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

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

API Reference

SettingsProvider

A provider that provides settings data and actions within a workspace.

Prop	Type	Description
`settings`*	`SettingsStore`	Settings data.
`updateFile`	`(file: File) => Promise<void>`	Handler that is called when a file is uploaded.
`account.update`	`(data: Partial<Omit<AccountStore, "id">>) => Promise<void>`	Handler that is called when an account is updated.
`account.delete`	`(data: { accountId: string, email: string }) => Promise<void>`	Handler that is called when an account is deleted.
`account.sendEmailVerification`	`(email: string) => Promise<void>`	Handler that is called when an email verification is sent.
`account.changePassword`	`(data: { newPassword: string, currentPassword: string }) => Promise<void>`	Handler that is called when the password is changed.
`account.setPassword`	`(newPassword: string) => Promise<void>`	Handler that is called when the password is set.
`sessions.getAll`	`() => Promise<SessionRow[]>`	Handler that is called to retrieve all device sessions of the account
`sessions.delete`	`(token: string) => Promise<void>`	Handler that is called when a specific session is revoked.
`sessions.deleteAll`	`() => Promise<void>`	Handler that is called when all (except current) sessions are revoked.
`passkeys.getAll`	`() => Promise<Passkey[]>`	Handler that is called to retrieve user's passkeys.
`passkeys.add`	`() => Promise<boolean>`	Handler that is called when a new passkey is added. Returns `true` if successful.
`passkeys.update`	`(data: { id: string; name: string }) => Promise<void>`	Handler that is called when a passkey is updated.
`passkeys.delete`	`(id: string) => Promise<void>`	Handler that is called when a passkey is deleted
`workspace.update`	`(workspaceId: string, data: Partial<Omit<WorkspaceStore, "id">>) => Promise<void>`	Handler that is called when a workspace is updated.
`workspace.delete`	`(workspaceId: string) => Promise<void>`	Handler that is called when a workspace is deleted.
`workspace.leave`	`(workspaceId: string) => Promise<void>`	Handler that is called when a user leaves a workspace.
`workspace.resetLink`	`() => Promise<void>`	Handler that is called when the workspace invite link is reset.
`connections.getAll`	`() => Promise<Connection[]>`	Handler that is called to retrieve user's connection data.
`connections.add`	`(strategy: ConnectionStrategy) => Promise<void>`	Handler that is called when a new connection is created.
`connections.delete`	`(connection: Connection) => Promise<void>`	Handler that is called when a connection is removed.
`people.getAll`	`() => Promise<Memberships>`	Handler that is called to retrieve all members of the workspace.
`people.update`	`(data: {id: string, memberId: string, role: Role}) => Promise<void>`	Handler that is called when a member's role is updated.
`people.delete`	`(data: {id: string, memberId: string}) => Promise<void>`	Handler that is called when a member is removed.
`invitations.getAll`	`() => Promise<Invitations>`	Handler that is called to retrieve all invitations for the workspace.
`invitations.add`	`(data: {emails: string[], role: Role}) => Promise<void>`	Handler that is called when inviting new members to workspace.
`invitations.cancel`	`(invitationId: string) => Promise<void>`	Handler that is called when an invitation is canceled.
`teamspaces.getAll`	`() => Promise<Teamspaces>`	Handler that is called when retrieving all teamspaces.
`teamspaces.add`	`(data: {name: string, icon: IconData, description?: string, permission: TeamspacePermission}) => Promise<void>`	Handler that is called when a new teamspace is created.
`teamspaces.update`	`(data: {id: string, name: string, icon?: IconData, description?: string, permission?: TeamspacePermission}) => Promise<void>`	Handler that is called when a teamspace is updated.
`teamspaces.delete`	`(teamspaceId: string) => Promise<void>`	Handler that is called when a teamspace is deleted.
`teamspaces.leave`	`(teamspaceId: string) => Promise<void>`	Handler that is called when a user leaves a teamspace.
`teamspaces.addMembers`	`(data: {teamspaceId: string, userIds: string[], role: TeamspaceRole}) => Promise<void>`	Handler that is called when members are added to a teamspace.
`teamspaces.updateMember`	`(data: {teamspaceId: string, userId: string, role: TeamspaceRole}) => Promise<void>`	Handler that is called when a member's role is updated in a teamspace.
`teamspaces.deleteMember`	`(data: {teamspaceId: string, userId: string}) => Promise<void>`	Handler that is called when a member is removed from a teamspace.

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.

SettingsSidebarTitle

A SettingsSidebarTitle extends the <div> element.

SettingsTab

Prop	Type	Description
`name`*	`string`	Name of the tab.
`Icon`*	`React.ReactNode`	Icon of the tab.
`isActive`*	`boolean`	Whether the tab is active.
`onClick`	`() => void`	Handler 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

Prop	Type	Default	Description
`title`*	`string`	-	Name of the section.
`children`	`React.ReactNode`	-	Section content.
`hideSeparator`	`boolean`	`false`	Whether the separator below the title should be hidden.

SettingsRule

Prop	Type	Default	Description
`title`*	`string`	-	Name of the rule.
`description`\	`React.ReactNode`	-	Description of the rule.
`children`	`React.ReactNode`	-	Section content.
`plan`	`string`	-	Plan information for the rule.

Settings Panel

On this page