App Sidebar

A complete app shell: workspace header with the peek cross-fade, search on the menu rows' rhythm with a hover-revealed shortcut chip, collapsible sections with label actions and badges, a user footer, and an inset topbar whose trigger fades.

Library

Fluid Functionalism

Framework

React

Type

block

License

MIT

Install

npx shadcn@latest add @fluid/sidebar-app

Files

• registry/blocks/sidebar-app/app-sidebar.tsx
• registry/blocks/sidebar-app/nav-data.ts
• registry/blocks/sidebar-app/page.tsx
• registry/default/lib/utils.ts
• registry/default/lib/icon-context.tsx
• registry/default/lib/size-context.tsx
• registry/default/lib/type-scale.ts
• registry/radix/sidebar.tsx

Source

https://github.com/mickadesign/fluid-functionalism

Categories

• App Shell Components
• React App Shell Components
• Tailwind CSS App Shell Components
• shadcn/ui App Shell Components
• Layout Components
• React Layout Components
• Tailwind CSS Layout Components
• Animated Layout Components
• shadcn/ui Layout Components
• Navigation Components
• React Navigation Components
• Tailwind CSS Navigation Components

More from Fluid Functionalism

• Settings Dialog (Sidebar in a Dialog)
• Sidebar
• Sidebar
• Accordion
• Accordion (Base UI)
• Ask User Questions
• Badge
• Banner
• Breadcrumb
• Button
• Button (Base UI)
• Calendar