Separator

TS

import { … } from "@fungi.computer/caps/components/separator";

Horizontal

TSX

import { Separator } from "@fungi.computer/caps/components/separator";

export default function Horizontal() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <p>Grow log</p>
      <Separator />
      <p>Settings</p>
    </div>
  );
}

Vertical

TSX

import { Separator } from "@fungi.computer/caps/components/separator";

export default function Vertical() {
  return (
    <div className="flex h-8 items-center gap-3">
      <span>Logs</span>
      <Separator orientation="vertical" />
      <span>Spores</span>
      <Separator orientation="vertical" />
      <span>Harvest</span>
    </div>
  );
}

Props

SeparatorProps

Prop	Type	Description
decorative?	boolean
orientation?	"horizontal" | "vertical"

• decorative?boolean
• orientation?"horizontal" | "vertical"

Full types: API reference.