Logo
Neura
Back to Home

Getting Started

Introduction
Installation
Usage
Dark Mode
Theming
Layouts

Components

Atoms

Form Elements

Field
Label
Description
Fieldset
Form
Input
Textarea
Select
Autocomplete
Calendar
Date Picker
Rich Editor
Checkbox
Radio
Switch
OTP
Dropzone
Tags Input

Layout

Container
Grid
Stack
Box
Card
Divider
Spacer

Navigation

Navlist
Link

Feedback

Alert
Callout
Toast
Dialog
Modal
Popover

Content

Text
Heading
Brand
Lottie
Skeleton

Data Display

Table
Chart
Kanban
Image Gallery
Tabs
Accordion
Badge
Avatar

Actions

Button
Command Palette
Composer
Context Menu
Dropdown

Utilities

Theme Switcher
Wizard

Container

Responsive container component for constraining content width and providing consistent spacing

Basic Usage

The most basic container with default size:

Content inside default container (max-w-5xl) 

<neura::container>
    <!-- Your content here -->
</neura::container>

Sizes

The container supports different sizes to adjust the maximum width:

Small (max-w-2xl)

Small container - Perfect for forms and narrow content

Medium (max-w-4xl)

Medium container - Great for articles and documentation

Large (max-w-6xl)

Large container - Ideal for dashboards and wide layouts

Extra Large (max-w-7xl)

Extra large container - For maximum width content

Full Width (max-w-full)

Full width container - No maximum width constraint 

<neura::container size="sm">...</neura::container>
<neura::container size="md">...</neura::container>
<neura::container size="lg">...</neura::container>
<neura::container size="xl">...</neura::container>
<neura::container size="full">...</neura::container>

Centered vs Not Centered

By default, the container is centered. You can disable it:
Centered (default):

This container is centered with mx-auto

Not Centered:

This container is not centered, aligned to the left 

<neura::container :centered="true">
    Centered container
</neura::container>

<neura::container :centered="false">
    Not centered container
</neura::container>

Use Cases

Common usage examples:

Page Layout

Page Title

Page content goes here within the container for consistent width and spacing.
Card 1
Card 2

Form Container

Login Form

Dashboard Layout

Total Users
1,234
Revenue
$45,678
Active Projects
89

Responsive Padding

The container automatically applies responsive padding:

Applied padding: px-4 on mobile, px-6 on tablet, px-8 on desktop 

The container automatically applies:
- px-4 on mobile
- px-6 on tablet (sm:px-6)
- px-8 on desktop (lg:px-8)

Nested Containers

You can nest containers to create complex layouts:

Outer Container (xl)

Inner Container (md) - Nested inside outer container

<neura::container size="xl">
    <div>Outer content</div>
    <neura::container size="md">
        <div>Inner nested container</div>
    </neura::container>
</neura::container>

Size Comparison

Visual comparison of all sizes:
sm (max-w-2xl)
md (max-w-4xl)
default (max-w-5xl)
lg (max-w-6xl)
xl (max-w-7xl)

Best Practices

Use the right size for your content

sm for forms, md for articles, lg/xl for dashboards

Keep consistency

Use the same container size for similar sections

Don't overload with nested containers

Use nested containers only when necessary

Test responsiveness

Verify that the container works well on all screens

Properties

Property Type Default Description
size string default Container size (sm, md, lg, xl, full, default)
centered boolean true Whether to center the container horizontally

Size Reference

Size Max Width Use Case
sm max-w-2xl Forms, narrow content
md max-w-4xl Articles, documentation
default max-w-5xl General content
lg max-w-6xl Dashboards, wide layouts
xl max-w-7xl Maximum width content
full max-w-full No width constraint