ui-lib

component — layout

Separator

A thin divider line built on react-aria-components, styled with the quebi design system. Splits content horizontally or vertically.

  • layout
  • divider
  • rule
  • separator

03 examples

Horizontal

The default. A full-width hairline that splits stacked content.

Account

Manage your account settings and preferences.

Vertical

Set orientation to vertical to divide items in a row.

DocsAPISupport

In a list

Hairlines between rows keep dense content legible.

First itemSecond itemThird item

source

separator.tsx

Copy this into your project. Resolve its dependencies from the registryDependencies in the component's API entry.

"use client"

import { Separator as SeparatorPrimitive, type SeparatorProps } from "react-aria-components"
import { cn } from "@/lib/utils"

/**
 * Separator — quebi design system
 *
 * A thin divider line that visually splits content. Renders horizontally
 * (full width) or vertically (full height). Built on react-aria-components
 * so it carries the correct separator semantics.
 *
 * Painted in `quebi-hairline`, the same line that runs between rows and under
 * the nav. The token is already translucent, so it takes no opacity modifier.
 */
export function Separator({ orientation = "horizontal", className, ...props }: SeparatorProps) {
  return (
    <SeparatorPrimitive
      className={cn(
        "shrink-0 border-0 bg-quebi-hairline forced-colors:bg-[ButtonBorder]",
        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
        className,
      )}
      {...props}
    />
  )
}