CheFu UI

Shared React UI primitives for CheFu products.

Install

npm install chefu-ui

User Dropdown

import { CheFuUserDropdown } from "chefu-ui";

export function AccountMenu() {
  return (
    <CheFuUserDropdown
      accountHref="https://myaccount.chefuinc.com/account"
      actions={[
        {
          href: "/settings/profile",
          label: "Profile",
          description: "Public account details",
        },
      ]}
      onSignOut={() => console.log("sign out")}
      showUserDetails
      user={{
        displayName: "Kurisani Maluleke",
        email: "[email protected]",
      }}
      variant="cyan"
    />
  );
}

The package keeps auth behavior in each app. It only renders the shared UI surface and calls the handlers passed by the host application.

The dropdown supports keyboard navigation with arrow keys, Escape-to-close, responsive top or bottom placement, optional action descriptions, and an optional showUserDetails trigger layout for wider product headers or sidebars.