Skip to main content

opus-react v0.6.8

Theme

Components

Loading preview…

Documentation

Overview

Responsive application header composed from existing Opus primitives. It combines product branding, global search, shortcut guidance, application actions, notification badges, and the signed-in user profile.

When to use

Primary chrome for CRM, analytics, and administration workspaces.
Product shells that need global search and account actions in one consistent landmark.

Props

Prop	Type	Default	Description
`actions`	`ApplicationHeaderAction[]`	`[]`	Icon actions with optional notification counts.
`brandSrc`	`string`	`/opus-logo.png`	Product logo source.
`brandHref`	`string`	`/`	Brand destination.
`searchValue`	`string`	`""`	Controlled search value.
`onSearchChange`	`(value) => void`	—	Called as global search changes.
`searchShortcut`	`string[]`	`["⌘", "S"]`	Shortcut displayed inside search and used to focus it.
`showSearch`	`boolean`	`true`	Show the global search region.
`profile`	`ApplicationHeaderProfile`	—	Signed-in user details and dropdown items.
`onCreate`	`() => void`	—	Shows and handles the primary create action.

Composition

Uses TextField, KeyboardShortcut, IconBadge, DropdownMenu, Divider, Tooltip, and UserProfileWidget. The header owns responsive layout but leaves application state and routing with its parent.

Accessibility

Uses a header landmark and a labelled navigation region for actions.
Command+S focuses and selects the global search field.
Search retains an accessible label while hiding visual field chrome.
Icon actions expose names and counts through IconBadge.
All interactive controls support visible keyboard focus.