Shell
Application layout shell with navbar, collapsible sidebar, main content area, and mobile bottom navigation.
Basic Shell
Preview
My App
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
Acme Inc
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
<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
Glass Shell
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