YA Separator
A visual separator component for dividing content sections with proper accessibility support
The YaSeparator component is used to visually divide content into distinct sections. It supports both horizontal and vertical orientations and includes proper accessibility semantics.
Quick Start
pnpm dlx shadcn@latest add @yavendio/ya-separatornpx shadcn@latest add @yavendio/ya-separatoryarn dlx shadcn@latest add @yavendio/ya-separatorimport { YaSeparator } from '@/components/ui/ya-separator'
export default function Example() {
return (
<div>
<p>Content above</p>
<YaSeparator />
<p>Content below</p>
</div>
)
}Orientations
Two orientations for different layouts.
Horizontal (default)
Vertical
| Orientation | Description | Use Case |
|---|---|---|
horizontal | Creates a horizontal line (default) | Dividing stacked content, separating sections vertically |
vertical | Creates a vertical line | Dividing inline content, navigation links, breadcrumbs |
{/* Horizontal (default) */}
<YaSeparator orientation="horizontal" />
{/* Vertical - requires a flex container with height */}
<div className="flex h-10 items-center">
<span>Blog</span>
<YaSeparator orientation="vertical" className="mx-4" />
<span>Docs</span>
</div>Accessibility
Decorative Mode
When the separator is purely visual and has no semantic meaning, use the decorative prop.
Semantic (default)
Uses role="separator" with proper aria-orientation
Decorative
Uses role="none" - hidden from assistive technologies
| Mode | Behavior | When to Use |
|---|---|---|
decorative={false} | Uses role="separator" with aria-orientation | Meaningful content divisions |
decorative={true} | Uses role="none" | Purely visual, no semantic meaning |
{/* Semantic separator (default) */}
<YaSeparator />
{/* Decorative separator - hidden from assistive technologies */}
<YaSeparator decorative />Examples
Navigation Links
Separate navigation items with vertical separators.
<div className="flex h-5 items-center space-x-4 text-sm">
<a href="#">Blog</a>
<YaSeparator orientation="vertical" />
<a href="#">Docs</a>
<YaSeparator orientation="vertical" />
<a href="#">Source</a>
</div>Section Divider
Divide content sections with horizontal separators.
Introduction
Welcome to our documentation.
Getting Started
Follow these steps to begin.
<article className="space-y-4">
<section>
<h2>Introduction</h2>
<p>Welcome to our documentation.</p>
</section>
<YaSeparator />
<section>
<h2>Getting Started</h2>
<p>Follow these steps to begin.</p>
</section>
</article>Card Content Division
Separate content areas within cards.
Account Settings
Manage your account preferences.
Email: user@example.com
Plan: Pro
<div className="rounded-lg border p-4">
<div>
<h3>Account Settings</h3>
<p className="text-muted-foreground text-sm">Manage your account preferences.</p>
</div>
<YaSeparator className="my-4" />
<div className="space-y-2">
<p>Email: user@example.com</p>
<p>Plan: Pro</p>
</div>
</div>Inline Metadata
Display metadata with decorative separators.
<div className="flex h-5 items-center space-x-4 text-sm text-muted-foreground">
<span>John Doe</span>
<YaSeparator orientation="vertical" decorative />
<span>Dec 19, 2025</span>
<YaSeparator orientation="vertical" decorative />
<span>5 min read</span>
</div>Combined Example
Horizontal and vertical separators working together.
Radix Primitives
An open-source UI component library.
<div>
<p className="font-semibold">Radix Primitives</p>
<p className="text-muted-foreground text-sm">An open-source UI component library.</p>
<YaSeparator className="my-4" />
<div className="flex h-5 items-center gap-4">
<span>Blog</span>
<YaSeparator orientation="vertical" />
<span>Docs</span>
<YaSeparator orientation="vertical" />
<span>Source</span>
</div>
</div>Styling
Custom Styles
Override the default appearance with Tailwind classes.
Custom Color
Thicker (2px)
With Spacing
Content above
Content below
{/* Custom color */}
<YaSeparator className="bg-[var(--ya-plum-200)]" />
{/* Thicker horizontal separator */}
<YaSeparator className="h-0.5" />
{/* Thicker vertical separator */}
<YaSeparator orientation="vertical" className="w-0.5" />
{/* With spacing */}
<YaSeparator className="my-6" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the separator line |
decorative | boolean | false | When true, uses role="none" instead of role="separator" |
className | string | - | Additional CSS classes |
Extends all standard <div> HTML attributes.
Design Tokens
YaSeparator uses the following design tokens from the YaVendio Design System:
| Property | Token | Value |
|---|---|---|
| Background | --ya-stone-200 | #e7e5e4 |
| Thickness | - | 1px |
TypeScript
import { type VariantProps } from 'class-variance-authority'
import { yaSeparatorVariants } from '@/components/ui/ya-separator'
// Extract variant types
type SeparatorOrientation = VariantProps<typeof yaSeparatorVariants>['orientation']
// Use in your components
interface MyComponentProps {
separatorOrientation?: SeparatorOrientation
}