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
Card box - White background, border and shadow
<neura::box variant="default">...</neura::box>
<neura::box variant="bordered">...</neura::box>
<neura::box variant="muted">...</neura::box>
<neura::box variant="card">...</neura::box>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 pour créer des layouts structurés:
Section with Header and Footer
Section Header
Main content goes here with proper spacing and organization.
Grid of Boxes
Feature One
Description of feature
Feature Two
Description of feature
Feature Three
Description of feature
<div class="grid grid-cols-3 gap-4">
<neura::box variant="muted" padding="lg">
<neura::icon name="cube" />
<neura::heading>Feature One</neura::heading>
</neura::box>
<!-- More boxes -->
</div>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
Quand utiliser Box plutôt que 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
Grid item 1
Grid item 2
Grid item 3
Grid item 4
<neura::box display="block">...</neura::box>
<neura::box display="flex" direction="vertical">...</neura::box>
<neura::box display="flex" direction="horizontal">...</neura::box>
<neura::box display="grid">...</neura::box>
<neura::box display="inline">...</neura::box>
<neura::box display="inline-flex">...</neura::box>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) |