Components
Separator
A separator element accessible to screen readers.
Loading...
Installation
CLI
npx shadcn@latest add https://exawizards.com/exabase/design/registry/separator.jsonManual
Copy and paste the following code into your project.
"use client"
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
import { cn } from "@/lib/utils"
function Separator({
className,
orientation = "horizontal",
...props
}: SeparatorPrimitive.Props) {
return (
<SeparatorPrimitive
data-slot="separator"
orientation={orientation}
className={cn(
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full forced-colors:data-horizontal:border-t data-vertical:w-px data-vertical:self-stretch forced-colors:data-vertical:border-l",
className
)}
{...props}
/>
)
}
export { Separator }
Usage
import { Separator } from "@/components/ui/separator"<Separator />If the separator is purely visual and should be ignored by screen readers, add aria-hidden="true".
<Separator aria-hidden="true" />API
See the Base UI documentation for more information.