Adaptive Density Grid
A fluid polymorphic grid featuring velocity-driven spring pill tabs, staggered layout reflow animations, and built-in memory optimization.
10.4 KB
•Updated on September 14, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-adaptive-density-gridUsage
Code
import { AdaptiveDensityGrid } from '@/components/spaceui/adaptive-density-grid'Code
<AdaptiveDensityGrid
items={items}
options={[
{ id: 'spacious', label: 'Spacious', columns: { desktop: 2, tablet: 2, mobile: 1 } },
{ id: 'normal', label: 'Normal', columns: { desktop: 3, tablet: 2, mobile: 1 } },
{ id: 'compact', label: 'Compact', columns: { desktop: 4, tablet: 3, mobile: 2 } },
]}
renderItem={(item) => <div className="rounded-xl border p-4 bg-muted">{item.title}</div>}
/>API Reference
AdaptiveDensityGrid Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | T[] | - | Array of data items to render |
renderItem | (item: T, index: number, state: { isRearranging: boolean }) => ReactNode | - | Custom item render function |
children | ReactNode | - | Direct children components (alternative to items) |
options | DensityOption[] | DEFAULT_OPTIONS | Array of layout density or category filter options |
activeId | string|number | - | Controlled active option id |
defaultActiveId | string|number | options[0]?.id | Default active option id |
onOptionChange | (id: string|number) => void | - | Callback fired when option selection changes |
showControls | boolean | true | Show or hide the top selector bar |
controlsExtra | ReactNode | - | Extra elements rendered alongside the controls (e.g. search input) |
staggerDelay | number | 0.012 | Stagger delay in seconds between tile animations |
duration | number | 0.55 | Layout reflow transition duration in seconds |
memoryOptimized | boolean | true | Enables content-visibility: auto to prevent memory saturation |
Category Filter & Cards Reflow
Use the adaptive density grid as an animated tab reflow system with search integration and interactive cards.
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.