Sidebar Presets

Installation

npm install pnpm add @notion-kit/sidebar

Components

Workspace Switcher

A WorkspaceSwitcher is a dropdown menu that controls workspaces and user's login state.

<WorkspaceSwitcher
  user={user}
  workspaces={workspaces}
  activeWorkspace={activeWorkspace}
/>

<WorkspaceSwitcher  user={user}  workspaces={workspaces}  activeWorkspace={activeWorkspace}/>

API Reference

Prop	Type	Default	Description
`user`*	`User`	-	Current user.
`activeWorkspace`*	`Workspace`	-	Current user.
`workspaces`*	`Workspace[]`	-	Current user.
`onSelect`	`(id: string) => void`	-	Handler that is called when a workspace is selected.
`onCreateAccount`	`() => void`	-	Handler that is called when the "Create Account" button is clicked.
`onCreateWorkspace`	`() => void`	-	Handler that is called when the "Create or Join Workspace" button is clicked.
`onLogout`	`() => void`	-	Handler that is called when the "Logout" button is clicked.

Page List

A page list is a component DocList showing a group of pages.

Document

Korean

Study list

My secret document

System flowchart

<DocList
  group="document"
  title="Document"
  pages={pages}
/>

<DocList  group="document"  title="Document"  pages={pages}/>

API Reference

Prop	Type	Default	Description
`group`*	`string`	-	The identifier of the group.
`title`*	`string`	-	The group title.
`pages`*	`Page[]`	-	Pages in this group.
`activePage`	`string \| null`	-	The active page in this group.
`defaultIcon`	`IconData`	`{ type: "lucide", src: "file" }`	The default icon of the page within this group. This is useful when a page has no icon selected.
`isLoading`	`boolean`	-	The loading state of this group. It will show a skeleton if the group is loading.
`onSelect`	`(id: string) => void`	-	Handler that is called when a page is active.
`onCreate`	`(group: string, parentId?: string) => void`	-	Handler that is called when the "Create" button is triggered in this group.
`onDuplicate`	`(id: string) => void`	-	Handler that is called when the "Duplicate" action is triggered.
`onUpdate`	`(id: string, data: UpdatePageParams) => void`	-	Handler that is called when the page data or page state is updated.

Favorite List

A FavoriteList is a group of pages that are marked as your Favorite.

Note

The FavoriteList only shows your Favorite pages that are not archived.

Favorites

Study list

<FavoriteList pages={pages} />

<FavoriteList pages={pages} />

API Reference

Prop	Type	Default	Description
`pages`*	`Page[]`	-	Pages in this group.
`activePage`	`string \| null`	-	The active page in this group.
`isLoading`	`boolean`	-	The loading state of this group. It will show a skeleton if the group is loading.
`onSelect`	`(id: string) => void`	-	Handler that is called when a page is active.
`onCreate`	`(group: string, parentId?: string) => void`	-	Handler that is called when the "Create" button is triggered in this group.
`onDuplicate`	`(id: string) => void`	-	Handler that is called when the "Duplicate" action is triggered.
`onUpdate`	`(id: string, data: UpdatePageParams) => void`	-	Handler that is called when the page data or page state is updated.

Search Command

A SearchCommand is a command menu for searching all non-archived pages.

"use client";

import { useHotkeys } from "react-hotkeys-hook";

import { ModalProvider, useModal } from "@notion-kit/modal";
import { Page } from "@notion-kit/schemas";
import { Button } from "@notion-kit/shadcn";
import { SearchCommand, usePages } from "@notion-kit/sidebar";
import { randomInt } from "@notion-kit/utils";

const getRandomTs = () =>
  randomInt(Date.UTC(2024, 1, 1), Date.UTC(2024, 10, 31));

