patterns

ThemeMenuItems

Theme submenu (light / dark / system) for use inside `<UserMenu>`. State is owned by the caller — pair with next-themes / your own theme store.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/theme-menu-items.json

Or import from the workspace package:

import { ThemeMenuItems, Theme } from "@8maverik8/design";

Examples

Inside UserMenu

Click the avatar to open the menu — the Theme submenu sits between Settings and Sign-out.

Click the avatar to open the user menu — the Theme submenu sits between Settings and Sign-out.

current → dark

import { useTheme } from "next-themes";

const { theme = "system", setTheme } = useTheme();

<UserMenu user={user} onSignOut={signOut}>
  <ThemeMenuItems
    value={theme as Theme}
    onChange={(t) => setTheme(t)}
  />
</UserMenu>

Guidelines

Place inside the `children` slot of `<UserMenu>` — that's the canonical position.
Wire this to its own button outside the user menu.Settings affordances belong in one place; scattering them confuses users.