Shell

Application layout shell with navbar, collapsible sidebar, main content area, and mobile bottom navigation.

Basic Shell

Preview

Welcome

This is the main content area of the application shell.

<div class="shell" style="height: 400px; border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 0.75rem); overflow: hidden; position: relative;">
  <!-- Navbar -->
  <div class="shell-navbar" style="position: relative;">
    <div class="shell-navbar-brand">My App</div>
    <div class="shell-navbar-content"></div>
    <div class="shell-navbar-actions">
      <button class="icon-btn icon-btn-sm" aria-label="Notifications">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/></svg>
      </button>
    </div>
  </div>

  <!-- Main content -->
  <div class="shell-main" style="padding: 1.5rem;">
    <h3 style="font-weight: 600; margin-bottom: 0.5rem;">Welcome</h3>
    <p style="color: var(--color-base-content); opacity: 0.7;">This is the main content area of the application shell.</p>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col min-h-screen">
  <header class="sticky top-0 flex items-center gap-4 h-14 px-6 bg-base-100 border-b border-base-300 z-20">
    <span class="text-lg font-semibold">My App</span>
    <div class="flex-1"></div>
  </header>
  <main class="flex-1 overflow-y-auto p-6">
    <h3 class="font-semibold mb-2">Welcome</h3>
  </main>
</div>

Requires: tw.min.css

// No JavaScript required for basic shell layout

Shell with Sidebar

Preview

Dashboard

Main content with sidebar navigation. The sidebar collapses on mobile.

<div class="shell shell-with-sidebar" style="height: 450px; border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 0.75rem); overflow: hidden; position: relative;">
  <!-- Navbar -->
  <div class="shell-navbar" style="position: relative; z-index: 2;">
    <button class="shell-navbar-toggle" style="display: flex;" aria-label="Toggle sidebar">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
    </button>
    <div class="shell-navbar-brand">Dashboard</div>
    <div class="shell-navbar-content"></div>
  </div>

  <div style="display: flex; flex: 1; overflow: hidden; position: relative;">
    <!-- Sidebar -->
    <div class="shell-sidebar" style="position: relative; top: 0;">
      <div class="shell-sidebar-header">
        <div class="shell-sidebar-logo" style="width: 2rem; height: 2rem; background: var(--color-primary); border-radius: 0.5rem;"></div>
        <span class="shell-sidebar-title">Acme Inc</span>
      </div>
      <nav class="shell-sidebar-nav">
        <a href="#" class="shell-sidebar-item shell-sidebar-item-active">
          <span class="shell-sidebar-item-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
          </span>
          <span class="shell-sidebar-item-text">Home</span>
        </a>
        <a href="#" class="shell-sidebar-item">
          <span class="shell-sidebar-item-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 3v4H8V3"/></svg>
          </span>
          <span class="shell-sidebar-item-text">Products</span>
        </a>
        <a href="#" class="shell-sidebar-item">
          <span class="shell-sidebar-item-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
          </span>
          <span class="shell-sidebar-item-text">Users</span>
        </a>
        <a href="#" class="shell-sidebar-item">
          <span class="shell-sidebar-item-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4"/></svg>
          </span>
          <span class="shell-sidebar-item-text">Settings</span>
        </a>
      </nav>
    </div>

    <!-- Main -->
    <div class="shell-main" style="margin-left: 260px; padding: 1.5rem;">
      <h3 style="font-weight: 600; margin-bottom: 0.5rem;">Dashboard</h3>
      <p style="color: var(--color-base-content); opacity: 0.7;">Main content with sidebar navigation. The sidebar collapses on mobile.</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col relative" style="height: 450px; border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 0.75rem); overflow: hidden;">
  <!-- Navbar -->
  <header class="sticky top-0 flex items-center gap-4 h-14 px-6 bg-base-100 border-b border-base-300 z-20">
    <button class="flex items-center justify-center w-9 h-9 p-0 border-none bg-transparent cursor-pointer rounded-lg hover:bg-base-200" aria-label="Toggle sidebar">
      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
    </button>
    <span class="text-lg font-semibold">Dashboard</span>
    <div class="flex-1"></div>
  </header>

  <div class="flex flex-1 overflow-hidden relative">
    <!-- Sidebar -->
    <aside class="shrink-0 w-65 overflow-y-auto overflow-x-hidden bg-base-100 border-r border-base-300" style="position: relative; top: 0;">
      <div class="flex items-center gap-4 overflow-hidden px-6 py-4 border-b border-base-300 min-h-14">
        <div class="shrink-0 w-8 h-8 rounded-lg" style="background: var(--color-primary);"></div>
        <span class="flex-1 font-semibold truncate">Acme Inc</span>
      </div>
      <nav class="py-2">
        <a href="#" class="flex items-center gap-4 overflow-hidden whitespace-nowrap no-underline py-3 px-6" style="color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 10%, transparent);">
          <span class="flex items-center justify-center shrink-0 w-6 h-6"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg></span>
          <span class="flex-1 overflow-hidden text-ellipsis">Home</span>
        </a>
        <a href="#" class="flex items-center gap-4 overflow-hidden whitespace-nowrap no-underline py-3 px-6 hover:bg-base-200" style="color: color-mix(in oklch, var(--color-base-content) 70%, transparent);">
          <span class="flex items-center justify-center shrink-0 w-6 h-6"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 3v4H8V3"/></svg></span>
          <span class="flex-1 overflow-hidden text-ellipsis">Products</span>
        </a>
        <a href="#" class="flex items-center gap-4 overflow-hidden whitespace-nowrap no-underline py-3 px-6 hover:bg-base-200" style="color: color-mix(in oklch, var(--color-base-content) 70%, transparent);">
          <span class="flex items-center justify-center shrink-0 w-6 h-6"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></span>
          <span class="flex-1 overflow-hidden text-ellipsis">Users</span>
        </a>
        <a href="#" class="flex items-center gap-4 overflow-hidden whitespace-nowrap no-underline py-3 px-6 hover:bg-base-200" style="color: color-mix(in oklch, var(--color-base-content) 70%, transparent);">
          <span class="flex items-center justify-center shrink-0 w-6 h-6"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4"/></svg></span>
          <span class="flex-1 overflow-hidden text-ellipsis">Settings</span>
        </a>
      </nav>
    </aside>

    <!-- Main -->
    <main class="flex-1 overflow-y-auto p-6">
      <h3 class="font-semibold mb-2">Dashboard</h3>
      <p class="text-base-content/70">Main content with sidebar navigation. The sidebar collapses on mobile.</p>
    </main>
  </div>
