Divider

Divider separates content with a line or optional label.

Examples

Properties

Playground

Basics

Insert horizontal dividers between sections to separate content; switch the variant prop to toggle between solid and dashed lines.

Loading demo…

import { Block, Divider, Text } from '@plocks/ui';

export function Demo() {
  return (
    <Block fullWidth>
      <Text variant="p" fw="medium">
        Q1 Highlights
      </Text>
      <Text variant="p">Revenue grew 12% year over year.</Text>
      <Divider />
      <Text variant="p">Customer retention improved across every region.</Text>
      <Divider variant="dashed" />
      <Text variant="p">Product roadmap updates will ship next quarter.</Text>
    </Block>
  );
}

Color Variants

Set color to a line token (border, subtle, muted), a palette name like primary or error, or any CSS color. It defaults to border.

Loading demo…

import { Block, Divider, Text } from '@plocks/ui';

const COLORS = ['border', 'subtle', 'muted', 'gray', 'primary', 'secondary', 'success', 'warning', 'error'] as const;

export function Demo() {
  return (
    <Block fullWidth>
      {COLORS.map((color) => (
        <Block key={color} fullWidth>
          <Text variant="small" c="secondary">{color}</Text>
          <Divider color={color} />
        </Block>
      ))}
    </Block>
  );
}

Gradient & opacity

The gradient variant fades transparent → color → transparent, perfect for breaking up sections without a hard edge. The opacity prop is a shorthand for style={{ opacity }} — combine it with color to dial in subtle separators.

Loading demo…

import { Block, Divider, Text } from '@plocks/ui';

const OPACITIES = [1, 0.5, 0.25];

export function Demo() {
  return (
    <Block fullWidth>
      <Block fullWidth>
        <Text variant="small" c="secondary">gradient</Text>
        <Divider variant="gradient" color="primary" />
      </Block>
      {OPACITIES.map((opacity) => (
        <Block key={opacity} fullWidth>
          <Text variant="small" c="secondary">opacity {opacity}</Text>
          <Divider color="primary" opacity={opacity} />
        </Block>
      ))}
    </Block>
  );
}

Labeled Dividers

Provide a label node and adjust labelPosition plus color to separate form sections with contextual dividers.

Loading demo…

import { Block, Chip, Divider, Text } from '@plocks/ui';

export function Demo() {
  return (
    <Block fullWidth>
      <Text variant="p">Sign in with email</Text>
      <Divider label="or" />
      <Text variant="p">Continue with social accounts</Text>

      <Divider
        label={<Chip size="sm" variant="outline">Settings</Chip>}
        labelPosition="left"
        color="secondary"
      />
      <Text variant="p">Manage notification preferences</Text>

      <Divider label="Advanced options" labelPosition="right" color="primary" />
      <Text variant="p">Invite admins or export account data</Text>
    </Block>
  );
}

Vertical Dividers

Switch orientation="vertical" to separate horizontal layouts like navigation and add label or color when you need emphasis.

Loading demo…

import { Block, Divider, Text } from '@plocks/ui';

export function Demo() {
  return (
    <Block align="center" wrap="wrap" direction="row" h={100}>
      <Text variant="p">Home</Text>
      <Divider orientation="vertical" />
      <Text variant="p">Fixtures</Text>
      <Divider orientation="vertical" color="primary" />
      <Text variant="p">Standings</Text>
      <Divider orientation="vertical" label="Live" color="warning" />
      <Text variant="p">Highlights</Text>
    </Block>
  );
}

Sizes

Demonstrates how the size prop accepts both numeric values and spacing tokens so you can dial in subtle, comfortable, or bold divider weights.

Loading demo…

import { Block, Divider, Text } from '@plocks/ui';

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const;

export function Demo() {
  return (
    <Block fullWidth>
      {SIZES.map((size) => (
        <Block key={size} fullWidth>
          <Text variant="small" c="secondary">{size}</Text>
          <Divider size={size} />
        </Block>
      ))}

      <Block fullWidth>
        <Text variant="small" c="secondary">1 (numeric)</Text>
        <Divider size={1} />
      </Block>
    </Block>
  );
}

Variants

Showcase solid, dashed, and dotted dividers in both horizontal and vertical layouts to highlight how each variant can communicate different section breaks.

Loading demo…

import { Block, Divider, Text } from '@plocks/ui';

const VARIANTS = ['solid', 'dashed', 'dotted', 'gradient'] as const;

export function Demo() {
  return (
    <Block fullWidth>
      {VARIANTS.map((variant) => (
        <Block key={variant} fullWidth>
          <Text variant="small" c="secondary">{variant}</Text>
          <Divider variant={variant} />
        </Block>
      ))}

      <Block direction="row" align="center" wrap="wrap">
        <Text variant="small" fw="medium">
          Published
        </Text>
        <Divider orientation="vertical" variant="solid" style={{ height: 48 }} />
        <Text variant="small" fw="medium">
          Drafts
        </Text>
        <Divider orientation="vertical" variant="dashed" style={{ height: 48 }} />
        <Text variant="small" fw="medium">
          Scheduled
        </Text>
        <Divider orientation="vertical" variant="dotted" style={{ height: 48 }} />
        <Text variant="small" fw="medium">
          Archived
        </Text>
      </Block>
    </Block>
  );
}

Scan to open this page on your phoneplocks.dev/ui/Divider

React Native design for iOS, Android, and Web.

Quick Links

Components Charts Hooks Add-ons & extensions

Docs

Getting Started Examples Localization Accessibility

Agents

llms.txt Skills Sitemap

Resources

FAQ Changelog Contributing