Separator

A separator is a thin line that groups content in lists and layouts.

Usage#

Demo#

import { Separator } from "pigment-ui";

function SeparatorDemo() {
  return (
    <div className="w-64">
      <Separator />
    </div>
  );
}

Orientation#

import { Separator } from "pigment-ui";

function SeparatorOrientation() {
  return (
    <div className="h-32">
      <Separator orientation="vertical" />
    </div>
  );
}

Size#

import { Separator } from "pigment-ui";

function SeparatorDemo() {
  return (
    <div className="w-64 space-y-16">
      <Separator size="sm" />
      <Separator size="md" />
      <Separator size="lg" />
    </div>
  );
}

Edit this page

Select Skeleton