Account Drawer End Edge

ProNew

A drawer that opens from the end edge (right in left-to-right text, left in right-to-left) with account details, a plan card and quick actions, closing by swipe, Escape or its Close button. Use this when a phone app has an account or profile panel that should open from the opposite side to the main menu.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

name

plan

Guide and examples

When to use it

Use it when a phone app has an account or profile panel that should open from the opposite side to the main menu.

Do not use it for the main navigation menu or for anything that needs its own page.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`name`	`string`	`required`	Account name.
`plan`	`string`	`required`	Plan name shown on the card.
`actions`	`{ id: string; label: string; onSelect: () => void }[]`	`required`	Quick actions.

Accessibility

A modal dialog named by the account name; focus is trapped and returns to the avatar button.
The edge flips with the text direction (checked by logical classes), and the swipe-to-close direction flips with it.
Each action is a full-width button of at least 48px.

Testing

The pattern ships with a Testing Library test (account-drawer-end-edge.test.tsx) that drives it through roles and the keyboard.