---
title: Separator
subtitle: A separator element accessible to screen readers.
description: A high-quality, unstyled React separator component that is accessible to screen readers.
---
> FineSoft Components documentation. Independent Stencil port; not the official Base UI website.
>
> React API text and `@base-ui/react` examples are upstream references. FineSoft Stencil examples use `finesoft-components`. Do not treat the two packages as interchangeable.
# Separator
A high-quality, unstyled React separator component that is accessible to screen readers.
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* docs-comparison.tsx */
import { StencilComparison } from 'docs/src/components/StencilComparison';
import ReactSeparator from './react-separator';
import StencilSeparator from './stencil-separator';
export default function SeparatorComparison() {
return } stencil={} />;
}
```
```tsx
/* react-separator.tsx */
import { Separator } from '@base-ui/react/separator';
export default function ExampleSeparator() {
return (
);
}
```
```tsx
/* stencil-separator.tsx */
export default function StencilSeparator() {
return (
);
}
```
### CSS Modules
This example shows how to implement the component using CSS Modules.
```css
/* index.module.css */
.Container {
display: flex;
gap: 1rem;
text-wrap: nowrap;
}
.Separator {
width: 1px;
background-color: oklch(87% 0 0deg);
@media (prefers-color-scheme: dark) {
background-color: oklch(37.1% 0 0deg);
}
}
.Link {
font-size: 0.875rem;
line-height: 1.25rem;
color: oklch(14.5% 0 0deg);
text-decoration-color: oklch(87% 0 0deg);
text-decoration-thickness: 1px;
text-decoration-line: none;
text-underline-offset: 2px;
@media (prefers-color-scheme: dark) {
color: white;
text-decoration-color: oklch(37.1% 0 0deg);
}
@media (hover: hover) {
&:hover {
text-decoration-line: underline;
}
}
&:focus-visible {
outline: 2px solid oklch(14.5% 0 0deg);
outline-offset: 2px;
text-decoration-line: none;
@media (prefers-color-scheme: dark) {
outline-color: white;
}
}
}
```
```tsx
/* docs-comparison.tsx */
import { StencilComparison } from 'docs/src/components/StencilComparison';
import ReactSeparator from './react-separator';
import StencilSeparator from './stencil-separator';
export default function SeparatorComparison() {
return } stencil={} />;
}
```
```tsx
/* react-separator.tsx */
import { Separator } from '@base-ui/react/separator';
import styles from './index.module.css';
export default function ExampleSeparator() {
return (
);
}
```
```tsx
/* stencil-separator.tsx */
import './stencil.css';
export default function StencilSeparator() {
return (
);
}
```
```css
/* stencil.css */
/* Example layout and visual exceptions. Default component styles come from the theme. */
@layer fs-theme {
.demo-separator-hero-container {
display: flex;
gap: var(--fs-space-4);
text-wrap: nowrap;
}
.demo-separator-hero-link {
font-size: var(--fs-font-size-sm);
line-height: var(--fs-line-height-sm);
color: var(--fs-color-foreground);
text-decoration-color: var(--fs-color-border-muted);
text-decoration-thickness: 1px;
text-decoration-line: none;
text-underline-offset: 2px;
@media (hover: hover) {
&:hover {
text-decoration-line: underline;
}
}
&:focus-visible {
outline: var(--fs-focus-width) solid var(--fs-color-foreground);
outline-offset: var(--fs-focus-width);
text-decoration-line: none;
}
}
}
```
## Stencil boundary
`fs-separator` keeps its public host in Light DOM. The host owns the separator role,
orientation, dimensions, and consumer content; there is no internal drawing element
to isolate and no CSS part. Classes, inline styles, and ARIA attributes apply directly
to the host. The component does not add a Tab stop.
The Base UI theme is built in; select `data-fs-theme="base-ui"`
on an ancestor to enable the optional theme. The Hero uses a vertical separator;
consumers own its layout and can override `--fs-separator-width` and
`--fs-separator-background-color`. Host and child content remain accessible to
ordinary CSS selectors.
## Anatomy
Import the component and use it as a single part:
```jsx title="Anatomy"
import { Separator } from '@base-ui/react/separator';
;
```
## API reference
### Separator
A separator element accessible to screen readers.
Renders a `` element.
**Separator Props:**
| Prop | Type | Default | Description |
| :---------- | :-------------------------------------------------------------------------------------- | :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| orientation | `Orientation` | `'horizontal'` | The orientation of the separator. |
| className | `string \| ((state: Separator.State) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: Separator.State) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| render | `ReactElement \| ((props: HTMLProps, state: Separator.State) => ReactElement)` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
**Separator Data Attributes:**
| Attribute | Type | Description |
| :--------------- | :--------------------------- | :------------------------------------------ |
| data-orientation | `'horizontal' \| 'vertical'` | Indicates the orientation of the separator. |
### Separator.Props
Re-export of [Separator](/react/components/separator.md) props.
### Separator.State
```typescript
type SeparatorState = {
/** The orientation of the separator. */
orientation: Orientation;
};
```
## External Types
### Orientation
```typescript
type Orientation = 'horizontal' | 'vertical';
```
## Canonical Types
Maps `Canonical`: `Alias` — Use Canonical when its namespace is already imported; otherwise use Alias.
- `Separator.Props`: `SeparatorProps`
- `Separator.State`: `SeparatorState`