Separator

Preview

Handwritten UI

A hand-drawn component library for React.

Blog

Docs

Source

Installation

npx skeci-ui add separator

Usage

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

<div className="space-y-1">
  <h4 className="text-sm font-bold">Skeci UI</h4>
  <p className="text-sm">A hand-drawn component library.</p>
</div>
<Separator className="my-4" />
<div className="flex h-5 items-center space-x-4">
  <div>Blog</div>
  <Separator orientation="vertical" />
  <div>Docs</div>
</div>

Variants

Custom Colors & Thickness

Props

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	The orientation of the separator.
decorative	boolean	true	Whether the component is purely decorative (aria-hidden).
thickness	number	1.5	The thickness of the line.
color	string	'#cccccc'	The color of the line.