Container Component

The Container component is a layout utility designed to control content width, horizontal alignment, and spacing. It provides a simple and consistent way to structure page sections while remaining fully flexible for custom layouts and styling.

Use size to define max-width constraints,padding for internal spacing, and center to automatically align content horizontally. Combine it with className or style for complete layout control.

Open Layout Playground

Import Component From Library

javascript

1import { Container } from "@neuctra/ui";

Basic Usage Code

Start with a simple container. The component provides responsive layout control with customizable width, padding, and alignment.

tsx

1import { Container } from '@neuctra/ui';
2
3function BasicExample() {
4  return (
5    <Container
6      size="md"
7      center
8      className="bg-zinc-800 p-4 rounded-lg"
9    >
10      Hello Developer! I am a container.
11    </Container>
12  );
13}

Basic Example

Hello Developer! I am contianer.

Layout Recipes

Use Container with utility classes to quickly build common layouts. Below are reusable patterns you can copy directly into your projects.

Flex Row (Space Between)

Logo

Actions

Flex Center (Perfect Centering)

Centered Content

Flex Column (Stacked Layout)

Header

Content

Footer

Grid (2 Columns)

Responsive Grid

Card Grid Layout

Card 1

Card 2

Card 3

Works Just Like a div

Container is a drop-in replacement for <div>. You can use it with any div props, any CSS classes, and any inline styles.

Basic Styling

Just like a div

Layout with Flex

LeftRight

Grid Layout

Event Handlers

Click me

Accessibility

Press Enter or click

Data Attributes

Custom data attributes

Pro Tip

Use Container anywhere you'd use a <div>. It accepts all the same props: id, onClick,style, aria-*, data-*, etc.

Props Table

All available props for the Container component.

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "full"	"full"	Controls max-width of the container
padding	"none" \| "sm" \| "md" \| "lg" \| "xl"	"none"	Applies internal spacing (padding)
center	boolean	true	Centers container horizontally using auto margins
children	ReactNode	—	Content inside the container
className	string	—	Custom Tailwind or CSS classes for layout (flex, grid, etc.)
style	CSSProperties	—	Inline styles (works without Tailwind)
...rest	HTMLAttributes<div>	—	All native div props (onClick, id, aria-, data-, etc.)

Common Mistakes

<Container padding="1.5rem" />

Padding only accepts predefined values (sm, md, lg...)

<Container width="80%" />

Container does not support custom width props

<Container className="p-6 w-[80%]" />

Use className or style for layout control

Pro Tips

The Container behaves like a <div> and does not manage layout automatically. Its primary responsibility is controlling width and horizontal spacing.

Use className to handle layout (flex, grid, spacing, etc.)

Think of Container as a wrapper, not a layout system

It helps maintain consistent content width across your UI

Best Practices:

Combine with flex, grid, and gap for layouts
Use size="lg" or "xl" for readable content width
Use full for edge-to-edge sections (hero, banners)
Avoid putting layout logic inside Container — keep it reusable
Keep Container consistent across pages to maintain visual rhythm

Frequently Asked Questions

How do I install and import the Container component?

Install the @neuctra/ui package, then import it with: import { Container } from "@neuctra/ui";

What variants and sizes does Container support?

Container supports sizes: sm, md, lg, xl, 2xl, full. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.

Is the Container component accessible?

Container is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.