Yugen UI

Divider

Divider là đường kẻ mảnh tách các nhóm nội dung, có thể kèm chữ hoặc icon ở giữa, đầu hoặc cuối.

Mặc định nằm ngang và dùng stroke-2. Đặt vertical để chia các phần tử trên cùng một hàng. appearance subtle / brand / strong đổi độ đậm của đường kẻ.

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { Divider } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Appearance

default (stroke-2), subtle (stroke-3), brand, strong (stroke-1).

ThưLịchDanh bạ

Dọc

orientation="vertical" chia các phần tử trên cùng hàng; cao theo hàng chứa.

Icon & inset

Nội dung có thể là icon; inset thụt hai đầu 12px.

Cách dùng

Nên
  • Dùng để tách nhóm nội dung khác nhau trong cùng một bề mặt.
  • Chữ trên Divider ngắn gọn (“Hoặc”, tên nhóm).
Không nên
  • Không dùng Divider thay cho khoảng trắng khi khoảng trắng đã đủ tách nhóm.
  • Không dùng appearance brand tràn lan — chỉ để nhấn một ranh giới quan trọng.

Props

Prop · KiểuMặc địnhMô tả
orientation"horizontal" | "vertical"Mặc định: "horizontal"Hướng đường kẻ. Tên cũ vertical (boolean) đã lỗi thời (bỏ ở 1.0).
alignContent"start" | "center" | "end"Mặc định: "center"Vị trí chữ / icon trên đường kẻ.
appearance"default" | "subtle" | "brand" | "strong"Mặc định: "default"Màu đường kẻ và chữ.
insetbooleanMặc định: falseThụt hai đầu 12px.