Separator

A thin horizontal or vertical line that separates content, with the right separator semantics built in.

Preview

Plugins, themes and help from people who build with VitNode.

Forum

Blog

Docs

import { Separator } from '@vitnode/core/components/ui/separator'

<Separator />

orientation="vertical" draws a vertical line at the parent's full height, so give the row a height:

<div className="flex h-5 items-center gap-4">
  <span>Forum</span>
  <Separator orientation="vertical" />
  <span>Blog</span>
</div>

It renders role="separator" with the matching aria-orientation, so screen readers know where one group ends.