SidebarUserCard

Stable
WCAG 2.2 evidence
RTL

The signed-in person at the bottom of a Sidebar: avatar, name and email, opening the account menu. The whole card is one React Aria menu trigger (aria-haspopup, aria-expanded): Enter, Space and the arrow keys open the library Menu, Escape closes it and returns focus (WCAG 2.1.1, 2.4.3, 4.1.2). Its name is the visible name and email plus the presence text (2.5.3). In the collapsed rail only the avatar shows and a tooltip gives the name; the card stays at least 40 x 52 px (2.5.8). Consumer duties: menu item wording; a Sign out item.

import { SidebarUserCard } from "@nexera-ui/react";

Loading example…

5
examples: 29
props: 7
live controls: 1
platform: 10
WCAG criteria: 1
block uses it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

presence

variant

isCollapsedfalse

children

defaultOpenfalse

placement

isDisabledfalse

Generated code

import { SidebarUserCard } from "@nexera-ui/react";

<SidebarUserCard />

Examples 4

The same examples as Storybook, rendered live. Open Code to copy one.

Menu open

The account menu open (it opens above the card).

Loading example…

app.tsx

import { Sidebar, SidebarUserCard } from "@nexera-ui/react";

export function MenuOpen() {
  return (
    <div className="flex min-h-[20rem] items-end">
      <Sidebar
        isCollapsible={false}
        aria-label="Sidebar"
        className="h-auto"
        userCard={
          <SidebarUserCard
            name="Sara Malik"
            email="sara.malik@acme.com"
            initials="SM"
            presence="online"
          />
        }
      />
    </div>
  );
}

Variants and rail

Figma Variant=Light and Collapsed=True (avatar only; focus or hover it for the name).

Loading example…

app.tsx

import { Sidebar, SidebarUserCard } from "@nexera-ui/react";

export function VariantsAndRail() {
  return (
    <div className="flex flex-wrap items-start gap-4">
      {(["brand", "light"] as const).flatMap((variant) =>
        [false, true].map((isCollapsed) => (
          <Sidebar
            key={`${variant}${String(isCollapsed)}`}
            variant={variant}
            isCollapsed={isCollapsed}
            isCollapsible={false}
            aria-label={`${variant} ${isCollapsed ? "rail" : "sidebar"}`}
            className="h-auto"
            userCard={
              <SidebarUserCard
                name="Sara Malik"
                email="sara.malik@acme.com"
                initials="SM"
                presence="online"
              />
            }
          />
        )),
      )}
    </div>
  );
}

Long text

Long names and addresses wrap.

Loading example…

app.tsx

import { MenuDivider, MenuItem, SidebarUserCard } from "@nexera-ui/react";
import { LuLogOut, LuSettings, LuUser } from "react-icons/lu";

const accountMenu = (
  <>
    <MenuItem id="profile" label="Profile" icon={<LuUser />} />
    <MenuItem id="settings" label="Account settings" icon={<LuSettings />} />
    <MenuDivider />
    <MenuItem id="sign-out" label="Sign out" icon={<LuLogOut />} />
  </>
);

<SidebarUserCard
  name="Muhammad Abdul Rehman Siddiqui"
  email="muhammad.abdulrehman.siddiqui@acme-holdings.com"
  initials="MS"
  presence="online"
>
  {accountMenu}
</SidebarUserCard>;

Right to left

Right to left: the presence dot and the ellipsis move to the other side.

Loading example…

app.tsx

import { MenuDivider, MenuItem, SidebarUserCard } from "@nexera-ui/react";
import { LuLogOut, LuSettings, LuUser } from "react-icons/lu";

const accountMenu = (
  <>
    <MenuItem id="profile" label="Profile" icon={<LuUser />} />
    <MenuItem id="settings" label="Account settings" icon={<LuSettings />} />
    <MenuDivider />
    <MenuItem id="sign-out" label="Sign out" icon={<LuLogOut />} />
  </>
);

<SidebarUserCard name="Sara Malik" email="sara.malik@acme.com" initials="SM" presence="online">
  {accountMenu}
</SidebarUserCard>;

Props 29

Press "Try it" on a card to load that prop into the playground.

name*Nexera

string

The signed-in person's name. Part of the trigger's name.

emailNexera

string

Their email address. Shown under the name when provided.

initials*Nexera

string

One or two letters for the avatar.

presenceNexera

"online" | "away" | "busy" | "offline"

Availability shown as the avatar dot. Shown when provided, and announced as text with the name, so it is not conveyed by colour alone.

presenceLabelNexera

string

Announced text of presence. Translate it for your locale.

variantNexera

"brand" | "light"

Colour scheme.

isCollapsedNexera

boolean

Show only the avatar; the name moves to a tooltip.

children*Nexera

ReactNode

The account menu: MenuItem elements (Profile, Settings, Sign out, …), optionally in MenuSections.

onActionNexera

(key: Key) => void

Called with the id of the menu item the user activates.

isOpenNexera

boolean

Whether the menu is open (controlled). Use with onOpenChange.

defaultOpenNexera

boolean

Whether the menu is open on first render (uncontrolled).

onOpenChangeNexera

(isOpen: boolean) => void

Called when the menu opens or closes.

placementNexera

"bottom" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top" | "top left" | "top right" | "top start" | "top end" | "left" | "left top" | "left bottom" | "start" | "start top" | "start bottom" | "right" | "right top" | "right bottom" | "end" | "end top" | "end bottom"

Where the menu opens. It flips to stay in the viewport.

classNameNexera

string

Extra classes for the trigger, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style for the trigger.

isDisabledReact Aria

boolean

Whether the button is disabled.

onPressReact Aria

(e: PressEvent) => void

Handler that is called when the press is released over the target.

onPressStartReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction starts.

onPressEndReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

onPressChangeReact Aria

(isPressed: boolean) => void

Handler that is called when the press state changes.

onPressUpReact Aria

(e: PressEvent) => void

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

typeReact Aria

"button" | "submit" | "reset"

The behavior of the button when used in an HTML form.

formReact Aria

string

The <form> element to associate the button with. The value of this attribute must be the id of a <form> in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form).

valueReact Aria

string

The value associated with the button's name when it's submitted with the form data.

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

aria-labelReact Aria

string

Defines a string value that labels the current element.

aria-labelledbyReact Aria

string

Identifies the element (or elements) that labels the current element.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

7 direct · 3 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.4.4Resize TextLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
1.4.13Content on Hover or FocusLevel AA · tested directly
2.1.1KeyboardLevel A · tested directly
2.4.3Focus OrderLevel A · tested directly
2.4.7Focus VisibleLevel AA · supporting test
2.5.3Label in NameLevel A · tested directly
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-hovered
data-pressed

Usage

<SidebarUserCard className="data-disabled:opacity-90 shadow-sm" />

Used in blocks

Sidebar app shellApp shells and navigation

Theme studio

SidebarUserCard

Try every prop. Copy the code.

Examples 4

Menu open

Variants and rail

Long text

Right to left

Props 29

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components