videorc/ui

Separator

A 1 px hairline between groups, horizontal or vertical, on Base UI.

Livestream

Go live to YouTube, Twitch and X at once.

StudioSourcesLibrary

Installation

$ pnpm dlx shadcn@latest add @videorc/separator

Usage

import { Separator } from "@/components/ui/separator";
<Separator orientation="vertical" />

Theming

Token or attributeMeaning
bg-borderThe hairline colour, never more than 1 px
data-orientationhorizontal or vertical; a vertical one stretches to its row

Accessibility

A separator is role="separator" with its aria-orientation, so a screen reader hears where one group ends. When a line is only decoration, draw a border-border hairline on the element instead.

API reference

Every Base UI Separator prop.

Avatar

A round picture of a chat author or a channel, with initials while the picture loads or when it fails, in three sizes.

Scroll Area

A native scroller with a thumb-only scrollbar, like macOS overlay scrollbars. The thumb shows while you scroll, on the theme's --scrollbar-* tokens.

On this page

InstallationUsageThemingAccessibilityAPI reference