Skip to main content
ninna-ui

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

Requires @ninna-ui/core (auto-installed) + CSS setup.

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.

This is a Box component with custom styling.

Variations

Different styling variations.

Default div

Default div element

With custom className

Styled with gradient

With border

Bordered box

With shadow

Shadowed box

Styling

Various styling options.

Gradient background
Dashed border
With shadow
Rounded full

Use Cases

Common patterns using Box.

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

PropTypeDefaultDescription
classNamestring-CSS classes to apply
childrenReact.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