Do layout primitives add any runtime overhead?

No. Each layout primitive is a thin wrapper that maps props to Tailwind CSS v4 utility classes. There's no JavaScript runtime, no context provider, and no style computation — just className concatenation.

Can I use Tailwind utilities alongside layout primitives?

Yes. All layout primitives accept a className prop that merges with the generated classes. Use Tailwind utilities for one-off adjustments while keeping the semantic API for the main layout.

Components

React Layout Components

VStack, HStack, Flex, Grid, Container, and more — responsive layout primitives that map to Tailwind CSS v4 utilities.

import { VStack, HStack, Container, Grid, SimpleGrid, Center } from "@ninna-ui/layout";

<Container maxW="4xl">
  <VStack gap="6">
    <HStack justify="between">
      <Heading>Title</Heading>
      <Button>Action</Button>
    </HStack>
    <SimpleGrid columns={{ base: 1, md: 3 }} gap="4">
      <Card />
      <Card />
      <Card />
    </SimpleGrid>
  </VStack>
</Container>

Key features

VStack / HStack / Stack: vertical, horizontal, and configurable stacking

Flex: full flexbox control with direction, wrap, justify, align

Grid: CSS grid with responsive column counts

SimpleGrid: auto-fitting responsive grid

Container: max-width constrained wrapper

Center, Wrap, AspectRatio, Separator, Box

Semantic layout primitives

Instead of writing className="flex flex-col gap-6" on every div, use VStack with a gap prop. The intent is clearer, and the API is typed — gap accepts spacing tokens like "4", "6", "8" rather than arbitrary strings.

All layout primitives map directly to Tailwind CSS v4 utilities, so there's zero runtime cost. They're function components that spread props onto a div with the right classes.

Component Docs

Stack Flex Grid Container SimpleGrid