Docscn

Page actions

Copy a page as Markdown, or open it in GitHub and AI tools.

Installation

npx shadcn@latest add @docscn/page-actions

Usage

Both actions need a route that serves the page's Markdown. With Fumadocs MDX, enable includeProcessedMarkdown and add a route as in the Fumadocs docs. Then add the actions to your page:

app/docs/[[...slug]]/page.tsx
import {
  MarkdownCopyButton,
  ViewOptionsPopover,
} from "@/components/docs/layouts/docs/page";

<div className="flex flex-row items-center gap-2 border-b pb-6">
  <MarkdownCopyButton markdownUrl={markdownUrl} />
  <ViewOptionsPopover
    markdownUrl={markdownUrl}
    githubUrl={`https://github.com/user/repo/blob/main/content/docs/${page.path}`}
  />
</div>;
ComponentPropsDescription
MarkdownCopyButtonmarkdownUrlCopies the page's Markdown to the clipboard.
ViewOptionsPopovermarkdownUrl?, githubUrl?, pageUrl?A popover with links to the source on GitHub, the Markdown, and ChatGPT, Claude, Cursor and Scira with a prompt about the page.

Both are built on shadcn/ui button and popover, and are also exported from components/docs/layouts/shared/page-actions.

Table of contents

The table of contents that follows the headings in view.

Search dialog

Search your docs from a dialog opened with a keyboard shortcut.

On this page

InstallationUsage