Layout primitives
Stack, Grid, Container and Center replace hand-written flexbox and grid CSS. Token-based spacing, responsive props, and they accept className — so Tailwind utilities work too.
LayoutNew
Why primitives
Most UI code is layout. Instead of repeating display: flex; gap: … everywhere, compose layout from four primitives. Every spacing value is a design token, so layouts stay consistent and re-theme automatically.
tsx
import { Stack, HStack, Grid, Container } from '@vhyxui/react';Stack / HStack / VStack
Invoices
12 open · 3 overdue
Grid
Starter
Everything in Free, plus more.
Team
PopularEverything in Starter, plus more.
Business
Everything in Team, plus more.
Enterprise
Everything in Business, plus more.
1
2
3
Container & Center
640px max width, centered
Sizes: sm 640 · md 768 · lg 1024 (default) · xl 1280 · full. Center fullHeight fills the viewport — ideal for auth and empty screens.
Props
Stack
| Prop | Type | Default | Description |
|---|---|---|---|
direction | 'row' | 'column' | 'column' | Main axis. HStack/VStack preset it. |
gap | Space (0 … 32) | 3 | Gap in token steps (--vhyx-space-*). |
align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | — | Cross-axis alignment. |
justify | 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | — | Main-axis distribution. |
wrap | boolean | false | Allow wrapping. |
collapseBelow | 'sm' | 'md' | 'lg' | — | Turn a row into a column below a breakpoint. |
padding | Space | — | Padding on all sides. |
as | ElementType | 'div' | Render as any element (section, ul, nav…). |
Grid
| Prop | Type | Default | Description |
|---|---|---|---|
columns | number | 1 | Equal columns. |
minChildWidth | string | number | — | Responsive auto-fit — as many columns as fit, each at least this wide. |
gap | Space | 4 | Gap in token steps. |
collapseBelow | 'sm' | 'md' | 'lg' | — | Single column below a breakpoint (fixed columns only). |