# Separator

Visually or semantically separates content.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



Visually or semantically separates content.



<ComponentPreview name="separator-demo">
  <div className="w-full max-w-sm rounded-none border p-4 mx-auto">
    <div className="space-y-1">
      <h4 className="text-sm font-medium leading-none">
        Monolith UI
      </h4>

      <p className="text-sm text-muted-foreground">
        A meticulously crafted component library.
      </p>
    </div>

    <Separator className="my-4" />

    <div className="flex h-5 items-center space-x-4 text-sm">
      <div>
        Design
      </div>

      <Separator orientation="vertical" />

      <div>
        Components
      </div>

      <Separator orientation="vertical" />

      <div>
        Templates
      </div>
    </div>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/separator.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

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

export function MyComponent() {
  return (
    <div>
      <div className="space-y-1">
        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
        <p className="text-sm text-muted-foreground">An open-source UI component library.</p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center space-x-4 text-sm">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  )
}
```

## Examples [#examples]

### Horizontal [#horizontal]

<ComponentPreview name="separator-horizontal">
  <div className="w-full max-w-sm rounded-none border p-6 mx-auto">
    <h4 className="text-sm font-medium leading-none mb-4">
      Account Settings
    </h4>

    <Separator orientation="horizontal" />

    <div className="mt-4 text-sm text-muted-foreground">
      Manage your account details and preferences.
    </div>
  </div>
</ComponentPreview>

### Vertical [#vertical]

<ComponentPreview name="separator-vertical">
  <div className="flex h-12 items-center gap-4 rounded-none border px-4 py-2 text-sm max-w-sm w-full mx-auto justify-center">
    <div className="font-medium text-muted-foreground hover:text-foreground transition-colors cursor-pointer">
      Articles
    </div>

    <Separator orientation="vertical" />

    <div className="font-medium text-muted-foreground hover:text-foreground transition-colors cursor-pointer">
      Tutorials
    </div>

    <Separator orientation="vertical" />

    <div className="font-medium text-muted-foreground hover:text-foreground transition-colors cursor-pointer">
      News
    </div>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `Separator` component extends the standard HTML `div` element attributes and `radix-ui` primitive props.

| Prop          | Type      | Default        | Description                                                                                                                                                                          |
| ------------- | --------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `orientation` | `enum`    | `"horizontal"` | The orientation of the separator (`horizontal` or `vertical`).                                                                                                                       |
| `decorative`  | `boolean` | `true`         | Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. |