Divider

Dividers are thin lines that group content in lists or other containers

Usage

Dividers are one way to visually group components and create hierarchy. They can also be used to imply nested parent/child relationships.

Instalation

Run the following command:

npm i @radix-ui/react-separator

Copy and paste the following code into your project.

import * as React from 'react'
import * as DividerPrimitive from '@radix-ui/react-separator'

import { cn } from '@/lib/utils'

const Divider = React.forwardRef<
  React.ElementRef<typeof DividerPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof DividerPrimitive.Root>
>(
  (
    { className, orientation = 'horizontal', decorative = true, ...props },
    ref
  ) => (
    <DividerPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        'shrink-0 bg-outlineVariant',
        orientation === 'horizontal'
          ? 'h-[1px] w-full'
          : 'h-auto w-[1px] self-stretch',
        className
      )}
      {...props}
    />
  )
)
Divider.displayName = DividerPrimitive.Root.displayName

export { Divider }

Update the import paths to match your project setup.

Examples

Full width

Full width divider are used to group visual elements together, and indicate when elements are related to each other from an interaction perspective. They are also used for separate interactive and non-interactive areas of a container such as a card.

Cumpleaños de mamá
Hola, en mi casa si tu ayudas con la comi...

Graduación de Inés
Hola hija mía aquí tienes unas fotos preci...

Pre sale concert tickets
I just show there is a couple of shows lined...

import { Divider } from '@/components/ui/divider'

export const FullWidthDivider = () => {
  return (
    <div className="bg-background py-4">
      <ul>
        <li className="px-4">
          <div>
            <div className="text-title-md">Cumpleaños de mamá</div>
            <div className="text-onSurface/60">
              Hola, en mi casa si tu ayudas con la comi...
            </div>
          </div>
        </li>
        <Divider className="my-4" />
        <li className="px-4">
          <div>
            <div className="text-title-md">Graduación de Inés</div>
            <div className="text-onSurface/60">
              Hola hija mía aquí tienes unas fotos preci...
            </div>
          </div>
        </li>
        <Divider className="my-4" />
        <li className="px-4">
          <div>
            <div className="text-title-md">Pre sale concert tickets</div>
            <div className="text-onSurface/60">
              I just show there is a couple of shows lined...
            </div>
          </div>
        </li>
      </ul>
    </div>
  )
}

The fortnightly

How to farm with less water: lessons from a fourth-generat...

import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Divider } from '@/components/ui/divider'

export const FullWidthDivider = () => {
  return (
    <Card variant="outlined" className="max-w-[400px] pb-2">
      <Card.Header className="flex-row items-center gap-4">
        <img
          src="https://images.unsplash.com/photo-1598880940371-c756e015fea1?q=80&w=2400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          className="aspect-square h-20 rounded-sm"
        />
        <div>
          <Card.Headline>The fortnightly</Card.Headline>
          <Card.Subhead>
            How to farm with less water: lessons from a fourth-generat...
          </Card.Subhead>
        </div>
      </Card.Header>
      <Divider className="mt-4" />
      <CardFooter className="pt-2">
        <Button variant="text" className="-ml-2">
          Read more
        </Button>
      </CardFooter>
    </Card>
  )
}

Inset

Inset dividers separate related content, such as emails in a list. They should be used with anchoring elements such as icons or avatars, and align with the leading edge of the screen.

Glass & Grace
Sound Check. Making of Eye...

The fortnightly
What Buttons Are They Pushing...

The Art of Zen
How to Find Balance and Peace...

import { Divider } from '@/components/ui/divider'

export const InsetDivider = () => {
  return (
    <div className="bg-background p-4">
      <ul>
        <li className="flex items-center gap-4">
          <div className="bg-outlineVariant aspect-square h-14 rounded-full" />
          <div>
            <div className="text-title-md">Glass & Grace</div>
            <div className="text-onSurface/60">
              Sound Check. Making of Eye...
            </div>
          </div>
        </li>
        <Divider className="my-4" />
        <li className="flex items-center gap-4">
          <div className="bg-outlineVariant aspect-square h-14 rounded-full" />
          <div>
            <div className="text-title-md">The fortnightly</div>
            <div className="text-onSurface/60">
              What Buttons Are They Pushing...
            </div>
          </div>
        </li>
        <Divider className="my-4" />
        <li className="flex items-center gap-4">
          <div className="bg-outlineVariant aspect-square h-14 rounded-full" />
          <div>
            <div className="text-title-md">The Art of Zen</div>
            <div className="text-onSurface/60">
              How to Find Balance and Peace...
            </div>
          </div>
        </li>
      </ul>
    </div>
  )
}

Vertical Dividers

A vertical divider can be used to arrange content horizontally.

import { Divider } from '@/components/ui/divider'
import { Icon } from '@/components/ui/icon'
import { IconButton } from '@/components/ui/icon-button'

export const VerticalDivider = () => {
  return (
    <div className="bg-background flex items-center rounded-sm p-1">
      <IconButton variant="standard" className="rounded-xs">
        <Icon symbol="format_align_left" />
      </IconButton>
      <IconButton variant="standard" className="rounded-xs">
        <Icon symbol="format_align_center" />
      </IconButton>
      <IconButton variant="standard" className="rounded-xs">
        <Icon symbol="format_align_right" />
      </IconButton>

      <Divider orientation="vertical" className="mx-3" />

      <IconButton variant="standard" className="rounded-xs">
        <Icon symbol="format_bold" />
      </IconButton>
      <IconButton variant="standard" className="rounded-xs">
        <Icon symbol="format_italic" />
      </IconButton>
      <IconButton variant="standard" className="rounded-xs">
        <Icon symbol="format_underlined" />
      </IconButton>
    </div>
  )
}

arrow_back Dialogs Lists arrow_forward