On this page

Box

The most basic layout component. A simple div wrapper that accepts className and children.

import { Box } from "@ninna-ui/layout";

pnpm add @ninna-ui/layout@latest

Includes @ninna-ui/core. CSS setup required.View source

Usage

Import and use the Box component.

import { Box } from "@ninna-ui/layout";

export default function Example() {
  return (
    <Box className="p-4 bg-base-200 rounded">
      Content
    </Box>
  );
}

Basic

Box with custom styling.

Live preview/ Default

This is a Box component with custom styling.

Variations

Different styling variations.

Live preview/ Default

Default div

Default div element

With custom className

Styled with gradient

With border

Bordered box

With shadow

Shadowed box

Styling

Various styling options.

Live preview/ Default

Gradient background

Dashed border

With shadow

Rounded full

Use Cases

Common patterns using Box.

Live preview/ Default

Card Component

Card Title

This is a card built with Box component.

Alert Box

⚠️

This is a warning message.

Feature Box

🚀

Feature Title

Feature description goes here.

API Reference

Complete list of props.

Props

Prop	Type	Default	Description
`as`	`ElementType`	`—`	Semantic HTML element to render (e.g., 'main', 'section')
`className`	`string`	`—`	CSS classes to apply
`children`	`React.ReactNode`	`—`	Content to render

Accessibility

Box is a generic container with no semantic meaning
Use semantic HTML elements as children when appropriate
Consider using section, article, aside, or main for better semantics