Ready to deploy? Start building with a free account.
Speak to an expert for your Pro or Enterprise needs.
Installation
npx nyxb@latest add grid-layoutExamples
Basic Usage
Ready to deploy? Start building with a free account.
Speak to an expert for your Pro or Enterprise needs.
With Crosshairs
Corner Markers
Use crosshairs to highlight key areas or create visual anchors
Top Left
Top Right
Bottom Left
Bottom Right
Custom Columns
8 Columns
Compact layouts
12 Columns
Traditional grid
16 Columns
Fine-grained control
Line Variants
Center Line
Minimal and focused
Vertical Lines
Column-focused layout
Horizontal Lines
Row-based organization
Props
| Prop | Type | Default |
|---|---|---|
children | ReactNode | |
crosshairs | CrosshairConfig | |
gridLines | boolean | true |
columns | number | 16 |
className | string |