1. Components
  2. separator

Separator

Horizontal or vertical line to divide content.

Demo

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

export const DemoSeparator = () => {
    return (
        <div className="flex flex-col gap-4 w-full">
            <Separator className="border-primary" />
            <Separator className="border-secondary" />
            <Separator className="border-danger" />
            <Separator className="border-gray" />
        </div>
    )
}

Installation

terminal
npx shadcn@latest add @jk-ui/separator

Examples

With label

You can use Separator component with label, define label placement, customize the label as needed, etc.
Label Start
Label Center
Label End
Label Center
import { Separator } from "@/components/jk/separator"

export const SeparatorWithLabel = () => {
    return (
        <div className="flex flex-col gap-4 w-full">
            <Separator label="Label Start" className="before:bg-bg-muted" labelClass="pr-3 bg-bg text-fg relative" />
            <Separator label="Label Center" className="before:bg-bg-muted" labelPlacement="middle" labelClass="px-3 bg-bg text-fg relative" />
            <Separator label="Label End" className="before:bg-bg-muted" labelPlacement="end" labelClass="pl-3 bg-bg text-fg relative" />
            <Separator label="Label Center" className="before:bg-bg-muted" labelPlacement="middle" labelClass="px-3 bg-emerald-600 dark:bg-emerald-500 text-sm text-white rounded-full py-px relative" />
        </div>
    )
}
Prev
Native Table

Simple table using native HTML for responsive data display.

Next
On this page