Header Actions

v0.2.0

Header-bar action cluster: connection status, theme switch, sound toggle, notifications menu, and user profile menu.

Install

npx shadcn@latest add @signalos/header-actions

Requires a configured @signalos registry and a valid SIGNALOS_REGISTRY_TOKEN - get access. Registry dependencies (@signalos/tokens, @signalos/utils, @signalos/button, @signalos/popover, @signalos/tooltip) are pulled automatically.

Preview

Example & code

header-actions.example.tsx

import { useState } from "react"

import { HeaderActions } from "@/components/widgets/header-actions/HeaderActions"

export default function Example() {
  const [theme, setTheme] = useState<"light" | "dark">("light")

  return (
    <HeaderActions
      organizationLabel="Sample Managed Services - Health Care"
      connectionStatus="connected"
      theme={theme}
      onThemeChange={setTheme}
      notifications={[{ id: "n1", title: "New alert" }]}
      onNotificationSelect={(notification) => console.info(notification.id)}
      user={{ name: "Jane Doe", email: "jane@example.com" }}
      onSignOut={() => console.info("sign out")}
    />
  )
}

Props

HeaderActionsNotification

Prop	Type	Default
id*	`string`	-
title*	`string`	-
description	`string \| undefined`	-
timestamp	`string \| undefined`	-
read	`boolean \| undefined`	-

HeaderActionsUser

Prop	Type	Default
name*	`string`	-
email	`string \| undefined`	-
avatarUrl	`string \| null \| undefined`	-

HeaderActionsProps

Prop	Type	Default	Description
organizationLabel	`string \| undefined`	-
connectionStatus	`HeaderActionsConnectionStatus \| undefined`	-	Realtime connection status. Omit to hide the indicator.
showConnectionLabel	`boolean \| undefined`	-	Shows the text label next to the connection indicator.
theme	`"light" \| "dark" \| undefined`	-	Current theme. Omit to hide the theme switch.
onThemeChange	`((theme: "light" \| "dark") => void) \| undefined`	-	Called when the theme switch is toggled.
soundEnabled	`boolean \| undefined`	-	Whether notification sounds are enabled. Omit to hide the sound toggle.
onSoundEnabledChange	`((enabled: boolean) => void) \| undefined`	-	Called when the sound toggle is pressed.
notifications	`HeaderActionsNotification[] \| undefined`	-	Notifications rendered inside the notifications popover.
notificationsLoading	`boolean \| undefined`	-	Loading state for the notifications popover content.
onNotificationSelect	`((notification: HeaderActionsNotification) => void) \| undefined`	-	Called when a notification row is selected.
onNotificationsOpenChange	`((open: boolean) => void) \| undefined`	-	Called whenever the notifications popover opens or closes.
user	`HeaderActionsUser \| null \| undefined`	-	Current user rendered inside the profile menu. Omit to hide the menu.
userLoading	`boolean \| undefined`	-	Loading state for the user avatar/profile menu.
userMenuExtra	`ReactNode`	-	Extra items rendered above sign out inside the profile menu.
onSignOut	`(() => void) \| undefined`	-	Called when "Sign out" is selected.
isSigningOut	`boolean \| undefined`	-	Disables the sign out action and shows a busy label.
className	`string \| undefined`	-	Additional Tailwind classes for the outer container.
data-testid	`string \| undefined`	-	Test identifier rendered as `data-testid` on the root element.

Supporting types

export type HeaderActionsConnectionStatus =
  "connected" | "connecting" | "disconnected"

npm dependencies

lucide-react@^1.7.0

Changelog

header-actions

0.2.0

Breaking: rename the testId prop to data-testid to match the rest of the registry and the DOM attribute name.

0.1.2

Use semantic status tokens (text-text-error, bg-bg-warning, border-border-, bg-status-) instead of raw palette scales so client theme overrides restyle status colors.

0.1.1

Content sync fix to bring source in line with published registry payload.

0.1.0

Initial release: cluster of header-bar action controls (connection status, theme switch, sound toggle, notifications menu, user profile menu). Extracted from the app-shell2 scaffold's stray components/Header1 folder into its own registry item with a single flat HeaderActions.tsx file.