VaneUI
Layout Components
Section
A semantic container used to group related content within a page. This component helps to create a clear document outline and improve accessibility.
Basic Section
A semantic container for grouping related page content with automatic padding.
Welcome Section
This is content within a section container. Sections provide consistent vertical rhythm.
BasicSection.tsx
<Section border> <Title>Welcome Section</Title> <Text>This is content within a section container. Sections provide consistent vertical rhythm.</Text></Section>Section Sizes
Sections come in different sizes: xs, sm, md (default), lg, xl - controlling padding and spacing.
Small Section
Compact padding
Medium Section (default)
Standard padding
Large Section
Generous padding
SectionSizes.tsx
<Col> <Section border sm> <Text semibold>Small Section</Text> <Text>Compact padding</Text> </Section> <Section border> <Text semibold>Medium Section (default)</Text> <Text>Standard padding</Text> </Section> <Section border lg> <Text semibold>Large Section</Text> <Text>Generous padding</Text> </Section></Col>Section Appearances
Sections can have color appearances: primary, secondary, success, danger, etc.
Primary Section
Highlighted content area
Success Section
Positive feedback area
Danger Section
Warning or error area
SectionAppearances.tsx
<Col> <Section primary> <Text semibold>Primary Section</Text> <Text>Highlighted content area</Text> </Section> <Section success> <Text semibold>Success Section</Text> <Text>Positive feedback area</Text> </Section> <Section danger> <Text semibold>Danger Section</Text> <Text>Warning or error area</Text> </Section></Col>Section Variants
Use filled for solid backgrounds, outline for bordered sections, and shadow for elevation.
Filled Section
Solid background with primary color
Outline Section
Border only styling
Shadow Section
Elevated with drop shadow
SectionVariants.tsx
<Col> <Section filled primary> <Title filled primary>Filled Section</Title> <Text filled primary>Solid background with primary color</Text> </Section> <Section outline secondary> <Title secondary>Outline Section</Title> <Text secondary>Border only styling</Text> </Section> <Section shadow> <Title>Shadow Section</Title> <Text>Elevated with drop shadow</Text> </Section></Col>Section Layout
Use row for horizontal layout, gap for spacing between children, and noPadding to remove internal padding.
Row Layout
Content flows horizontally
With gap between items
Column Layout (default)
Content flows vertically
With gap between items
SectionLayout.tsx
<Col> <Section border gap row> <Text semibold>Row Layout</Text> <Text>Content flows horizontally</Text> <Text>With gap between items</Text> </Section> <Section border gap> <Text semibold>Column Layout (default)</Text> <Text>Content flows vertically</Text> <Text>With gap between items</Text> </Section></Col>Responsive Breakpoints
Use mobileCol or tabletCol to switch from row to column layout on smaller screens.
Left Content
Switches to stacked layout on tablets and below.
Right Content
Resize your browser to see the responsive behavior.
ResponsiveBreakpoints.tsx
<Section border gap row tabletCol> <Col> <Title>Left Content</Title> <Text>Switches to stacked layout on tablets and below.</Text> </Col> <Col> <Title>Right Content</Title> <Text>Resize your browser to see the responsive behavior.</Text> </Col></Section>Section Props
Size
Size props for controlling component dimensions
xs
Extra small size
sm
Small size
md
Medium size (default)
lg
Large size
xl
Extra large size
Hide
Hide props for responsive element visibility
mobileHide
Hide element on mobile devices and below (max-mobile: 48rem)
tabletHide
Hide element on tablet devices and below (max-tablet: 64rem)
desktopHide
Hide element on desktop devices and below (max-desktop: 80rem)
Items
Items props for controlling flex item alignment (align-items)
itemsStart
Align items to start (top/left)
itemsEnd
Align items to end (bottom/right)
itemsCenter
Align items to center
itemsBaseline
Align items to baseline
itemsStretch
Stretch items to fill container
Justify
Justify props for controlling flex content alignment (justify-content)
justifyStart
Pack items toward the start of the main axis
justifyEnd
Pack items toward the end of the main axis
justifyCenter
Center items along the main axis
justifyBetween
Distribute items with space between them
justifyAround
Distribute items with space around them
justifyEvenly
Distribute items with equal space around them
justifyStretch
Stretch items to fill the main axis
justifyBaseline
Align items along their baseline on main axis
Position
Position props for controlling CSS position property
relative
Relative positioning
absolute
Absolute positioning
fixed
Fixed positioning
sticky
Sticky positioning
static
Static positioning
Display
Display props for controlling CSS display property
inline
Inline display - flows with text
block
Block display - takes full width, new line
inlineBlock
Inline-block display - inline but with block properties
flex
Flex display - flexbox container
inlineFlex
Inline-flex display - inline flexbox container
grid
Grid display - CSS grid container
inlineGrid
Inline-grid display - inline grid container
contents
Contents display - element's box is removed, children display as if parent didn't exist
table
Table display - behaves like table element
tableCell
Table-cell display - behaves like td element
hidden
Hidden display - element is not visible
Overflow
Overflow props for controlling content overflow behavior
overflowAuto
Auto overflow - show scrollbars if needed
overflowHidden
Hidden overflow - clip content without scrollbars
overflowClip
Clip overflow - hard clip without scrollbars
overflowVisible
Visible overflow - content extends beyond bounds
overflowScroll
Scroll overflow - always show scrollbars
overflowXAuto
Auto overflow on X-axis only
overflowYAuto
Auto overflow on Y-axis only
overflowXHidden
Hidden overflow on X-axis only
overflowYHidden
Hidden overflow on Y-axis only
overflowXClip
Clip overflow on X-axis only
overflowYClip
Clip overflow on Y-axis only
overflowXVisible
Visible overflow on X-axis only
overflowYVisible
Visible overflow on Y-axis only
overflowXScroll
Scroll overflow on X-axis only
overflowYScroll
Scroll overflow on Y-axis only
Wrap
Wrap props for controlling flex wrapping behavior
flexWrap
Allow flex items to wrap to new lines when container is too narrow
flexNoWrap
Force flex items to stay on single line (may overflow)
flexWrapReverse
Wrap flex items in reverse order (last items wrap first)
Gap
Gap props for controlling spacing between children
gap
Enable gap spacing between children
noGap
Disable gap spacing
Flex Direction
Flex direction props for controlling flex layout direction
row
Flex direction row (horizontal)
column
Flex direction column (vertical)
rowReverse
Flex direction row-reverse
columnReverse
Flex direction column-reverse
Appearance
Appearance props for controlling component colors
primary
Primary color appearance (gray)
brand
Brand color appearance (blue)
accent
Accent color appearance (rose)
secondary
Secondary color appearance (gray)
tertiary
Tertiary color appearance
success
Success color appearance (green)
danger
Danger color appearance (red)
warning
Warning color appearance (amber)
info
Info color appearance (cyan)
link
Link color appearance (blue, for hyperlinks)
Border
Border props for controlling component borders
border
Enable border on all sides
borderT
Enable border on top
borderB
Enable border on bottom
borderL
Enable border on left
borderR
Enable border on right
borderX
Enable border on left and right
borderY
Enable border on top and bottom
noBorder
Disable all borders
Shape
Shape props for controlling component border radius
pill
Fully rounded corners (circular)
sharp
No rounded corners (square)
rounded
Medium rounded corners (default)
Padding
Padding props for controlling internal spacing
padding
Enable internal padding
noPadding
Disable internal padding
Breakpoint
Breakpoint props for responsive layout changes
mobileCol
Switch to column layout on mobile and below (max-mobile: 48rem)
tabletCol
Switch to column layout on tablet and below (max-tablet: 64rem)
desktopCol
Switch to column layout on desktop and below (max-desktop: 80rem)
Variant
Variant props for controlling component style variations
filled
Filled variant - solid background with contrasting text color
outline
Outline variant - transparent background with border and colored text (default)
Transparent
Transparent prop for disabling background color
transparent
Disable background color - makes component background transparent
Responsive
Responsive prop for enabling breakpoint-specific sizing
responsive
Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap