Separator

A visual divider between sections of content

A simple separator component for visually dividing content. Use it horizontally between blocks or vertically inside flex layouts.

Section one

Section two

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

export default function Example() {
  return (
    <div className="space-y-4">
      <div>Section one</div>
      <Separator />
      <div>Section two</div>
    </div>
  );
}

View Code

Installation

bash

liminal add separator

Usage

Section one

Section two

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

export default function Example() {
  return (
    <div className="space-y-4">
      <div>Section one</div>
      <Separator />
      <div>Section two</div>
    </div>
  );
}

View Code

Examples

Horizontal (default)

Section one

Section two

<Separator />

View Code

Vertical

Item A

Item B

<div className="flex h-10 items-center gap-4">
  <span>Item A</span>
  <Separator orientation="vertical" />
  <span>Item B</span>
</div>

View Code

API

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Layout direction of the separator.
decorative	boolean	false	When true, the separator is purely visual (no accessibility role).