Sheaf UI

Welcome to products

This is an interactive demonstration page designed to showcase the sidebar component's capabilities. Navigate through different sections to experience how the layout adapts and responds to your interactions.

About Sheaf UI

A collection of components you truly own. Unlike traditional component libraries, you have complete control over the codebase, customize freely, fix bugs immediately, and evolve components to match your exact needs without depending on external maintainers.

Explore Layout Variants

Header-Sidebar Layout

Application-style layout with top header and secondary sidebar. Ideal when branding and user actions need top priority.

Best for: Content platforms, marketplaces, portals

Current

Sidebar-Main Layout

Classic dashboard layout with prominent sidebar navigation. Perfect for apps where navigation is the primary focus.

Best for: Admin panels, dashboards, SaaS apps

Customize This Layout

Navigation Group Style

Controls how grouped navigation items (like "Blog" and "Shop") are displayed

Default Spacious with clear hierarchy Compact Dense layout, more items visible

Sidebar Behavior

Toggle whether users can collapse the sidebar to icon-only mode

Collapsible Users can minimize sidebar Fixed Width Always full width

Navigation Groups

Control whether navigation groups like "Blog" and "Shop" can be expanded/collapsed

Collapsible Groups Save space, hide unused sections Always Expanded All options always visible

there is much more to try and tweack in docs

Try different combinations to find what works best for your use case

Reset to Defaults