Settings Panel Presets

A collection of preset components in Notion settings panel.

Installation

pnpm add @notion-kit/settings-panel

Components


Sessions Table

A table to display all active sessions in the workspace.

MacBook Pro

This Device

Oct 1, 2023 at 12:00 PM
New York, USA
iPhone 14
Oct 2, 2023 at 2:30 PM
San Francisco, USA
iPad Pro
Oct 3, 2023 at 9:15 AM
Los Angeles, USA
Windows PC
Oct 4, 2023 at 6:45 PM
Chicago, USA
<SessionsTable currentSessionId={currentSessionId} data={data} />

API Reference

PropTypeDescription
data*SessionRow[]All active sessions.
currentSessionIdstringUnique identifier of the current session.
onLogout(deviceName: string, token: string) => voidHandler that is called when a session is revoked.

Connections Table

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} />

API Reference

PropTypeDescription
data*Connection[]Current connections.

Members Table

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} />

API Reference

PropTypeDescription
scopes*Set<Scope>Current scopes.
data*MemberRow[]Current members and owners.
userIdstringUnique identifier of the current user.
searchstringCurrent search string.
onUpdate(data: {id: string, memberId: string, role: Role}) => voidHandler that is called when the role of the member is changed.
onDelete(data: MemberRow) => voidHandler that is called when the member is removed.
onTeamspaceSelect(teamspaceId: string) => voidHandler that is called when the teamspace is selected.

Guests Table

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} />

API Reference

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

Invitations Table

A table to display all invitations in the workspace.

invitee1@example.com
Member
Pending
S
Shad CN
shadcn@example.com
invitee2@example.com
Workspace Owner
Canceled
S
Shad CN
shadcn@example.com
invitee3@example.com
Guest
Rejected
S
Shad CN
shadcn@example.com
<InvitationsTable data={data} scopes={scopes} />

API Reference

PropTypeDescription
scopes*Set<Scope>Current scopes.
data*InvitationRow[]Current invitations.
onCancel(id: string) => voidHandler that is called when the invitation is canceled.

Teamspaces Table

A table to display all teamspaces in the workspace.

Owners
A
Acme Lab 1
20 members • Joined
J
Jason
+2
Default
Jun 1, 2024 at 12:00 AM
B
Acme Lab 2
30 members • Joined
A
Alice
+1
Default
Jun 3, 2024 at 12:00 AM
C
Acme Lab 3
25 members • Joined
B
Bob
Default
Jun 10, 2024 at 12:00 AM
<TeamspacesTable workspace={name} data={data} />

API Reference

PropTypeDescription
workspace*stringName 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.

Plans Table

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

API Reference

PropTypeDescription
canUpgradebooleanWhether the current plan is updatable.

On this page