Box
Versatile container component for layout and spacing
Basic Usage
The most basic box without any particular style:
Basic box container
<neura::box>
<neura::text>Content here</neura::text>
</neura::box>Variants
Boxes are available in several variants for different use cases:
Default
Default box - No background style or border
Bordered
Bordered box - With border and rounded corners
Muted
Muted box - Subtle background to differentiate from content
Card
Padding
Control internal spacing with the padding attribute:
None
p-0 - No padding
XS
p-2 - Extra small padding
SM
p-3 - Small padding
MD (Default)
p-4 - Medium padding (default)
LG
p-6 - Large padding
XL
p-8 - Extra large padding
<neura::box padding="none">...</neura::box>
<neura::box padding="xs">...</neura::box>
<neura::box padding="sm">...</neura::box>
<neura::box padding="md">...</neura::box>
<neura::box padding="lg">...</neura::box>
<neura::box padding="xl">...</neura::box>Combining Variants and Padding
Combine variants and padding to create different layouts:
Bordered + Large Padding
Perfect for important sections with plenty of space
Muted + Medium Padding
Ideal for notes or secondary information
Card + Large Padding
Excellent for main content with emphasis
Bordered + Small Padding
Compact and efficient for lists or grids
<neura::box variant="bordered" padding="lg">
Large bordered box
</neura::box>
<neura::box variant="muted" padding="md">
Medium muted box
</neura::box>Layout Examples
Use box to create structured layouts:
Section with Header and Footer
Section Header
Main content goes here with proper spacing and organization.
Grid of Boxes
Nested Boxes
Nest boxes to create complex layouts:
Outer Box
Inner Box 1
Content in nested box
Inner Box 2
More nested content
<neura::box variant="bordered" padding="lg">
<neura::heading>Outer Box</neura::heading>
<neura::box variant="muted" padding="md">
Inner box content
</neura::box>
</neura::box>Custom Styling
Add Tailwind classes to customize:
Info Box
Custom blue themed box
Success Box
Custom green themed box
Warning Box
Custom yellow themed box
Error Box
Custom red themed box
<neura::box
variant="bordered"
padding="lg"
class="bg-blue-50 dark:bg-blue-950 border-blue-200"
>
<neura::heading class="text-blue-900">Info Box</neura::heading>
</neura::box>Practical Examples
Practical usage examples:
Alert Messages
Success
Your changes have been saved successfully
Warning
Please review your information before submitting
Code Snippets
example.js
function hello() {
console.log('Hello World');
}Dashboard Stats
Total Users
1,234
Revenue
$12.5K
Orders
89
Growth
+12%
Box vs Card
When to use Box instead of Card?
Use Box quand:
Vous voulez un contrôle total du padding
Vous créez des layouts complexes
Vous imbriquez plusieurs conteneurs
Use Card quand:
You want a consistent style
You display simple content
You use predefined sizes
Best Practices
Use consistent variants
Keep the same variant for similar elements
Choose appropriate padding
More content = more padding for breathing room
Avoid over-nesting
Limit nesting to 2-3 levels for clarity
Use padding="none" with caution
Useful for complex layouts where you control padding manually
Width Options
Control the width of the box with the width attribute:
Auto (default)
w-auto - Width based on content
Full
w-full - Full width container
Fit
w-fit - Fits content
Small (w-64)
w-64 - Small fixed width
Medium (w-96)
w-96 - Medium fixed width
Large (32rem)
w-[32rem] - Large fixed width
Extra Large (40rem)
w-[40rem] - Extra large fixed width
<neura::box width="auto">...</neura::box>
<neura::box width="full">...</neura::box>
<neura::box width="fit">...</neura::box>
<neura::box width="sm">...</neura::box>
<neura::box width="md">...</neura::box>
<neura::box width="lg">...</neura::box>
<neura::box width="xl">...</neura::box>Display & Direction
Control the display type and direction for flex layouts:
Display: Block (default)
Block display - Stacked vertically
Second item
Display: Flex (Vertical)
Flex vertical - Items stacked
Second item
Display: Flex (Horizontal)
Flex horizontal - Items in a row
Second item
Display: Grid
Gap Sizes
Control spacing between flex/grid children with the gap attribute:
None
Item 1
Item 2
Item 3
XS (gap-1)
Item 1
Item 2
Item 3
SM (gap-2)
Item 1
Item 2
Item 3
MD (gap-3) - Default
Item 1
Item 2
Item 3
LG (gap-4)
Item 1
Item 2
Item 3
XL (gap-5)
Item 1
Item 2
Item 3
<neura::box gap="none">...</neura::box>
<neura::box gap="xs">...</neura::box>
<neura::box gap="sm">...</neura::box>
<neura::box gap="md">...</neura::box>
<neura::box gap="lg">...</neura::box>
<neura::box gap="xl">...</neura::box>Position
Control the positioning context with the position attribute:
Relative position
Static position (default)
<neura::box position="static">...</neura::box>
<neura::box position="relative">...</neura::box>
<neura::box position="absolute">...</neura::box>
<neura::box position="fixed">...</neura::box>
<neura::box position="sticky">...</neura::box>Combined Examples
Combine multiple properties for complex layouts:
Complex Box
This box combines multiple properties: card variant, large width, flex vertical layout, large gap, and large padding.
Nested box with muted variant
<neura::box
variant="card"
width="lg"
display="flex"
direction="vertical"
gap="lg"
padding="lg"
>
Complex layout
</neura::box>Properties
| Property | Type | Default | Description |
|---|---|---|---|
| variant | string | default | Style variant (default, bordered, muted, card) |
| padding | string | default | Padding size (none, xs, sm, md, lg, xl, default) |
| width | string | auto | Width (auto, full, fit, sm, md, lg, xl) |
| gap | string | default | Gap between children (none, xs, sm, md, lg, xl, default) |
| display | string | block | Display type (block, flex, inline, inline-flex, grid) |
| direction | string | vertical | Flex direction (vertical, horizontal) - only applies when display="flex" |
| position | string|null | null | Position (static, relative, absolute, fixed, sticky, null) |