JSTAcademy
0 XP
Dashboard
Crash Courses
Layout Patterns
11 min
PhD+200 XP
Crash Courses · PhD

Layout Patterns

Build dashboards, sidebars, and grids with Tailwind's flexbox and grid utilities.
11 min read+200 XP on completionCert: Tailwind CSS Crash Course
Tap any word in the text below to start reading from there.

Layout Patterns

Production dashboards share common patterns: sticky nav, scrollable sidebar, main content area, responsive grids.

App Shell Layout

// Full app shell: sticky header + sidebar + scrollable main
export default function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
      {/* Sticky Header */}
      <header className="
        sticky top-0 z-50
        bg-white/80 dark:bg-gray-900/80
        backdrop-blur-md border-b border-gray-200 dark:border-gray-800
        h-16 flex items-center px-6
      ">
        <nav className="flex items-center gap-6 w-full">
          <Logo />
          <div className="ml-auto flex items-center gap-4">
            <UserMenu />
          </div>
        </nav>
      </header>

      <div className="flex h-[calc(100vh-4rem)]">
        {/* Fixed Sidebar */}
        <aside className="
          w-64 hidden lg:flex flex-col
          border-r border-gray-200 dark:border-gray-800
          bg-white dark:bg-gray-900
          overflow-y-auto
        ">
          <Sidebar />
        </aside>

        {/* Scrollable Main */}
        <main className="flex-1 overflow-y-auto p-6">
          {children}
        </main>
      </div>
    </div>
  )
}

Dashboard Grid

<div className="space-y-6">
  {/* Stat Cards */}
  <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
    {stats.map(stat => <StatCard key={stat.label} stat={stat} />)}
  </div>

  {/* Main + Side */}
  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div className="lg:col-span-2">
      <MainChart />
    </div>
    <div>
      <RecentActivity />
    </div>
  </div>
</div>

Modal Overlay

<div className="fixed inset-0 z-50 flex items-center justify-center">
  <div
    className="absolute inset-0 bg-black/50 backdrop-blur-sm"
    onClick={onClose}
  />
  <div className="
    relative z-10 bg-white dark:bg-gray-900
    rounded-2xl shadow-xl
    w-full max-w-lg mx-4
    p-6
  ">
    {children}
  </div>
</div>
0%