VaneUI
Basic Components
Divider
Renders a thin line to separate content and create a clear visual hierarchy. Dividers can be used to group related items in lists and layouts.
Basic Divider
A simple horizontal divider.
Content above the divider
Content below the divider
BasicDivider.tsx
<div> <Text>Content above the divider</Text> <Divider /> <Text>Content below the divider</Text></div>Divider Sizes
Dividers come in different sizes such as xs, sm, md, lg, xl.
Divider xs
Content after xs divider
Divider sm
Content after sm divider
Divider md
Content after md divider
Divider lg
Content after lg divider
Divider xl
Content after xl divider
DividerSizes.tsx
<Col lg> <div> <Text semibold>Divider xs</Text> <Divider xs /> <Text>Content after xs divider</Text> </div> <div> <Text semibold>Divider sm</Text> <Divider sm /> <Text>Content after sm divider</Text> </div> <div> <Text semibold>Divider md</Text> <Divider md /> <Text>Content after md divider</Text> </div> <div> <Text semibold>Divider lg</Text> <Divider lg /> <Text>Content after lg divider</Text> </div> <div> <Text semibold>Divider xl</Text> <Divider xl /> <Text>Content after xl divider</Text> </div></Col>Divider Appearances
Dividers can have different appearances.
Divider primary
Content after primary divider
Divider brand
Content after brand divider
Divider accent
Content after accent divider
Divider secondary
Content after secondary divider
Divider tertiary
Content after tertiary divider
Divider success
Content after success divider
DividerAppearances.tsx
<Col lg> <div> <Text semibold>Divider primary</Text> <Divider primary /> <Text>Content after primary divider</Text> </div> <div> <Text semibold>Divider brand</Text> <Divider brand /> <Text>Content after brand divider</Text> </div> <div> <Text semibold>Divider accent</Text> <Divider accent /> <Text>Content after accent divider</Text> </div> <div> <Text semibold>Divider secondary</Text> <Divider secondary /> <Text>Content after secondary divider</Text> </div> <div> <Text semibold>Divider tertiary</Text> <Divider tertiary /> <Text>Content after tertiary divider</Text> </div> <div> <Text semibold>Divider success</Text> <Divider success /> <Text>Content after success divider</Text> </div></Col>Separating Items
Dividers used to separate individual items.
First Item
Description of first item
Second Item
Description of second item
Third Item
Description of third item
SeparatingItems.tsx
<Col> <div className="p-4 bg-gray-50 rounded"> <Text semibold>First Item</Text> <Text>Description of first item</Text> </div> <Divider /> <div className="p-4 bg-gray-50 rounded"> <Text semibold>Second Item</Text> <Text>Description of second item</Text> </div> <Divider /> <div className="p-4 bg-gray-50 rounded"> <Text semibold>Third Item</Text> <Text>Description of third item</Text> </div></Col>Separating Content Blocks
Dividers used to separate larger content blocks.
Block 1
This is the first block with some content that demonstrates how dividers can be used to separate different blocks of content.
Block 2
This is the second block that follows the divider. The divider provides a clear visual separation between blocks.
Block 3
This is the third and final block, demonstrating consistent use of dividers throughout the content.
SeparatingContentBlocks.tsx
<Col lg> <div> <Text lg semibold>Block 1</Text> <Text>This is the first block with some content that demonstrates how dividers can be used to separate different blocks of content.</Text> </div> <Divider /> <div> <Text lg semibold>Block 2</Text> <Text>This is the second block that follows the divider. The divider provides a clear visual separation between blocks.</Text> </div> <Divider /> <div> <Text lg semibold>Block 3</Text> <Text>This is the third and final block, demonstrating consistent use of dividers throughout the content.</Text> </div></Col>Divider 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
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)
Padding
Padding props for controlling internal spacing
padding
Enable internal padding
noPadding
Disable internal padding
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