Visually or semantically separates content.
import { Separator } from "@/lib/components/core/default/separator";
function SeparatorDemo() {
return (
<div className="space-y-2 rounded-md border p-4">
<div>
<h3 className="font-bold">dotUI</h3>
<p className="text-sm text-fg-muted">Tools for building high-quality, accessible UI.</p>
</div>
<Separator className="my-4" />
<div className="flex h-5 items-center space-x-4 text-sm">
<div>Docs</div>
<Separator orientation="vertical" />
<div>Components</div>
<Separator orientation="vertical" />
<div>Hooks</div>
<Separator orientation="vertical" />
<div>Themes</div>
</div>
</div>
);
}
Installation
Install the following dependencies:
npm install react-aria-components
Copy and paste the following code into your project.
"use client";
import * as React from "react";
import {
Separator as AriaSeparator,
type SeparatorProps as AriaSeparatorProps,
} from "react-aria-components";
import { tv } from "tailwind-variants";
const separatorStyles = tv({
base: "shrink-0 bg-border separator",
variants: {
orientation: {
horizontal: "h-[1px] w-full",
vertical: "h-full w-[1px]",
},
},
defaultVariants: {
orientation: "horizontal",
},
});
type SeparatorProps = AriaSeparatorProps;
const Separator = ({ orientation, className, ...props }: SeparatorProps) => {
return <AriaSeparator {...props} className={separatorStyles({ orientation, className })} />;
};
export { Separator };
Update the import paths to match your project setup.
Options
Orientation
Use the orientation prop to change the direction of the separator.
import { Separator } from "@/lib/components/core/default/separator";
function SeparatorDemo() {
return (
<div className="flex items-center gap-10">
<div className="flex h-5 items-center gap-2 text-sm">
<div>Components</div>
<Separator orientation="vertical" />
<div>Hooks</div>
</div>
<div className="flex flex-col items-center gap-2 text-sm">
<div>Components</div>
<Separator orientation="horizontal" />
<div>Hooks</div>
</div>
</div>
);
}
API Reference
| Prop | Type | Default | Description |
|---|
elementType | string | - | The HTML element type to render. |
orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the separator. |
className | string | - | The CSS className for the element. |
style | CSSProperties | - | The inline style for the element. |
