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.
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 default
Content after default divider
Divider accent
Content after accent divider
Divider primary
Content after primary 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 default</Text>
<Divider default />
<Text>Content after default divider</Text>
</div>
<div>
<Text semibold>Divider accent</Text>
<Divider accent />
<Text>Content after accent divider</Text>
</div>
<div>
<Text semibold>Divider primary</Text>
<Divider primary />
<Text>Content after primary 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>Divider in Lists
Dividers used to separate list items.
First List Item
Description of first item
Second List Item
Description of second item
Third List Item
Description of third item
DividerinLists.tsx
<Col>
<div className="p-4 bg-gray-50 rounded">
<Text semibold>First List Item</Text>
<Text>Description of first item</Text>
</div>
<Divider />
<div className="p-4 bg-gray-50 rounded">
<Text semibold>Second List Item</Text>
<Text>Description of second item</Text>
</div>
<Divider />
<div className="p-4 bg-gray-50 rounded">
<Text semibold>Third List Item</Text>
<Text>Description of third item</Text>
</div>
</Col>Divider in Sections
Dividers used to separate content sections.
Section 1
This is the first section with some content that demonstrates how dividers can be used to separate different sections of content.
Section 2
This is the second section that follows the divider. The divider provides a clear visual separation between sections.
Section 3
This is the third and final section, demonstrating consistent use of dividers throughout the content.
DividerinSections.tsx
<Col lg>
<div>
<Text lg semibold>Section 1</Text>
<Text>This is the first section with some content that demonstrates how dividers can be used to separate different sections of content.</Text>
</div>
<Divider />
<div>
<Text lg semibold>Section 2</Text>
<Text>This is the second section that follows the divider. The divider provides a clear visual separation between sections.</Text>
</div>
<Divider />
<div>
<Text lg semibold>Section 3</Text>
<Text>This is the third and final section, demonstrating consistent use of dividers throughout the content.</Text>
</div>
</Col>