PageActions

The "Copy page" split button a docs page carries in its header.

View code

tsx

<PageActions
	markdownHref="/docs/install.md"
	labels={{
		copy: "Copy page",
		copied: "Copied",
		failed: "Could not copy the page",
		more: "More ways to use this page",
	}}
	links={[
		{ label: "View as Markdown", description: "Read this page as plain text", href: "/docs/install.md" },
		{ label: "Open in Claude", description: "Ask questions about this page", href: claudeUrl, external: true },
		{ label: "Open in ChatGPT", description: "Ask questions about this page", href: chatGptUrl, external: true },
		{ label: "Edit on GitHub", description: "Suggest a change to this page", href: sourceUrl, external: true },
	]}
/>

Demo docs sites

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { PageActions } from "@sdxc/ui/docs";

Renders the split button: the copy island, then the chevron opening a native popover menu through popovertarget, so the menu opens and closes without JavaScript.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`markdownHref`	`string`	Yes	The page's Markdown twin, fetched and copied by the main button.
`labels`	`Labels`	Yes
`links`	`Link[]`	No	The menu's entries; with none, the chevron and menu are left out.
`menuId`	`string`	No	Id shared by the menu and its trigger. @default "page-actions-menu"

Also accepts everything in Omit<TagProps<"div">, "children">.