@ninna-ui/layout
v0.6.0
Published
10 layout React components for Ninna UI - Box, Stack, Flex, Grid, Container, Center, Wrap, SimpleGrid, AspectRatio, Separator. Responsive, Tailwind CSS v4.
Maintainers
chnkc41Readme
@ninna-ui/layout
10 responsive React layout primitives - Box, Stack, Flex, Grid, Container, Center, SimpleGrid, and more. Pure React components with prop-driven spacing, alignment, and responsive grid layouts. No Radix dependency.
📖 Full Documentation → | 📦 npm → | 🐙 GitHub →
The structural foundation for Ninna UI apps - responsive layout primitives that handle spacing, alignment, and grid composition through clean props instead of raw CSS classes. All components are pure React with no Radix dependency, full forwardRef support, className merging, and data-slot CSS targeting.
Installation
pnpm add @ninna-ui/layout @ninna-ui/coreCSS Setup
@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";
@variant dark (&:is(.dark *));HTML Setup
Add the data-theme attribute to your <html> element:
<html data-theme="default">Components
| Component | Description | Key Props |
|-----------|-------------|-----------|
| Box | Base layout element with polymorphic as prop | as, className |
| Container | Centered content wrapper with max-width | maxWidth (sm, md, lg, xl, 2xl, full) |
| Stack | Vertical stack with gap control | gap, align, justify |
| HStack | Horizontal stack (shorthand for Stack direction="horizontal") | gap, align, justify |
| VStack | Vertical stack (shorthand for Stack direction="vertical") | gap, align, justify |
| Flex | Flexbox container with full flex control | direction, align, justify, wrap, gap |
| Grid | CSS Grid container | columns, rows, gap, flow |
| SimpleGrid | Auto-responsive grid with equal columns | columns, minChildWidth, gap |
| Center | Centers content horizontally and vertically | - |
| Wrap | Flex wrap with gap control | gap, align, justify |
| AspectRatio | Maintains a fixed aspect ratio | ratio (square, video, portrait, etc.) |
| Separator | Visual separator line | orientation (horizontal, vertical) |
Quick Start
import { Container, VStack, HStack, Grid, SimpleGrid } from "@ninna-ui/layout";
import { Heading, Text, Button } from "@ninna-ui/primitives";
function Dashboard() {
return (
<Container maxWidth="xl">
<VStack gap="lg">
<HStack gap="md" justify="between">
<Heading as="h1" size="2xl">Dashboard</Heading>
<Button color="primary">New Item</Button>
</HStack>
<SimpleGrid columns={3} gap="md">
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
</SimpleGrid>
</VStack>
</Container>
);
}All Exports
import {
Box, type BoxProps,
Container, type ContainerProps,
Stack, HStack, VStack, type StackProps,
Flex, type FlexProps,
Grid, type GridProps,
SimpleGrid, type SimpleGridProps,
Center, type CenterProps,
Wrap, type WrapProps,
AspectRatio, type AspectRatioProps,
Separator, type SeparatorProps,
} from "@ninna-ui/layout";Related Packages
@ninna-ui/core- Design tokens and theme presets (required)@ninna-ui/primitives- Base components (Button, Text, Heading)@ninna-ui/forms- Form components (Input, Select, Checkbox)- All packages - Complete package list