Layout

Divider

A separator.

Server safeSource

Import

import { Divider } from '@the_viveksingh/vivek-ui'

A horizontal rule

Above the rule

Below the rule

<Stack gap={4}>
  <Text>Above the rule</Text>
  <Divider />
  <Text>Below the rule</Text>
</Stack>

With a label

The label sits in the rule rather than on top of it, so the line breaks around the text instead of running behind it.

Sign in with your email

or

Continue with a single sign-on provider

<Divider label="or" />

Vertical

Needs a parent with a height, which a flex row gives it.

Docs

Components

Charts

<Stack direction="horizontal" gap={3} align="center" style={{ height: '2rem' }}>
  <Text>Docs</Text>
  <Divider orientation="vertical" />
  <Text>Components</Text>
  <Divider orientation="vertical" />
  <Text>Charts</Text>
</Stack>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Divider
PropTypeDefaultDescription
orientation'horizontal' | 'vertical'——
labelReactNode—Optional inline label, centred on the rule.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Divider carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.