export const data: Page[] = [
  {
    type: "document",
    id: "page1",
    title: "Korean",
    parentId: null,
    icon: {
      type: "url",
      src: "https://img.freepik.com/premium-vector/line-art-flag-language-korean-illustration-vector_490632-422.jpg",
    },
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isArchived: false,
    isFavorite: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "document",
    id: "page2",
    title: "Pronunciation",
    parentId: "page1",
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: false,
    isArchived: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "document",
    id: "page3",
    title: "Study list",
    parentId: null,
    icon: { type: "lucide", src: "book", color: "#CB912F" },
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: true,
    isArchived: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "document",
    id: "page4",
    title: "My secret document",
    icon: { type: "lucide", src: "book-check", color: "#CB912F" },
    parentId: null,
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: false,
    isArchived: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "document",
    id: "page5",
    title: "System flowchart",
    parentId: null,
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: false,
    isArchived: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "document",
    id: "page6",
    title: "Deprecated documents",
    parentId: null,
    icon: { type: "lucide", src: "book", color: "#337EA9" },
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: false,
    isArchived: true,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "private",
    id: "page7",
    title: "TODO List",
    parentId: null,
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: false,
    isArchived: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "shared",
    id: "page8",
    title: "System flowchart",
    parentId: null,
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: false,
    isArchived: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "document",
    id: "page9",
    parentId: "page3",
    title: "The High Table",
    icon: {
      type: "url",
      src: "https://cdn.iconscout.com/icon/premium/png-256-thumb/bar-table-1447763-1224177.png",
    },
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: false,
    isArchived: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
  {
    type: "document",
    id: "page10",
    parentId: "page3",
    title: "The Continental",
    icon: { type: "emoji", src: "🏠" },
    lastEditedBy: "",
    lastEditedAt: getRandomTs(),
    isFavorite: false,
    isArchived: false,
    isPublished: false,
    createdAt: Date.UTC(2023, 3, 5),
    createdBy: "",
  },
];

export default function Demo() {
  return (
    <ModalProvider>
      <Trigger />
    </ModalProvider>
  );
}

function Trigger() {
  const pages = usePages({ pages: data });
  const { openModal } = useModal();
  const openSearch = () =>
    openModal(
      <SearchCommand workspaceName="Workspace" pages={pages.visiblePages()} />,
    );
  /** Keyboard shortcut */
  useHotkeys(["meta+k", "shift+meta+k"], openSearch, { preventDefault: true });

  return (
    <Button size="md" onClick={openSearch}>
      ⌘K
    </Button>
  );
}

"use client";import { useHotkeys } from "react-hotkeys-hook";import { ModalProvider, useModal } from "@notion-kit/modal";import { Page } from "@notion-kit/schemas";import { Button } from "@notion-kit/shadcn";import { SearchCommand, usePages } from "@notion-kit/sidebar";import { randomInt } from "@notion-kit/utils";const getRandomTs = () =>  randomInt(Date.UTC(2024, 1, 1), Date.UTC(2024, 10, 31));export const data: Page[] = [  {    type: "document",    id: "page1",    title: "Korean",    parentId: null,    icon: {      type: "url",      src: "https://img.freepik.com/premium-vector/line-art-flag-language-korean-illustration-vector_490632-422.jpg",    },    lastEditedBy: "",    lastEditedAt: getRandomTs(),    isArchived: false,    isFavorite: false,    isPublished: false,    createdAt: Date.UTC(2023, 3, 5),    createdBy: "",  },  {    type: "document",    id: "page2",    title: "Pronunciation",    parentId: "page1",    lastEditedBy: "",    lastEditedAt: getRandomTs(),    isFavorite: false,    isArchived: false,    isPublished: false,    createdAt: Date.UTC(2023, 3, 5),    createdBy: "",  },  {    type: "document",    id: "page3",    title: "Study list",    parentId: null,    icon: { type: "lucide", src: "book", color: "#CB912F" },    lastEditedBy: "",    lastEditedAt: getRandomTs(),    isFavorite: true,    isArchived: false,    isPublished: false,    createdAt: Date.UTC(2023, 3, 5),    createdBy: "",  },  {    type: "document",    id: "page4",    title: "My secret document",    icon: { type: "lucide", src: "book-check", color: "#CB912F" },    parentId: null,    lastEditedBy: "",    lastEditedAt: getRandomTs(),    isFavorite: false,    isArchived: false,    isPublished: false,    createdAt: Date.UTC(2023, 3, 5),    createdBy: "",  },  {    type: "document",    id: "page5",    title: "System flowchart",    parentId: null,    lastEditedBy: "",    lastEditedAt: getRandomTs(),    isFavorite: false,    isArchived: false,    isPublished: false,    createdAt: Date.UTC(2023, 3, 5),    createdBy: "",  },  {    type: "document",    id: "page6",    title: "Deprecated documents",    parentId: null,    icon: { type: "lucide", src: "book", color: "#337EA9" },    lastEditedBy: "",    lastEditedAt: getRandomTs(),    isFavorite: false,    isArchived: true,    isPublished: false,    createdAt: Date.UTC(2023, 3, 5),    createdBy: "",  },  {    type: "private",    id: "page7",    title: "TODO List",    parentId: null,    lastEditedBy: "",    lastEditedAt: getRandomTs(),    isFavorite: false,    isArchived: false,    isPublished: false,    createdAt: Date.UTC(2023, 3, 5),    createdBy: "",  },  {    type: "shared",    id: "page8",    title: "System flowchart",    parentId: null,    lastEditedBy: "",    lastEditedAt: getRandomTs(),    isFavorite: false,    isArchived: false,    isPublished: false,    createdAt: Date.UTC(2023, 3, 5),    createdBy: "",  },  {    type: "document",    id: "page9",    parentId: "page3",    title: "The High Table",    icon: {      type: "url",      src: "https://cdn.iconscout.com/icon/premium/png-256-thumb/bar-table-1447763-1224177.png",    },    lastEditedBy: "",    lastEditedAt: getRandomTs(),    isFavorite: false,    isArchived: false,    isPublished: false,    createdAt: Date.UTC(2023, 3, 5),    createdBy: "",  },  {    type: "document",    id: "page10",    parentId: "page3",    title: "The Continental",    icon: { type: "emoji", src: "🏠" },    lastEditedBy: "",    lastEditedAt: getRandomTs(),    isFavorite: false,    isArchived: false,    isPublished: false,    createdAt: Date.UTC(2023, 3, 5),    createdBy: "",  },];export default function Demo() {  return (    <ModalProvider>      <Trigger />    </ModalProvider>  );}function Trigger() {  const pages = usePages({ pages: data });  const { openModal } = useModal();  const openSearch = () =>    openModal(      <SearchCommand workspaceName="Workspace" pages={pages.visiblePages()} />,    );  /** Keyboard shortcut */  useHotkeys(["meta+k", "shift+meta+k"], openSearch, { preventDefault: true });  return (    <Button size="md" onClick={openSearch}>      ⌘K    </Button>  );}

Note

It must be used within <ModalProvider>.
It searches only for non-archived pages.

API Reference

Prop	Type	Default	Description
`workspaceName`*	`string`	-	The name of current workspace.
`pages`*	`Page[]`	-	All your pages. But it searches only for non-archived pages.
`onSelect`	`(page: Page) => void`	-	Handler that is called when a page is selected.
`onOpenTrash`	`() => void`	-	Handler that is called when the "Open in Trash" button is clicked.

Trash Box

A TrashBox is a popover menu for searching archived pages.

<ModalProvider>
  <div className="w-[200px]">
    <TrashBox pages={pages} />
  </div>
</ModalProvider>

<ModalProvider>  <div className="w-[200px]">    <TrashBox pages={pages} />  </div></ModalProvider>

Note

It must be used within <ModalProvider>.
It searches only for archived pages.

API Reference

Prop	Type	Default	Description
`pages`*	`Page[]`	-	All your pages. But it searches only for archived pages.
`isOpen`	`boolean`	-	The (controlled) open state of the trash box. Must be used in conjunction with `onOpenChange`.
`onOpenChange`	`(open: boolean) => void`	-	Handler that is called when the open state of the trash box changes.
`onSelect`	`(page: Page) => void`	-	Handler that is called when a page is selected.
`onRestore`	`(id: string) => void`	-	Handler that is called when the "Restore" button of the page is clicked.
`onDelete`	`(page: Page) => void`	-	Handler that is called when the "Delete" button of the page is clicked.

Sidebar Presets

On this page