Separator

A thin line separating content, horizontal or vertical.

Kagadmodyaa

An open-source component catalogue.

Components

Blocks

Effects

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

export default function SeparatorDemo() {
  return (
    <div>
      <div className="space-y-1">
        <h4 className="text-sm font-medium">Kagadmodyaa</h4>
        <p className="text-sm text-muted-foreground">An open-source component catalogue.</p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-4 text-sm">
        <span>Components</span>
        <Separator orientation="vertical" />
        <span>Blocks</span>
        <Separator orientation="vertical" />
        <span>Effects</span>
      </div>
    </div>
  )
}

Built on Base UI

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/separator.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Separator imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

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

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

API Reference

Name	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'horizontal'	The direction of the line.