Documentation

Docs Shell

A complete documentation layout shell with sidebar navigation and content area.View source →

Provides a complete documentation layout with sidebar navigation, header, and content area. Built on Kookie UI's Shell component with documentation-specific defaults for a consistent docs experience out of the box.

Works with any React router by accepting custom link components and pathname for active state highlighting.

Installation

shell
npm install @kushagradhawan/kookie-blocks

Usage

tsx
import { DocsShell } from '@kushagradhawan/kookie-blocks';
 
const navigation = {
  groups: [
    {
      label: 'Getting Started',
      items: [
        { href: '/docs/installation', title: 'Installation' },
      ],
    },
  ],
};
 
export function DocsLayout({ children }) {
  return (
    <DocsShell
      navigation={navigation}
      logo={{ src: '/logo.png', alt: 'My Docs' }}
    >
      {children}
    </DocsShell>
  );
}

Props

PropTypeDescription
childrenReactNodePage content to render in the main content area
navigationDocsNavigationConfigNavigation configuration with groups and items
logoDocsLogoConfigLogo configuration with src, alt, optional href, and optional size ('1'–'5', default '3')
headerActionsReactNodeCustom actions for the header (e.g., theme toggle, GitHub link)
sidebarFooterReactNodeCustom footer content for the sidebar
height'full' | 'auto' | string | numberShell height. Use 'full' for viewport height
sidebarThinSizenumberSidebar width when collapsed. Default: 80
sidebarResizablebooleanWhether sidebar is resizable. Default: true
mobileTriggerIconReactNodeCustom icon for mobile sidebar trigger
pathnamestringCurrent pathname for active state detection
linkComponentComponentTypeCustom link component for navigation (e.g., Next.js Link)

Examples

With Next.js

Integrate with Next.js router for active state highlighting:

tsx
'use client';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { DocsShell } from '@kushagradhawan/kookie-blocks';
 
export function DocsLayout({ children }) {
  const pathname = usePathname();
 
  return (
    <DocsShell
      navigation={navigation}
      pathname={pathname}
      linkComponent={Link}
      logo={{ src: '/logo.png', alt: 'Docs' }}
    >
      {children}
    </DocsShell>
  );
}

With Header Actions

Add theme toggle, search, or other actions to the header:

tsx
import { DocsShell } from '@kushagradhawan/kookie-blocks';
import { IconButton, Flex } from '@kushagradhawan/kookie-ui';
import { Moon02Icon, Search01Icon } from '@hugeicons/core-free-icons';
 
export function DocsLayout({ children }) {
  return (
    <DocsShell
      navigation={navigation}
      headerActions={
        <Flex gap="2">
          <IconButton variant="ghost" size="2">
            <Search01Icon />
          </IconButton>
          <IconButton variant="ghost" size="2">
            <Moon02Icon />
          </IconButton>
        </Flex>
      }
    >
      {children}
    </DocsShell>
  );
}

With Icons in Navigation

Add icons to navigation items using HugeIcons:

tsx
import { DocsShell } from '@kushagradhawan/kookie-blocks';
import { Download01Icon, CodeIcon } from '@hugeicons/core-free-icons';
 
const navigation = {
  groups: [
    {
      label: 'Getting Started',
      items: [
        {
          href: '/docs/installation',
          title: 'Installation',
          icon: Download01Icon
        },
        {
          href: '/docs/usage',
          title: 'Usage',
          icon: CodeIcon
        },
      ],
    },
  ],
};
 
export function DocsLayout({ children }) {
  return (
    <DocsShell navigation={navigation}>
      {children}
    </DocsShell>
  );
}

With Sidebar Footer

Add custom footer content to the sidebar:

tsx
import { DocsShell } from '@kushagradhawan/kookie-blocks';
import { Text, Link } from '@kushagradhawan/kookie-ui';
 
export function DocsLayout({ children }) {
  return (
    <DocsShell
      navigation={navigation}
      sidebarFooter={
        <Text size="1" color="gray">
          v1.0.0 • <Link href="/changelog">Changelog</Link>
        </Text>
      }
    >
      {children}
    </DocsShell>
  );
}

Full Height Layout

Make the shell fill the viewport height:

tsx
import { DocsShell } from '@kushagradhawan/kookie-blocks';
 
export function DocsLayout({ children }) {
  return (
    <DocsShell
      navigation={navigation}
      height="full"
    >
      {children}
    </DocsShell>
  );
}

Accessibility

Docs Shell provides comprehensive accessibility features:

Keyboard Navigation

  • Tab - Navigate through sidebar items and interactive elements
  • Enter/Space - Activate navigation links
  • Escape - Close mobile sidebar

Mobile Support

  • Responsive sidebar that collapses on mobile
  • Touch-friendly mobile trigger button
  • Swipe gestures for sidebar (via Shell component)

Screen Readers

  • Proper ARIA landmarks for navigation and main content
  • Active navigation item announced
  • Mobile trigger button announces sidebar state

Changelog

Added

  • Complete documentation layout shell
  • Sidebar with navigation and logo
  • Header actions support
  • Sidebar footer support
  • Framework-agnostic router integration
  • Resizable sidebar
  • Mobile responsive design
© 2026 Kushagra Dhawan. Licensed under MIT. GitHub.

Theme

Accent color

Gray color

Appearance

Radius

Scaling

Panel background