Bento Grid
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { BentoGrid } from "@corew500/ui/bento-grid"
<BentoGrid>Content</BentoGrid>Variants
bentoGridVariants
| Axis | Values | Default |
|---|---|---|
| columns | 1234 | 3 |
| autoRows | defaultsmlg | default |
bentoGridItemVariants
| Axis | Values | Default |
|---|---|---|
| colSpan | 1234 | 1 |
| rowSpan | 123 | 1 |
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| loading | enum | false | Show skeleton loading state |
| loadingItems | number | 6 | Number of skeleton items to show when loading (default: 6) |
| loadingItemRenderer | (index: number) => ReactNode | — | Custom skeleton item renderer |
| columns | enum | — | — |
| autoRows | enum | — | — |
Accessibility
Additional
- - Uses semantic div elements; wrap in section or article as needed.
- Ensure grid items have proper heading hierarchy.
- Consider providing a skip link for long grids.
Localization
Translatable Content
- - No text content; localize grid item children as needed.
RTL Support
- Grid layout works correctly in both LTR and RTL layouts.