@ninna-ui/layout

10 layout components for Ninna-UI — Box, Stack, Flex, Grid, Container, Center, and more.

📖 Full Documentation →  |  📦 npm →  |  🐙 GitHub →

Structural layout components for Ninna UI — the building blocks for responsive page layouts. All components are pure React with no Radix dependency, support forwardRef, className, and data-slot CSS targeting.

Installation

pnpm add @ninna-ui/layout @ninna-ui/core

CSS Setup

@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";

@variant dark (&:is(.dark *));

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

License

MIT