Skip to Content

mukoko-sidebar

ui

Standardized sidebar for all Mukoko ecosystem apps. Wraps the sidebar primitive with Mukoko branding, mineral accent strip, section-based navigation, and automatic active state detection. Works across docs, dashboards, settings, and any other context.

Use cases

  • Documentation page navigation
  • Dashboard sidebar with sections
  • Settings and preferences navigation
  • Admin panel navigation
  • App-wide navigation for any Mukoko product

Features

  • Wraps sidebar primitive with Mukoko branding
  • Mineral accent strip at top (Five African Minerals)
  • Automatic active state detection from pathname
  • Section-based navigation with group labels
  • Nested menu support for hierarchical navigation
  • Collapsible to icon-only mode (Cmd+B)
  • Responsive — transforms to Sheet on mobile
  • Cookie-based state persistence
  • Theme toggle and version in footer

Preview

Interactive preview with light/dark mode toggle. Switch to Code tab to view the full source.

mukoko registry
Components
Brand
Architecture
API
v4.0.1

Installation

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/mukoko-sidebar

Dependencies

lucide-reactsidebarseparatorbadgetooltip

API

Fetch this component's metadata and source code from the registry API.

GET/api/v1/ui/mukoko-sidebar

Source

components/mukoko/mukoko-sidebar.tsx