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

Stack

Flexible layout component for stacking elements vertically or horizontally with configurable spacing and alignment

Basic Usage

The most basic stack with vertical direction (default):
Item 1
Item 2
Item 3 
<neura::stack>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</neura::stack>

Direction

Control the stacking direction:

Vertical (default)

Item 1
Item 2
Item 3

Horizontal

Item 1
Item 2
Item 3
<neura::stack direction="vertical">...</neura::stack>
<neura::stack direction="horizontal">...</neura::stack>

Gap Sizes

Control spacing between items with the gap attribute:
None (gap-0)
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-4) - Default
Item 1
Item 2
Item 3
LG (gap-6)
Item 1
Item 2
Item 3
XL (gap-8)
Item 1
Item 2
Item 3
<neura::stack gap="none">...</neura::stack>
<neura::stack gap="xs">...</neura::stack>
<neura::stack gap="sm">...</neura::stack>
<neura::stack gap="md">...</neura::stack>
<neura::stack gap="lg">...</neura::stack>
<neura::stack gap="xl">...</neura::stack>

Alignment

Control how items are aligned within the stack. For vertical stacks, align controls horizontal alignment. For horizontal stacks, align controls vertical alignment:

Vertical Stack - Align: Start (horizontal alignment)

Item 1
Item 2
Item 3

Vertical Stack - Align: Center (horizontal alignment)

Item 1
Item 2
Item 3

Vertical Stack - Align: End (horizontal alignment)

Item 1
Item 2
Item 3

Horizontal Stack - Align: Start (vertical alignment)

Item 1
Item 2
Item 3

Horizontal Stack - Align: Center (vertical alignment)

Item 1
Item 2
Item 3

Horizontal Stack - Align: End (vertical alignment)

Item 1
Item 2
Item 3

Horizontal Stack - Align: Stretch (vertical alignment)

Item 1
Item 2
Item 3
<neura::stack align="start">...</neura::stack>
<neura::stack align="center">...</neura::stack>
<neura::stack align="end">...</neura::stack>
<neura::stack align="stretch">...</neura::stack>

Justify Content

Control horizontal distribution of items (for horizontal stacks):
Start
Item 1
Item 2
Center
Item 1
Item 2
End
Item 1
Item 2
Between
Item 1
Item 2
Around
Item 1
Item 2
<neura::stack justify="start">...</neura::stack>
<neura::stack justify="center">...</neura::stack>
<neura::stack justify="end">...</neura::stack>
<neura::stack justify="between">...</neura::stack>
<neura::stack justify="around">...</neura::stack>

Padding & Margin

Add padding or margin to the stack container:

Padding

Small padding (p-2)
Medium padding (p-4)
Large padding (p-6)
Extra large padding (p-8)

Margin

Stack with medium margin (m-4) 
<neura::stack padding="sm">...</neura::stack>
<neura::stack padding="md">...</neura::stack>
<neura::stack padding="lg">...</neura::stack>
<neura::stack margin="md">...</neura::stack>

Rounded Corners

Add rounded corners to the stack:
Small rounded (rounded-sm)
Medium rounded (rounded-md)
Large rounded (rounded-lg)
Extra large rounded (rounded-xl)
2XL rounded (rounded-2xl)
Full rounded (rounded-full) 
<neura::stack rounded="sm">...</neura::stack>
<neura::stack rounded="md">...</neura::stack>
<neura::stack rounded="lg">...</neura::stack>
<neura::stack rounded="xl">...</neura::stack>
<neura::stack rounded="full">...</neura::stack>

Display Types

Change the display type of the stack:

Flex (default)

Flex item
Flex item

Inline-Flex

Inline-flex item
Inline-flex item

Block

Block item
Block item

Grid

Grid item
Grid item
Grid item
Grid item
<neura::stack display="flex">...</neura::stack>
<neura::stack display="inline-flex">...</neura::stack>
<neura::stack display="block">...</neura::stack>
<neura::stack display="grid">...</neura::stack>

Position

Control the positioning context:
Relative position
Static position (default) 
<neura::stack position="static">...</neura::stack>
<neura::stack position="relative">...</neura::stack>
<neura::stack position="absolute">...</neura::stack>
<neura::stack position="fixed">...</neura::stack>
<neura::stack position="sticky">...</neura::stack>

Combined Examples

Combine multiple properties for complex layouts:

Title 

<neura::stack 
    direction="horizontal" 
    gap="lg" 
    align="center" 
    justify="between" 
    padding="lg" 
    rounded="lg"
>
    Complex layout
</neura::stack>

Properties

Property Type Default Description
direction string vertical Stacking direction (vertical, horizontal)
gap string md Spacing between items (none, xs, sm, md, lg, xl)
align string center Vertical alignment (start, center, end, stretch)
justify string|null null Horizontal distribution (start, center, end, between, around, null)
padding string|null null Internal padding (none, xs, sm, md, lg, xl, null)
margin string|null null External margin (none, xs, sm, md, lg, xl, null)
rounded string|null null Border radius (none, sm, md, lg, xl, 2xl-9xl, full, null)
display string flex Display type (flex, inline-flex, block, grid)
position string|null null Position (static, relative, absolute, fixed, sticky, null)