Settings Panel Presets

Installation

npm install pnpm add @notion-kit/settings-panel

A table to display all active sessions in the workspace.

<SessionsTable currentSessionId={currentSessionId} data={data} />

<SessionsTable currentSessionId={currentSessionId} data={data} />

Prop	Type	Description
`data`*	`SessionRow[]`	All active sessions.
`currentSessionId`	`string`	Unique identifier of the current session.
`onLogout`	`(deviceName: string, token: string) => void`	Handler that is called when a session is revoked.

A table to display all established connections.

Connection	Access
s Slack steeeee@example.com	Can preview links
g Github (Workspace) steeeee0913	Can preview linksCan content
j Jira steeeee@example.com	Can preview links and sync databases

<ConnectionsTable data={connections} />

<ConnectionsTable data={connections} />

Prop	Type	Description
`data`*	`Connection[]`	Current connections.

A table to display all members (except guests) in the workspace.

	Teamspaces	Groups
J John Wick john-wick@example.com		None
S ShadCN shadcn@example.com		None
G Gopher gopher@example.com		None

<MembersTable data={data} scopes={scopes} />

<MembersTable data={data} scopes={scopes} />

Prop	Type	Description
`scopes`*	`Set<Scope>`	Current scopes.
`data`*	`MemberRow[]`	Current members and owners.
`userId`	`string`	Unique identifier of the current user.
`search`	`string`	Current search string.
`onUpdate`	`(data: {id: string, memberId: string, role: Role}) => void`	Handler that is called when the role of the member is changed.
`onDelete`	`(data: MemberRow) => void`	Handler that is called when the member is removed.
`onTeamspaceSelect`	`(teamspaceId: string) => void`	Handler that is called when the teamspace is selected.

A table to display all guests in the workspace.

	Access
J John Wick john-wick@example.com
S ShadCN shadcn@example.com
G Gopher gopher@example.com

<GuestsTable data={data} scopes={scopes} />

<GuestsTable data={data} scopes={scopes} />

Prop	Type	Description
`scopes`*	`Set<Scope>`	Current scopes.
`data`*	`GuestRow[]`	Current guests.
`search`	`string`	Current search string.
`onUpdate`	`(data: {id: string, memberId: string, role: Role}) => void`	Handler that is called when the role of the guest is changed.
`onDelete`	`(data: GuestRow) => void`	Handler that is called when the guest is removed.

A table to display all invitations in the workspace.

<InvitationsTable data={data} scopes={scopes} />

<InvitationsTable data={data} scopes={scopes} />

Prop	Type	Description
`scopes`*	`Set<Scope>`	Current scopes.
`data`*	`InvitationRow[]`	Current invitations.
`onCancel`	`(id: string) => void`	Handler that is called when the invitation is canceled.

A table to display all teamspaces in the workspace.

<TeamspacesTable workspace={name} data={data} />

<TeamspacesTable workspace={name} data={data} />

Prop	Type	Description
`workspace`*	`string`	Name of the current workspace.
`data`*	`TeamspaceRow[]`	Current teamspaces.
`onRowSelect`	`(teamspace: TeamspaceRow) => void \| Promise<void>`	Handler that is called when the teamspace is selected.
`onUpdate`	`(data: {id: string, name?: string, icon?: IconData, description?: string, permission?: TeamspacePermission}) => void \| Promise<void>`	Handler that is called when the teamspace is updated.
`onArchive`	`(teamspace: TeamspaceRow) => void \| Promise<void>`	Handler that is called when the teamspace is archived.
`onLeave`	`(teamspace: TeamspaceRow) => void \| Promise<void>`	Handler that is called when the user leaves the teamspace.

A table to display all possible plans and their corresponding features.

	Free $0 per member / month	Plus $10 per member / month billed annually $12 billed monthly	Business $15 per member / month billed annually $18 billed monthly	Enterprise Contact Sales for pricing
Highlights	· Up to 10 guests · 7 day page history · 70+ integrations	· Up to 100 guests · 30 day page history · Unlimited blocks · Unlimited file uploads · Unlimited charts	· Up to 250 guests · 90 day page history · Private teamspaces · SAML SSO	· Custom guest limits · User provisioning · Workspace analytics · Audit log · Advanced security

<PlansTable />

<PlansTable />

Prop	Type	Description
`canUpgrade`	`boolean`	Whether the current plan is updatable.