@neynar/ui/llm-docs/separator.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# Separator

**Type**: component

Separator component for visually and semantically dividing content sections A flexible, accessible separator component built on Radix UI primitives that creates visual or semantic divisions between content sections. Supports both horizontal and vertical orientations with full accessibility features including decorative and semantic separator modes for optimal screen reader compatibility. Built on Radix UI Separator primitive which automatically handles: - WAI-ARIA separator role compliance - Proper orientation data attributes - Screen reader visibility control via decorative prop - Keyboard navigation support for interactive separators - Semantic HTML structure with proper ARIA attributes

## JSX Usage

```jsx
import { Separator } from '@neynar/ui';

<Separator
  className="value"
  orientation={value}
  decorative={true}
  asChild={true}
  "aria-label"="value"
  "aria-labelledby"="value"
  "aria-valuenow"={0}
  "aria-valuemin"={0}
  "aria-valuemax"={0}
  "aria-valuetext"="value"
/>
```

## Component Props

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### orientation
- **Type**: `"horizontal" | "vertical"`
- **Required**: No
- **Description**: No description available

### decorative
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### "aria-label"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### "aria-labelledby"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### "aria-valuenow"
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### "aria-valuemin"
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### "aria-valuemax"
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### "aria-valuetext"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic horizontal separator - decorative divider
<div className="space-y-4">
  <p>Content above</p>
  <Separator />
  <p>Content below</p>
</div>
```
### Example 2
```tsx
// Vertical separator in toolbar layouts
<div className="flex items-center space-x-2">
  <button>Bold</button>
  <button>Italic</button>
  <Separator orientation="vertical" className="h-4" />
  <button>Underline</button>
  <button>Strike</button>
</div>
```
### Example 3
```tsx
// Semantic separator with screen reader support
<nav className="flex items-center space-x-2">
  <a href="/dashboard">Dashboard</a>
  <Separator
    orientation="vertical"
    decorative={false}
    aria-label="Navigation separator"
    className="h-4"
  />
  <a href="/settings">Settings</a>
</nav>
```
### Example 4
```tsx
// Custom styled separator with gradient
<Separator className="my-8 h-px bg-gradient-to-r from-transparent via-border to-transparent" />
```
### Example 5
```tsx
// Polymorphic separator using semantic HTML
<article>
  <section>First section content</section>
  <Separator asChild decorative={false} aria-label="Section divider">
    <hr className="my-6" />
  </Separator>
  <section>Second section content</section>
</article>
```