component-layout-patterns

name	component-layout-patterns
description	Production-grade component layout patterns. Dashboard grids, hero sections, masonry layouts, filter systems, and CSS-only complex components. Sources: tailwindlabs/tailwindcss-ui, saas-ui, refactoringui samples, shadcn-ui/taxonomy, tabler, and 5 others.

/component-layout-patterns

When to Use

• Building a SaaS dashboard, admin panel, or data-heavy UI
• Fixing layouts that "break" at certain viewport sizes
• Replacing JavaScript-dependent UI with CSS-only solutions
• "The sidebar/table/filter doesn't look right"

Do NOT use for

• Marketing landing pages (different layout rules)
• Mobile-only apps with no desktop breakpoint

---

SaaS Dashboard Layout (saas-ui + Tailwind)

/* App shell — sidebar + main content */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  height: 100vh;
}

@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "topbar" "content";
  }
}

---

Data Table Layout (Tabler pattern)

<!-- Responsive table with horizontal scroll on mobile -->
<div class="table-responsive">
  <table class="table table-vcenter table-mobile-md card-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Status</th>
        <th class="text-end">Actions</th>
      </tr>
    </thead>
  </table>
</div>

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Stack columns on mobile */
@media (max-width: 576px) {
  .table-mobile-md td { display: block; border: 0; }
  .table-mobile-md td::before {
    content: attr(data-label);
    font-weight: 600;
    display: inline-block;
    width: 8rem;
  }
}

---

Masonry Grid (Pinterest Gestalt)

/* CSS-only masonry — supported in modern browsers */
.masonry {
  columns: 3 280px;
  column-gap: 1rem;
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

/* JavaScript fallback for older browsers */
/* Use CSS grid with row span calculated by item height */

---

Nested Filter + Search UI (shadcn-ui/taxonomy + leandroercoli)

<!-- Filter system pattern: facets + active chips + results count -->
<div class="filter-shell">
  <div class="filter-sidebar">
    <!-- Facets: checkboxes grouped by category -->
  </div>
  <div class="filter-main">
    <div class="filter-bar">
      <SearchInput />
      <ActiveFilters />   <!-- chips showing applied filters -->
      <ResultCount />
    </div>
    <ResultsGrid />
  </div>
</div>

Rules:

• Active filters always visible above results
• Result count updates on every filter change (debounced 200ms)
• Clear All button appears when ≥ 1 filter active

---

CSS-Only Components (vincenzocorona/pure-css-components)

/* Accordion — no JavaScript */
.accordion input[type="checkbox"] { display: none; }
.accordion label { cursor: pointer; display: block; padding: 1rem; }
.accordion .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms var(--ease-out);
}
.accordion input:checked ~ .content { max-height: 500px; }

/* Dropdown — no JavaScript */
.dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu { display: none; position: absolute; z-index: 100; }

---

Flexbox Layout Tricks (modern-layout/patterns)

/* Holy Grail layout without grid */
.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.holy-grail-body { display: flex; flex: 1; }
.holy-grail-content { flex: 1; }
.holy-grail-sidebar { flex: 0 0 240px; order: -1; }

/* Sticky footer — content pushes footer down */
.layout { display: flex; flex-direction: column; min-height: 100vh; }
.main   { flex: 1; }

/* Centering that actually works */
.center { display: grid; place-items: center; }

---

Refactoring UI — "Before/After" Rules (refactoringui)

1. Give every element more space than you think it needs — start with 32px padding, not 8px
2. Use fewer font sizes — 3 sizes cover 90% of cases
3. Don't use grey text on colored backgrounds — use a tinted version of the background color
4. Add visual weight to your primary action — the CTA should be unmistakably primary
5. Treat shadows as elevation, not decoration — one elevation per depth level

---

Icon System (lineicons)

<!-- Stroke icons — no fill, consistent 1.5px stroke width -->
<svg class="icon icon-sm" aria-hidden="true">
  <use href="/icons/sprite.svg#arrow-right" />
</svg>

.icon    { width: 1em; height: 1em; stroke-width: 1.5; }
.icon-sm { width: 1rem; height: 1rem; }
.icon-md { width: 1.25rem; height: 1.25rem; }
.icon-lg { width: 1.5rem; height: 1.5rem; }
/* Never scale icons with transform — use explicit size tokens */

---

Anti-Pattern Checklist

❌ Fixed pixel widths on layout containers
❌ overflow: hidden on scrollable containers
❌ z-index > 100 without a z-index scale
❌ JavaScript accordion/dropdown when CSS-only works
❌ table for layout (only for tabular data)
❌ Icon sizes not from icon size token scale
❌ Filter UI without visible "active filters" state