Separator

Garis rambut 1px — satu-satunya bobot garis dalam sistem ini. Horizontal atau vertikal.

Instalasi

npx shadcn@latest add @glc/separator

Pasang dependensi

npm install @radix-ui/react-separator

Pasang tema

Setiap komponen bergantung pada glc-theme. Lewati langkah ini kalau sudah pernah dijalankan.

npx shadcn@latest add @glc/glc-theme

Salin ke components/ui/separator.tsx

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

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

/** 1px hairline divider — the file's only rule weight. */
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-[var(--divider-default)]",
        "data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full",
        "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
        className
      )}
      {...props}
    />
  )
}

export { Separator }

Sesuaikan path import

Berkas di atas meng-import @/registry/glc/lib/utils. Ubah menjadi lokasi cn di proyekmu — biasanya @/lib/utils. CLI melakukan ini otomatis.

Penggunaan

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

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

Buku Besar

Jurnal, neraca, dan laba rugi.

Jurnal

Neraca

Laba rugi

import { Separator } from "@/registry/glc/ui/separator"

export function SeparatorDemo() {
  return (
    <div className="w-full max-w-sm">
      <div className="flex flex-col gap-1">
        <h4 className="text-sm leading-5 font-medium">Buku Besar</h4>
        <p className="text-sm leading-5 text-muted-foreground">
          Jurnal, neraca, dan laba rugi.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-3 text-sm leading-5">
        <span>Jurnal</span>
        <Separator orientation="vertical" />
        <span>Neraca</span>
        <Separator orientation="vertical" />
        <span>Laba rugi</span>
      </div>
    </div>
  )
}

Vertikal butuh tinggi

Separator vertikal memakai h-full, jadi induknya harus punya tinggi yang pasti. Contoh di atas memakai flex h-5 items-center; tanpa itu, garisnya tidak terlihat sama sekali.

Dekoratif vs semantik

Bawaannya dekoratif — tersembunyi dari teknologi bantu.

Periode berjalan

Agustus 2026

Periode terkunci

Juli 2026

import { Separator } from "@/registry/glc/ui/separator"

/**
 * `decorative` defaults to true, which hides the rule from assistive tech —
 * right for a line that is only visual. Set it false when the rule genuinely
 * separates two sections, so screen readers announce the boundary.
 */
export function SeparatorSemantic() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <section>
        <h4 className="text-sm leading-5 font-medium">Periode berjalan</h4>
        <p className="text-sm leading-5 text-muted-foreground">Agustus 2026</p>
      </section>
      <Separator decorative={false} />
      <section>
        <h4 className="text-sm leading-5 font-medium">Periode terkunci</h4>
        <p className="text-sm leading-5 text-muted-foreground">Juli 2026</p>
      </section>
    </div>
  )
}

Biarkan decorative pada nilai bawaannya untuk garis yang cuma memisahkan secara visual. Setel ke false kalau garis itu benar-benar membatasi dua bagian yang berbeda maknanya — Radix akan memberinya role="separator" sehingga pembaca layar mengumumkan batas tersebut.

Props

Meneruskan seluruh props Radix Separator Root.

Prop	Tipe	Default	Keterangan
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Arah garis. Vertikal mengambil tinggi penuh dari induknya.
`decorative`	`boolean`	`true`	Saat true, disembunyikan dari teknologi bantu. Setel false untuk batas yang bermakna.
`className`	`string`	—	Digabung terakhir lewat cn(), jadi bisa menimpa kelas bawaan.

Kode sumber

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

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

/** 1px hairline divider — the file's only rule weight. */
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-[var(--divider-default)]",
        "data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full",
        "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
        className
      )}
      {...props}
    />
  )
}

export { Separator }