Notion UI
Documentation

Modal

Installation

pnpm add @notion-kit/modal

Usage

Create your modal

// modal.tsx
export function Modal() {
  return <div>Modal</div>;
}

Define your trigger component

// trigger.tsx
import { useModal } from "@notion-kit/modal";
import { Button } from "@notion-kit/shadcn";
 
import { Modal } from "./modal";
 
export const Trigger = () => {
  const { openModal } = useModal();
  const handleClick = () => openModal(<Modal />);
 
  return <Button onClick={handleClick}>Open</Button>;
};

Wrap your app with ModalProvider

// index.tsx
import { ModalProvider } from "@notion-kit/modal";
 
import { Trigger } from "./trigger";
 
export default function App() {
  return (
    <ModalProvider>
      <Trigger />
      {...}
    </ModalProvider>
  );
}

Examples

Basic

import { ModalProvider } from "@notion-kit/modal";
 
import { Trigger } from "./trigger";
 
export default function Basic() {
  return (
    <ModalProvider>
      <Trigger />
    </ModalProvider>
  );
}

Previous

Icon Menu

Next

Table View

On this page