Blocks

Topbar

Dashboard top bar.

Open the avatar menu — entries cascade in and arrow keys walk them. Wire onSearchClick to your command palette.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add topbar

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Topbar } from "@lumora/ui/blocks/topbar";
// or from the barrel:
import { Topbar } from "@lumora/ui";

Props worth knowing

leading slots a breadcrumb or page title; searchHint/searchShortcut shape the search button and onSearchClick wires it to your palette. userName/userDetail and menuItems ({ label, onClick?, danger? }) drive the avatar dropdown, with full keyboard navigation. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.