DesignLayer
Account Menu
Back to components
What is this?
An account menu for a SaaS header, with a plan line and an Upgrade button. Profile, Billing, Notifications, and Shortcuts slide in as views inside the same popover. Switch Light, Dark, or System, then swap the user and plan and drop it into your app.
Component
Account Menu
An account menu for a SaaS header, with a plan line and an Upgrade button. Profile, Billing, Notifications, and Shortcuts slide in as views inside the same popover. Switch Light, Dark, or System, then swap the user and plan and drop it into your app.
Checking access…
Live PreviewVerified Technical Spec
- Animation
- CSS / Tailwind
- Reduced motion
- Verified
- Keyboard focus
- Verified
- Compatibility
- Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible
Included
- Copy source into Cursor or Claude for agent install
- Responsive on phone, tablet, and desktop
- Finished React · TypeScript · Tailwind CSS · Lucide UI
Dependencies
- React 19.0.0
- Typescript 5.7.2
- Tailwindcss 3.4.16
- Lucide-react 1.23.0
Tech Stack
- React
- TypeScript
- Tailwind CSS
- Lucide
Version 1.0.0