Dev Design Library

Sidebar Workspace Header

Workspace brand row for a sidebar header: 20px tile on the rows' leading axis, name pinned to the 32px text axis, trigger cross-fading into the tile's slot while the collapsed rail peeks, and a trigger-width switcher menu on the shared side.

Sidebar Workspace Header preview
Library
Fluid Functionalism
Framework
React
Type
block
License
MIT
Install
npx shadcn@latest add @fluid/sidebar-workspace-header
Files
  • registry/blocks/sidebar-workspace-header.tsx
  • registry/default/lib/utils.ts
  • registry/default/lib/shape-context.tsx
  • registry/default/lib/size-context.tsx
  • registry/default/lib/type-scale.ts
  • registry/default/lib/icon-context.tsx
  • registry/default/lib/font-weight.ts
  • registry/default/lib/sidebar-menu-grid.ts
Source
https://github.com/mickadesign/fluid-functionalism

Categories

More from Fluid Functionalism