Blocks & Templates — Pre-built UI Sections

Header with Mega Menu

Top navigation header bar with brand logo, dropdown menu links, and action buttons.

>npx @shavin/cli add nav-header-mega-menu

Shavin

Components Blocks Documentation

When to Use & Guidelines

Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#header#navbar

Sticky App Navigation Bar

Compact in-app toolbar header for dashboards with search bar and user profile dropdown trigger.

>npx @shavin/cli add nav-sticky-appbar

When to Use & Guidelines

Use in data-dense views where information hierarchy matters.
Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#appbar#dashboard

Multi-Column Footer

Comprehensive 4-column site footer with product links, resource directories, and copyright bar.

>npx @shavin/cli add nav-multi-column-footer

Shavin

Enterprise React design system with strict token architecture and integrated MCP server.

Product

Primitives
Community Blocks
Visual Builder

Resources

Documentation
MCP Tools
GitHub

Legal

Privacy Policy
Terms of Service

When to Use & Guidelines

Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#footer#links

Workspace Sidebar

Workspace navigation sidebar with project groups, search, and user profile section.

>npx @shavin/cli add sidebar-workspace

Workspace

Your main workspace content goes here.

Panel A

128

Panel B

94%

When to Use & Guidelines

Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#sidebar#workspace

Collapsible Sidebar

Collapsible navigation sidebar with icon-only collapsed mode and expand toggle.

>npx @shavin/cli add sidebar-collapsible

Collapsible Workspace

Your main workspace content goes here.

Panel A

128

Panel B

94%

When to Use & Guidelines

Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#sidebar#collapsible

Standard Left Navigation Sidebar

Classic left navigation sidebar with grouped links, icons, and collapsible sections.

>npx @shavin/cli add sidebar-standard

Workspace

Your main workspace content goes here.

Panel A

128

Panel B

94%

When to Use & Guidelines

Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#sidebar#app-shell

Right Option Inspector Panel

Right-side inspector panel for contextual property editing and detail views.

>npx @shavin/cli add sidebar-inspector

Workspace

Your main workspace content goes here.

Panel A

128

Panel B

94%

When to Use & Guidelines

Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#sidebar#inspector

Dual Resizable Sidebars

Dual sidebar layout with left navigation and right contextual panel.

>npx @shavin/cli add sidebar-dual-resizable

Workspace

Your main workspace content goes here.

Panel A

128

Panel B

94%

When to Use & Guidelines

Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#sidebar#dual

Floating Panel Sidebar

Floating overlay sidebar panel with translucent backdrop and compact navigation.

>npx @shavin/cli add sidebar-floating

Workspace

Your main workspace content goes here.

Panel A

128

Panel B

94%

When to Use & Guidelines

Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#sidebar#floating

Header with Mega Menu

Top navigation header bar with brand logo, dropdown menu links, and action buttons.

>npx @shavin/cli add nav-header-mega-menu

Shavin

Components Blocks Documentation

When to Use & Guidelines

Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#header#navbar

Sticky App Navigation Bar

Compact in-app toolbar header for dashboards with search bar and user profile dropdown trigger.

>npx @shavin/cli add nav-sticky-appbar

When to Use & Guidelines

Use in data-dense views where information hierarchy matters.
Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#appbar#dashboard

Multi-Column Footer

Comprehensive 4-column site footer with product links, resource directories, and copyright bar.

>npx @shavin/cli add nav-multi-column-footer

Shavin

Enterprise React design system with strict token architecture and integrated MCP server.

Product

Primitives
Community Blocks
Visual Builder

Resources

Documentation
MCP Tools
GitHub

Legal

Privacy Policy
Terms of Service

When to Use & Guidelines

Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#footer#links

Workspace Sidebar

Workspace navigation sidebar with project groups, search, and user profile section.

>npx @shavin/cli add sidebar-workspace

Workspace

Your main workspace content goes here.

Panel A

128

Panel B

94%

When to Use & Guidelines

Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#sidebar#workspace

Collapsible Sidebar

Collapsible navigation sidebar with icon-only collapsed mode and expand toggle.

>npx @shavin/cli add sidebar-collapsible

Collapsible Workspace

Your main workspace content goes here.

Panel A

128

Panel B

94%

When to Use & Guidelines

Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#sidebar#collapsible

Standard Left Navigation Sidebar

Classic left navigation sidebar with grouped links, icons, and collapsible sections.

>npx @shavin/cli add sidebar-standard

Workspace

Your main workspace content goes here.

Panel A

128

Panel B

94%

When to Use & Guidelines

Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#sidebar#app-shell

Right Option Inspector Panel

Right-side inspector panel for contextual property editing and detail views.

>npx @shavin/cli add sidebar-inspector

Workspace

Your main workspace content goes here.

Panel A

128

Panel B

94%

When to Use & Guidelines

Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#sidebar#inspector

Dual Resizable Sidebars

Dual sidebar layout with left navigation and right contextual panel.

>npx @shavin/cli add sidebar-dual-resizable

Workspace

Your main workspace content goes here.

Panel A

128

Panel B

94%

When to Use & Guidelines

Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#sidebar#dual

Floating Panel Sidebar

Floating overlay sidebar panel with translucent backdrop and compact navigation.

>npx @shavin/cli add sidebar-floating

Workspace

Your main workspace content goes here.

Panel A

128

Panel B

94%

When to Use & Guidelines

Anchor at the bottom of the page for persistent wayfinding.
Fully responsive across desktop, tablet, and mobile breakpoints.
100% semantic token purity — remaps seamlessly across all themes.

#navigation#sidebar#floating