Divider

Available from version 0.3.0

A divider is a thin line that groups content in lists and layouts.

Basics

import { Divider } from 'tailwind-joy/components';

Customization

Rendered with content

Use the Divider to wrap elements that will be added to it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac erat et nibh fermentum facilisis at quis metus. Ut tempor tellus odio, vitae imperdiet arcu finibus posuere. Quisque sollicitudin faucibus rutrum.

Visual indicator

import { Box, Chip, Divider } from 'tailwind-joy/components';

export function DividerRenderedWithContent() {
  const content = (
    <Box className="text-joy-neutral-600 dark:text-joy-neutral-400 text-[0.875rem]">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac erat et
      nibh fermentum facilisis at quis metus. Ut tempor tellus odio, vitae
      imperdiet arcu finibus posuere. Quisque sollicitudin faucibus rutrum.
    </Box>
  );

  return (
    <Box className="space-y-2">
      {content}
      <Divider>Visual indicator</Divider>
      {content}
      <Divider>
        <Chip size="sm">Visual indicator</Chip>
      </Divider>
      {content}
    </Box>
  );
}

Vertical divider

Use the orientation prop to render a vertical divider.

import {
  MdFormatAlignCenter,
  MdFormatAlignLeft,
  MdFormatAlignRight,
  MdFormatBold,
  MdFormatItalic,
} from 'react-icons/md';
import { Box, Divider } from 'tailwind-joy/components';
import { iconClass } from 'tailwind-joy/utils';

export function DividerVerticalDivider() {
  return (
    <Box
      className="
        bg-joy-neutral-50 dark:bg-joy-neutral-900 text-joy-neutral-700 dark:text-joy-neutral-300
        border-joy-neutral-500/20 dark:border-joy-neutral-400/20 flex w-fit items-center
        rounded-md border border-solid [&_hr]:mx-1 [&_svg]:m-3
      "
    >
      <MdFormatAlignLeft className={iconClass()} />
      <MdFormatAlignCenter className={iconClass()} />
      <MdFormatAlignRight className={iconClass()} />
      <Divider orientation="vertical" />
      <MdFormatBold className={iconClass()} />
      <MdFormatItalic className={iconClass()} />
    </Box>
  );
}

info

iconClass() is an adapter function provided by Tailwind-Joy.

Vertical with text

You can also render a vertical divider with content.

Visual indicator

import { Box, Divider } from 'tailwind-joy/components';

export function DividerVerticalWithText() {
  const content = (
    <Box className="text-joy-neutral-600 dark:text-joy-neutral-400 text-[0.875rem]">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac erat et
      nibh fermentum facilisis at quis metus. Ut tempor tellus odio, vitae
      imperdiet arcu finibus posuere. Quisque sollicitudin faucibus rutrum.
    </Box>
  );

  return (
    <Box className="flex flex-row gap-4">
      {content}
      <Divider orientation="vertical">Visual indicator</Divider>
      {content}
    </Box>
  );
}

Child position

To control the position of the content, override the CSS variable --Divider-childPosition.

Visual indicator

Position:50%

import { useState } from 'react';
import { Box, Chip, Divider } from 'tailwind-joy/components';

declare module 'react' {
  interface CSSProperties {
    '--Divider-childPosition'?: string;
  }
}

export function DividerChildPosition() {
  const [position, setPosition] = useState('50');
  const content = (
    <Box className="text-joy-neutral-600 dark:text-joy-neutral-400 text-[0.875rem]">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac erat et
      nibh fermentum facilisis at quis metus. Ut tempor tellus odio, vitae
      imperdiet arcu finibus posuere. Quisque sollicitudin faucibus rutrum.
    </Box>
  );

  return (
    <Box className="space-y-2">
      <Box className="space-y-2">
        {content}
        <Divider style={{ '--Divider-childPosition': `${position}%` }}>
          <Chip size="sm">Visual indicator</Chip>
        </Divider>
        {content}
      </Box>
      <Box className="flex items-center justify-center gap-2">
        <span className="w-20 text-right">Position:</span>
        <input
          type="range"
          name="position-range"
          min="0"
          max="100"
          defaultValue="50"
          onChange={(e) => setPosition(e.currentTarget.value)}
        />
        <span className="w-20 text-left">{position}%</span>
      </Box>
    </Box>
  );
}

Anatomy

If a Divider component has content, it is composed of a single root <div> element.

<div class="tj-divider-root ...">
  <!-- Divider contents -->
</div>

Otherwise, the Divider component is composed of a single root <hr> element.

<hr class="tj-divider-root ..." />

API

See the documentation below for a complete reference to all of the props available to the components mentioned here.

Divider

Basics​

Customization​

Rendered with content​

Vertical divider​

Vertical with text​

Child position​

Anatomy​

API​

Basics

Customization

Rendered with content

Vertical divider

Vertical with text

Child position

Anatomy

API