Radial Menu Overlay

Full-screen radial navigation surface built around the notched viewport shell.

Components / Radial Menu Overlay

Layoutoverlaymenunavigation

Full-screen radial navigation surface built around the notched viewport shell.

Preview

Loading preview…

Usage

Full-screen radial navigation surface built around the notched viewport shell.

<RadialMenuOverlay
  open={open}
  onClose={() => setOpen(false)}
  items={[
    { id: "studio", label: "Studio", eyebrow: "Creative studio", body: "Launch media and site assets.", href: "#studio" },
    { id: "runtime", label: "Runtime", eyebrow: "One runtime", body: "Five workspaces keep the illusion intact.", href: "#system" },
  ]}
/>

Files

components/steez/RadialMenuOverlay.tsxcomponent

components/steez/RadialMenuOverlay.module.cssstyle

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { RadialMenuOverlay } from "@steez-ui/ui/blocks";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/radial-menu-overlay.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { RadialMenuOverlay } from "<project-root>/components/steez/RadialMenuOverlay";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/radial-menu-overlay.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Notched Viewport Frame

Bitkraft-style notched outline shell for viewport framing and overlay chrome.

Overlay Button

Compact floating control button for viewer tools and absolute-positioned UI.

Button

Primary, secondary, and danger actions with shared Steez button styling.