Layout
10 componentsResponsive layout primitives — stacks, grids, containers, and spacing utilities. Build any layout with semantic, composable components.
@ninna-ui/layoutpnpm add @ninna-ui/layoutRequires @ninna-ui/core (auto-installed) + CSS setup.
Features
- ✓12 layout components (Box, Stack, HStack, VStack, Flex, Grid, ...)
- ✓Responsive gap and spacing props
- ✓CSS Grid and Flexbox abstractions
- ✓Container with 6 max-width presets
- ✓AspectRatio for media embeds
- ✓Zero runtime — pure Tailwind class composition
Components
Box
Base layout primitive — a styled div with all layout props.
Container
Centered content wrapper with responsive max-width presets.
Stack
Vertical stack with consistent spacing between children.
Flex
Flexbox container with direction, alignment, and gap control.
Grid
CSS Grid container with columns, rows, and gap configuration.
SimpleGrid
Auto-responsive grid with minChildWidth or fixed column count.
Center
Centers content horizontally and vertically.
Wrap
Flex wrap container for tags, chips, and inline elements.
AspectRatio
Maintains a fixed aspect ratio for images and video embeds.
Separator
Horizontal or vertical visual divider between content sections.
Quick Start
import { Box, Container, Stack } from "@ninna-ui/layout";