Back to components
Household Sidebar Shell React component

What is this?

A light, flat sidebar for a finance app. It holds a workspace switcher, Overview and other items, an Accounts group with balances, a Plan section, and a user card with a settings button. The active item gets a white pill with a thin ring that slides between rows, and hovering shows keyboard hints such as “G O”. Collapsed, Accounts shows the total balance; expanded, it lists each account along a thin guide line. Swap the items, balances, and user, then drop it down the left side of a finance or admin app.

Component

Household Sidebar Shell

A light, flat sidebar for a finance app. It holds a workspace switcher, Overview and other items, an Accounts group with balances, a Plan section, and a user card with a settings button. The active item gets a white pill with a thin ring that slides between rows, and hovering shows keyboard hints such as “G O”. Collapsed, Accounts shows the total balance; expanded, it lists each account along a thin guide line. Swap the items, balances, and user, then drop it down the left side of a finance or admin app.

Checking access…
Live Preview

Verified 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