Divider

A line. Horizontal or vertical, with an optional inline label.

Divider is small but earns its keep: a themed line that doesn't drift when the design system's stroke color changes, plus an inline-label mode for the OR-style splitter pattern.

Try it live

import { Divider, Box, Text, Stack } from "@plyxui/primitives";

export default function App() {
return (
  <Box padding="lg" style={{ minHeight: "100vh" }}>
    <Stack direction="vertical" gap={4} style={{ maxWidth: 360 }}>
      <Text>Above the line</Text>
      <Divider />
      <Text>Below the line</Text>
      <Divider label="OR" />
      <Text>After the OR splitter</Text>
      <Divider style="dashed" />
      <Text>After a dashed divider</Text>
    </Stack>
  </Box>
);
}

API

import { Divider } from "@plyxui/primitives";

<Divider />

<Divider label="OR" />

<Flex>
  <Text>Left</Text>
  <Divider orientation="vertical" />
  <Text>Right</Text>
</Flex>

<Divider inset={20} style="dashed" thickness={1} color={colors.statusError} />

Props

Native

Same prop shape. Native draws a View with a colored background instead of a CSS border, but the API doesn't change.