Divider

Divider renders a 1px-high, full-width Box with a subtle transparent background. Use it to separate groups of content. It is not marked "use client" and has no dependencies beyond Box.

Import#

import { Divider } from "@reactberry/system/blocks";

Usage#

import { Divider } from "@reactberry/system/blocks";
import { Box, Text } from "@reactberry/system/elements";

export default function AccountSummary() {
  return (
    <Box display="flex" flexDirection="column" gap="s">
      <Text fontWeight="600">Account</Text>
      <Divider />
      <Text>Plan: Team</Text>
    </Box>
  );
}

Examples#

Colour and spacing#

Override bg and my for a stronger line with more room around it.

Vertical#

Set width="1px" and height="100%" inside a flex row, and reset my.

API#

Divider#

Divider declares no props of its own (its parameter is typed any). Every prop is spread onto the Box after the defaults below, so any of them can be overridden.

Accessibility#

• The element is a plain div with no role="separator". Add role="separator" (and aria-orientation="vertical" for vertical use) if the divider conveys structure to assistive technology.

Notes#

• Because props are typed any, there is no compile-time checking of what you pass.