Context Menu

Samuel Breznjak

External demo

Installation

No MCP yet? Connect your agent.

Context Menu

Opens a neobrutalist action menu from a right-click or long press.

Integration notes

Apply one complete upstream styling palette before adding components. This source uses Base UI; popup components need the application's root wrapper to establish the portal stacking context described by the collection guide.

Keep the host project's aliases and component placement conventions. Preserve the upstream interaction behavior and accessibility attributes when adapting the styling.

Agent guide

Integrate Neobrutalism ComponentsFrom the collection

Integrate Neobrutalism Components

This collection delivers source through the publisher's public shadcn registry. The components target React, Tailwind CSS v4, and Base UI. Apply one complete theme before adding components. Do not merge several palette items into the same CSS variable scope.

Start with a theme

For a new shadcn project, initialize with the chosen theme item. For an existing project, add it. A theme item supplies the palette, design tokens, global rules, tw-animate-css, class-variance-authority, lucide-react, and the Button dependency.

The collection includes every public palette install unit:

  • Monochromatic: amber, blue, cyan, emerald, fuchsia, green, indigo, lime, orange, pink, purple, red, rose, sky, teal, violet, yellow.
  • Duotone: amber, cyan, emerald, fuchsia, green, lime, orange, red, rose, sky, teal, violet, yellow.

The default upstream palette is blue. A palette is a complete choice, not an accent to layer over another palette.

Required Tailwind and CSS contract

Keep @import "tailwindcss" and @import "tw-animate-css". The theme maps these variables through @theme inline:

  • Colors: --main, --background, --secondary-background, --foreground, --main-foreground, --border, --ring, --overlay, and --chart-1 through --chart-5.
  • Geometry: --border-radius, exposed as --radius-base.
  • Shadows and movement: --box-shadow-x, --box-shadow-y, --reverse-box-shadow-x, --reverse-box-shadow-y, and --shadow.
  • Typography: --font-weight-base and --font-weight-heading.
  • Motion: --animate-marquee, --animate-marquee2, and their matching keyframes.

Keep the base body and heading font-weight rules, plus the .scrollbar track and thumb rules installed by the style. Components refer to utilities such as bg-main, bg-secondary-background, rounded-base, shadow-shadow, font-base, and font-heading; replacing the variables without preserving those mappings breaks the look.

The public style payloads define one light variable set. They do not include a dark-mode variable set. Add a dark theme only as an intentional project adaptation, with contrast checked across borders, text, controls, and charts.

Fonts

The default is DM Sans. The publisher's styling surface supports these Google Fonts and weights:

  • DM Sans, Archivo, Chivo, Geist, Inter, Lexend, Outfit, Poppins, Public Sans, Rubik, and Work Sans: 400 through 900 where Google Fonts supplies them.
  • Archivo Black: 400.
  • Bricolage Grotesque, Manrope, Sora, and Syne: 400 through 800 as available.
  • IBM Plex Sans, Instrument Sans, and Space Grotesk: 400 through 700.
  • Space Mono: 400 and 700.

Load one with the host framework and apply its font family to the body or app shell, for example the className returned by next/font/google. The public registry styles do not download a font or define a font-family token. font-base and font-heading are font-weight utilities, not font-family utilities. The styling website uses additional font-selection variables that are not included in the public palette payload. Keep headings at --font-weight-heading: 700 and body text at --font-weight-base: 500 unless the project deliberately changes the type system.

Base UI portals

Popup components use @base-ui/react. Give the element wrapping the application a positioned isolation context, for example className="relative isolate" on body or the app shell. This keeps dialogs, menus, popovers, selects, and tooltips above surrounding content.

Base UI uses render instead of Radix's asChild, exposes state with attributes such as data-open, data-closed, data-checked, and data-active, and sends an event details object as the second argument to change handlers. Preserve those semantics when adapting an older integration.

Component and star placement

Let the shadcn installer resolve aliases, package dependencies, CSS variables, and upstream registry dependencies. Several public components depend on publisher-only n* aliases. Those aliases intentionally remain external dependencies and are not duplicate Catalogs listings.

The 40 star items are independent SVG components. They accept color, size, stroke, stroke width, path class, and ordinary SVG props. Treat a decorative star as hidden from assistive technology. Give it an accessible name only when the shape communicates meaning.

After integration, verify keyboard interaction, focus visibility, popup stacking, disabled states, the selected font, and chart contrast against the chosen palette.