shared · Used on several pages

ToolsMenu

components/site/ToolsMenu.tsx

preview

usage · in this app

components/site/SiteHeader.tsx

import { ToolsMenu } from '@/components/site/ToolsMenu'

<ToolsMenu
  align="right"
  triggerClassName="font-medium text-[var(--foreground)] transition-colors hover:text-[var(--accent)]"
/>

props

type Props = { /** Trigger styling so it matches its sibling nav links in each context. */ triggerClassName?: string /** Which edge the panel aligns to. Right for right-anchored headers. */ align?: 'left' | 'right' }

used on · 6

//agent /gallery/gallery/[slug]/tools /tools/designmd-extractor

tokens · 15

referenced in its file

--accent --accent-dim --border --border-strong --elevated --fg-dim --fg-muted --foreground --popover --shadow-lift --surface-2 --text-caption --text-micro --text-ui --warning

history · 3

verified

Previews for the site components

2026-10-21

verified

Components: restore the spaces before quotes the token codemod removed

2026-10-21

verified

Components: hardcoded sizes, colors, radii and shadows replaced with the site tokens

2026-10-21

Coherent Design MethodGitHubDesign system read from this app's code