Topbar account menu: avatar trigger with name and email, dropdown with icon items, keyboard shortcuts, and a destructive sign-out row. Compact avatar-only mode for dense headers.
The import and the props worth knowing about, in one place.
import { UserMenu } from "@/components/beste/component/user-menu";
import { LogOut, Settings } from "lucide-react";
<UserMenu
user={{ name: "Jordan Ellis", email: "jordan@acme.com" }}
items={[
{ id: "settings", label: "Settings", icon: Settings, shortcut: "⌘S" },
{ id: "logout", label: "Log out", icon: LogOut, destructive: true },
]}
onSelect={(id) => console.log("selected:", id)}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { UserMenu } from "@/components/beste/component/user-menu";
<UserMenu
user={{"name":"Jordan Ellis","email":"jordan@acme.com","avatar":"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=128&auto=format&fit=crop"}}
items={[{"id":"profile","label":"Profile","icon":{"displayName":"User"},"shortcut":"⇧⌘P"},{"id":"billing","label":"Billing","icon":{"displayName":"CreditCard"}},{"id":"settings","label":"Settings","icon":{"displayName":"Settings"},"shortcut":"⌘S"},{"id":"logout","label":"Log out","icon":{"displayName":"LogOut"},"destructive":true}]}
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Enter / Space | Open the menu from the trigger. |
|---|---|
| Arrow keys | Move through the items; separators and the header are skipped. |
| Type a letter | Jump to the next item starting with it. |
| Escape | Close and put focus back on the trigger. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
user* | UserMenuUser | — | |
items* | UserMenuItem[] | — | |
onSelect | (id: string) => void | — | |
align | "start" | "center" | "end" | — | |
compact | boolean | — | Hide the name/email column and show only the avatar (for dense topbars) |
className | string | — |
Topbar bell trigger with an unread count and a popover feed: icon rows with title, description, timestamp, unread dots, a mark-all-read action, and a scrollable list. Manages read state internally.
Dashboard sidebar with a brand header, grouped nav items, Lucide icons, trailing count badges, and an active state. Collapse is driven from the shell topbar via the `collapsed` prop (icon rail when true).
| Actions | ||||||
|---|---|---|---|---|---|---|
A Amara Okaforamara@northwind.io | Scale | Active | $4,820 | Jan 4, 2026 | ||
D Diego Santosdiego@lumen.app | Starter | Trial | $0 | Feb 18, 2026 | ||
P Priya Nairpriya@vertex.co | Growth | Active | $2,140 | Nov 22, 2025 | ||
T Tom Fischertom@basecamp.dev | Starter | Churned | $380 | Aug 9, 2025 | ||
L Lena Björklena@aurora.se | Scale | Active | $6,390 | Mar 2, 2026 | ||
M Marcus Reedmarcus@hexa.io | Starter | Trial | $0 | Feb 27, 2026 |
8 row(s)
Client-side data-table engine: column-driven config with custom cell renderers, sortable headers, keyword search, row selection, per-row action menus, and pagination. Owns all state; blocks pass columns + rows as data.
Selin Aydar
4.6(18 reviews)
Porto, PT
820 miles away
$142
avg. daily rate
Recently active — Available
A candidate/freelancer card: avatar with verified badge, star rating or new label, a location/rate split, and toggleable wishlist and invite actions that track their own state. Ideal for talent marketplaces and staffing grids.
Atrium Loft
Floor 3 · 12 seats
Studio B
Floor 2 · 8 seats
Garden Room
Ground · 20 seats
Rooftop Deck
Level 5 · 40 seats
A Gantt-style day timeline: resource rows against an hour axis with time-positioned event bars (left/width computed from start/end), grid lines, a live 'now' marker, colored tones, and clickable bars with a hover tooltip showing the event and its time range. Ideal for room bookings, shifts, and resource scheduling.