Thành phần

Separator

Ink rule on Base UI Separator: hair (1px) or heavy (3px), horizontal or vertical.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Eloquent UI

Components for a newspaper of record.

Docs

Registry

Source

Install

bash

npx shadcn add @eloquent/separator

Usage

tsx

import { Separator } from "@/components/ui/separator";

<Separator />
<Separator variant="heavy" />
<Separator orientation="vertical" />

States

Hair (1px)

Heavy (3px)

Vertical

Variant	Treatment
`hair` (default)	1px ink rule (`--rule-hair`)
`heavy`	3px ink rule (`--rule-heavy`), to open a section
`decorative`	Same rule, `role="none"` so screen readers skip it

Keyboard

Key	Action
Tab	Skips the separator; it is never a tab stop

Vietnamese

Thời sự

Tin tức được kiểm chứng, viết rõ ràng.

Thế giới

Kinh tế

Văn hoá

Ink adaptation

Upstream shadcn's grey bg-border hairline becomes solid ink. A variant prop adds the brand's heavy rule; orientation and decorative keep upstream's API. Built on Base UI Separator.