104Get started
HextaUI

Separator: Vertical

With orientation="vertical" the line stretches to the height of its flex row. Outside a flex row, give it a height.

2,481Stars
164Forks
38Contributors
import { Separator } from "@/components/ui/separator"

export function SeparatorVertical() {
  return (
    <div className="flex items-center gap-4 text-sm">
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">2,481</span>
        <span className="text-muted-foreground">Stars</span>
      </div>
      <Separator orientation="vertical" />
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">164</span>
        <span className="text-muted-foreground">Forks</span>
      </div>
      <Separator orientation="vertical" />
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">38</span>
        <span className="text-muted-foreground">Contributors</span>
      </div>
    </div>
  )
}

Add this example

This adds the example as components/examples/separator/vertical.tsx, together with the Separator component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/separator-vertical.json

To add only the component, follow the Separator installation.

Props in this example

The Separator props this example sets, from the API reference.

Separator

PropTypeDefault
orientation
"horizontal" | "vertical""horizontal"

Every prop is in the Separator API reference.

More Separator examples

See them all, with keyboard support and accessibility notes, on the Separator page.

Related components