Phân cách

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

export function SeparatorDemo() {

Separator vẽ một đường kẻ mảnh ngang hoặc dọc giữa các khối nội dung. Được xây dựng trên thành phần Base UI Separator và được giữ tối giản một cách có chủ đích: một đường kẻ duy nhất mang màu border của theme — cùng nét liền đặc viền quanh mọi khung neobrutalist.

Nên dùng khi:

• Phân đoạn menu và thanh công cụ — tách các nhóm hành động trong dropdown, sidebar và thanh lệnh.
• Danh sách xếp chồng — phân chia các hàng trong trang cài đặt, feed và bảng thông báo.
• Metadata trên cùng dòng — đường kẻ dọc giữa các số liệu như lượt xem, sao và ngày cập nhật gần nhất.

Cài đặt#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/separator.json
npx shadcn@latest add https://neobrutalism.com/r/base/separator.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/separator.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/separator.json
Sao chép

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
Sao chép

"use client"

import * as React from "react"
import { Separator as SeparatorPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
        className
      )}
      {...props}
    />
  )
}

export { Separator }

Cách dùng#

Sao chépimport { Separator } from "@/components/ui/separator"

Sao chép<Separator />

Ví dụ#

Dọc#

Dùng orientation="vertical" cho một dấu phân cách dọc.

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

export function SeparatorVertical() {

Menu#

Các dấu phân cách dọc giữa các mục menu có mô tả.

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

export function SeparatorMenu() {

Danh sách#

Các dấu phân cách ngang giữa các mục danh sách.

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

export function SeparatorList() {

RTL#

Để bật hỗ trợ RTL trong Neobrutalism, hãy xem hướng dẫn cấu hình RTL.

"use client"

import * as React from "react"

Khả năng truy cập#

Separator của Base UI luôn render role="separator", với aria-orientation phản ánh prop orientation, nên trình đọc màn hình đọc nó lên như một vạch phân cách có ngữ nghĩa. Với những đường kẻ thuần trang trí — chẳng hạn giữa các số liệu trên cùng dòng — hãy thêm aria-hidden="true" (hoặc dùng một thẻ <div> được tạo kiểu thông thường) để công nghệ hỗ trợ không đọc lên những vạch chia không mang ý nghĩa. Lưu ý điểm này khác với biến thể Radix, vốn mặc định là trang trí (role="none").

Tham chiếu API#

Xem tài liệu Base UI Separator.