Introduction

Separators visually divide content into clear sections. They support horizontal and vertical orientations and are accessible by default (built on Radix UI's Separator primitive).

Installation

import { Separator } from '@/components/ui/separator';

Usage

<Separator />
<Separator orientation="vertical" className="h-6" />

Examples

Default

IndiaCN

An open source design system.

Docs

Source

License

SeparatorDefault

import { Separator } from '@/components/ui/separator';
import { Body2, Headline5, Label2 } from '@/components/ui/typography';

export default function Component() {
  return (
    <div className="w-full max-w-sm">
      <Headline5>IndiaCN</Headline5>
      <Body2 className="text-neutral-500">An open source design system.</Body2>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-4 text-sm">
        <Label2>Docs</Label2>
        <Separator orientation="vertical" />
        <Label2>Source</Label2>
        <Separator orientation="vertical" />
        <Label2>License</Label2>
      </div>
    </div>
  );
}

Vertical

Left

Middle

Right

SeparatorVertical

import { Separator } from '@/components/ui/separator';
import { Body2 } from '@/components/ui/typography';

export default function Component() {
  return (
    <div className="flex h-10 items-center gap-4">
      <Body2>Left</Body2>
      <Separator orientation="vertical" />
      <Body2>Middle</Body2>
      <Separator orientation="vertical" />
      <Body2>Right</Body2>
    </div>
  );
}

Inside a List

Account settings

Notifications

Privacy

SeparatorInList

import { Separator } from '@/components/ui/separator';
import { Body2 } from '@/components/ui/typography';

export default function Component() {
  return (
    <div className="bg-neutral-0 w-full max-w-sm rounded-lg border border-neutral-200">
      <div className="p-3"><Body2>Account settings</Body2></div>
      <Separator />
      <div className="p-3"><Body2>Notifications</Body2></div>
      <Separator />
      <div className="p-3"><Body2>Privacy</Body2></div>
    </div>
  );
}

API Reference

Separator

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction of the separator line
`decorative`	`boolean`	`true`	When `true`, the element is hidden from assistive tech
`className`	`string`	—	Extra Tailwind classes

Separator

IndiaCN

On this page