---
title: Separator
description: "Visually or semantically separates content."
---

```tsx
import * as stylex from '@stylexjs/stylex';

import { Separator } from '@/components/ui/separator';
import { space, fontSize, fontWeight } from '@/lib/constants.stylex';
import { colors, font } from '@/lib/tokens.stylex';

export default function SeparatorDemo() {
  return (
    <div {...stylex.props(styles.root)}>
      <div>
        <div {...stylex.props(styles.title)}>Base UI Primitives</div>
        <div {...stylex.props(styles.muted)}>An open-source UI component library.</div>
      </div>
      <Separator />
      <div {...stylex.props(styles.row)}>
        <span>Blog</span>
        <Separator orientation="vertical" />
        <span>Docs</span>
        <Separator orientation="vertical" />
        <span>Source</span>
      </div>
    </div>
  );
}

const styles = stylex.create({
  root: {
    display: 'flex',
    flexDirection: 'column',
    fontFamily: font.sans,
    fontSize: fontSize.sm,
    gap: space.s4,
  },
  title: {
    fontWeight: fontWeight.medium,
  },
  muted: {
    color: colors.mutedForeground,
  },
  row: {
    alignItems: 'center',
    display: 'flex',
    gap: space.s4,
    height: space.s5,
  },
});
```

## Install

```bash
npx shadcn@latest add @madeui/separator
```

## Usage

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

## Vertical

```tsx
import * as stylex from '@stylexjs/stylex';

import { Separator } from '@/components/ui/separator';
import { space, fontSize } from '@/lib/constants.stylex';
import { font } from '@/lib/tokens.stylex';

export default function SeparatorVertical() {
  return (
    <div {...stylex.props(styles.row)}>
      <span>Blog</span>
      <Separator orientation="vertical" />
      <span>Docs</span>
      <Separator orientation="vertical" />
      <span>Source</span>
    </div>
  );
}

const styles = stylex.create({
  row: {
    alignItems: 'center',
    display: 'flex',
    fontFamily: font.sans,
    fontSize: fontSize.sm,
    gap: space.s4,
    height: space.s5,
  },
});
```

## List

```tsx
import * as React from 'react';

import * as stylex from '@stylexjs/stylex';

import { Separator } from '@/components/ui/separator';
import { space, fontSize, fontWeight, container } from '@/lib/constants.stylex';
import { colors, font } from '@/lib/tokens.stylex';

const notifications = [
  { title: 'Your invoice has been paid', time: '2h ago' },
  { title: 'New comment on your PR', time: '4h ago' },
  { title: 'Weekly digest is ready', time: '1d ago' },
];

export default function SeparatorList() {
  return (
    <div {...stylex.props(styles.root)}>
      {notifications.map((item, index) => (
        <React.Fragment key={item.title}>
          {index > 0 && <Separator />}
          <div {...stylex.props(styles.row)}>
            <span {...stylex.props(styles.title)}>{item.title}</span>
            <span {...stylex.props(styles.time)}>{item.time}</span>
          </div>
        </React.Fragment>
      ))}
    </div>
  );
}

const styles = stylex.create({
  root: {
    display: 'flex',
    flexDirection: 'column',
    fontFamily: font.sans,
    gap: space.s3,
    width: container.sm,
  },
  row: {
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'space-between',
  },
  title: {
    fontSize: fontSize.sm,
    fontWeight: fontWeight.medium,
  },
  time: {
    color: colors.mutedForeground,
    fontSize: fontSize.xs,
  },
});
```

## API reference

Built on [Base UI Separator](https://base-ui.com/react/components/separator). All props are forwarded — see the [Base UI Separator API reference](https://base-ui.com/react/components/separator#api-reference).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Vertical separators stretch to their flex container's height. |
| `style` | `StyleXStyles` | — | StyleX styles merged last — always win over the component's own styles. |