Aki UI

Profile Dropdown

プロフィールドロップダウン

The account card at the bottom of a sidebar: identity on the trigger, the account menu underneath. The menu itself is Radix DropdownMenu↗↗ rather than a hand-rolled popover, because the parts that are easy to get wrong are exactly the ones it owns: aria-haspopup and aria-expanded on the trigger, one tab stop with arrow keys and typeahead inside, and focus handed back to the trigger on close — the menu button pattern↗↗ in full. Only the surface is ours: the gradient avatar ring, the backdrop blur and the coloured badges are gone, and the avatar falls back to initials when no image is passed. Adapted from Kokonut UI↗↗ under the MIT licence.

Installation

Install the following dependencies:1

npm install @radix-ui/react-dropdown-menu

Copy and paste the following code into a new component file:2

"use client"

/**

* Adapted for Aki UI from Kokonut UI's Profile Dropdown.

* Original author: @dorianbaffier — https://kokonutui.com

* https://github.com/kokonut-labs/kokonutui

* Reworked here onto the local palette, with the shadcn dropdown-menu wrapper

* replaced by the Radix primitive it wraps and the gradient avatar ring,

How to use it3

"use client"

import { User } from "lucide-react"

import { ProfileDropdown } from "@/components/ui/profile-dropdown"

const items = [

{ id: "profile", label: "Profile", icon: <User className="h-4 w-4" /> },

]

export default function Page() {

Props

ProfileDropdown

Name	Default	Description
name	—	string Account name, and the source of the initials
email	—	string Second line on the trigger
items	—	ProfileMenuItem[] Rows above the separator
avatar	—	string Image src; initials are used when it is absent
signOutLabel	"Sign out"	string Text on the last row
onSignOut	—	() => void Fired by the last row
dark	false	boolean Render the dark palette

ProfileMenuItem

Name	Default	Description
id	—	string Unique key
label	—	string Row text
value	—	string Badge on the right of the row
icon	—	ReactNode Leading glyph
onSelect	—	() => void Fired when the row is chosen