← DOCS
layout

BrokenGrid

CSS Grid with chaotic offset/rotation per item, hover effects, and text truncation.

npx chaos add broken-grid

PREVIEW

01
02
03

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;
import { BrokenGrid } from '@oalacea/chaosui/layout/broken-grid';

<BrokenGrid
  items={[
    { title: 'Infrastructure', description: 'Systems broken' },
    { title: 'Interfaces', description: 'User chaos' },
    { title: 'Signals', description: 'Lost comms' }
  ]}
  columns={3}
  chaosLevel={0.6}
/>

PROPS

PropTypeDefault
itemsGrid items
GridItem[]-
columnsNumber of columns
number3
chaosLevelChaos level (0-1)
number0.5
truncateTextTruncate long text
booleantrue
borderStyleBorder style
"solid" | "dashed" | "double""solid"