Skip to content
All blocks

Account & Profile blocks

Account menus for the signed-in user: profile, plan, workspaces and sign out.

3 variants. Every block is one file built from CK-UI components and works in light and dark mode.

Account card with menu

The signed-in user in a card with a named menu button for managing, switching and adding accounts.

CK-UI components

Also copy the files they import: ThemeScope.

npm packages

npm install @radix-ui/react-avatar @radix-ui/react-dropdown-menu @radix-ui/react-slot class-variance-authority framer-motion react-icons

Profile menu

Name, email and plan as the menu trigger, with storage use, settings and sign out inside.

CK-UI components

Also copy the files they import: ThemeScope.

npm packages

npm install @radix-ui/react-avatar @radix-ui/react-dropdown-menu @radix-ui/react-slot framer-motion react-icons

Avatar menu

An avatar button for app headers with grouped account links, workspace switching and sign out.

CK-UI components

Also copy the files they import: ThemeScope.

npm packages

npm install @radix-ui/react-dropdown-menu framer-motion react-icons