</div>

Requires: tw.min.css

// Toggle sidebar collapse:
// shell.classList.toggle('shell-sidebar-collapsed');

// Mobile sidebar open/close:
// shell.classList.toggle('shell-sidebar-open');

Bottom Navigation

Preview

Feed

Bottom navigation is typically shown on mobile viewports.

Home Search Alerts Profile

<div class="shell" style="height: 400px; border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 0.75rem); overflow: hidden; position: relative;">
  <div class="shell-navbar" style="position: relative;">
    <div class="shell-navbar-brand">Mobile App</div>
  </div>

  <div class="shell-main" style="padding: 1.5rem; padding-bottom: calc(50px + 1.5rem);">
    <h3 style="font-weight: 600; margin-bottom: 0.5rem;">Feed</h3>
    <p style="color: var(--color-base-content); opacity: 0.7;">Bottom navigation is typically shown on mobile viewports.</p>
  </div>

  <!-- Bottom nav -->
  <div class="shell-bottom-nav" style="display: block; position: absolute;">
    <div class="shell-bottom-nav-items">
      <a href="#" class="shell-bottom-nav-item shell-bottom-nav-item-active">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
        Home
      </a>
      <a href="#" class="shell-bottom-nav-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        Search
      </a>
      <a href="#" class="shell-bottom-nav-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/></svg>
        Alerts
      </a>
      <a href="#" class="shell-bottom-nav-item">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        Profile
      </a>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col relative" style="height: 400px; border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 0.75rem); overflow: hidden;">
  <header class="sticky top-0 flex items-center gap-4 h-14 px-6 bg-base-100 border-b border-base-300 z-20">
    <span class="text-lg font-semibold">Mobile App</span>
  </header>

  <main class="flex-1 overflow-y-auto p-6" style="padding-bottom: calc(50px + 1.5rem);">
    <h3 class="font-semibold mb-2">Feed</h3>
    <p class="text-base-content/70">Bottom navigation is typically shown on mobile viewports.</p>
  </main>

  <!-- Bottom nav -->
  <div class="absolute bottom-0 left-0 right-0 flex items-center justify-around bg-base-100 border-t border-base-300 z-20" style="height: 50px;">
    <a href="#" class="flex flex-col items-center justify-center gap-0.5 no-underline p-1 min-w-16" style="font-size: 10px; color: var(--color-primary);">
      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
      Home
    </a>
    <a href="#" class="flex flex-col items-center justify-center gap-0.5 no-underline p-1 min-w-16" style="font-size: 10px; color: color-mix(in oklch, var(--color-base-content) 60%, transparent);">
      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
      Search
    </a>
    <a href="#" class="flex flex-col items-center justify-center gap-0.5 no-underline p-1 min-w-16" style="font-size: 10px; color: color-mix(in oklch, var(--color-base-content) 60%, transparent);">
      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/></svg>
      Alerts
    </a>
    <a href="#" class="flex flex-col items-center justify-center gap-0.5 no-underline p-1 min-w-16" style="font-size: 10px; color: color-mix(in oklch, var(--color-base-content) 60%, transparent);">
      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
      Profile
    </a>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for layout
// Add padding-bottom to main content to account for bottom nav height

Glass Variant

Preview

Frosted Glass Layout

The shell, navbar, sidebar, and bottom nav all get the glass effect.

<div class="p-6 rounded-box" style="background: linear-gradient(135deg, var(--color-primary), var(--color-info));">
  <div class="shell glass" style="height: 300px; border-radius: var(--radius-box, 0.75rem); overflow: hidden; position: relative;">
    <div class="shell-navbar" style="position: relative;">
      <div class="shell-navbar-brand" style="color: white;">Glass Shell</div>
    </div>
    <div class="shell-main" style="padding: 1.5rem; color: white;">
      <h3 style="font-weight: 600; margin-bottom: 0.5rem;">Frosted Glass Layout</h3>
      <p style="opacity: 0.8;">The shell, navbar, sidebar, and bottom nav all get the glass effect.</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="p-6 rounded-box" style="background: linear-gradient(135deg, var(--color-primary), var(--color-info));">
  <div class="flex flex-col relative" style="height: 300px; border-radius: var(--radius-box, 0.75rem); overflow: hidden;">
    <header class="sticky top-0 flex items-center gap-4 h-14 px-6 glass z-20" style="border-bottom: 1px solid rgba(255,255,255,0.18);">
      <span class="text-lg font-semibold text-white">Glass Shell</span>
    </header>
    <main class="flex-1 overflow-y-auto p-6 text-white">
      <h3 class="font-semibold mb-2">Frosted Glass Layout</h3>
      <p class="opacity-80">The shell, navbar, sidebar, and bottom nav all get the glass effect.</p>
    </main>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required