Layout

Divider

A 1px rule in the default border color.

import { Divider } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Orientations

Above

Blog

Media

divider/orientations.tsx

import { Divider, Stack, Text } from '@jsonresume/ui';

export default function DividerOrientations() {
  return (
    <Stack gap={4}>
      <Text>Above</Text>
      <Divider />
      <Stack direction="row" gap={3} align="center">
        <Text>AI</Text>
        <Divider orientation="vertical" />
        <Text>Blog</Text>
        <Divider orientation="vertical" />
        <Text>Media</Text>
      </Stack>
    </Stack>
  );
}

Accessibility

Decorative by default (aria-hidden). Set decorative={false} for a semantic separator.

Props

Also accepts the attributes of the element Divider renders.
Prop	Type	Default	Description
decorative	boolean	true	Decorative dividers are hidden from assistive technology. Defaults to true.
orientation	horizontalvertical	horizontal