Separator | Arbol UI

Language

Appearance

Horizontal

Clínica Norte

Calle 93 #11-27, Bogotá

Open Monday to Friday, 7:00 to 18:00

import { Separator } from '@arbol-ai/ui';

<div className="max-w-sm text-sm">
  <p className="font-medium">Clínica Norte</p>
  <p className="text-muted-foreground">Calle 93 #11-27, Bogotá</p>
  <Separator className="my-3" />
  <p className="text-muted-foreground">Open Monday to Friday, 7:00 to 18:00</p>
</div>

Vertical

import { Button, Separator } from '@arbol-ai/ui';

<div className="flex items-center gap-2">
  <Button size="sm" variant="ghost">
    Archive
  </Button>
  <Button size="sm" variant="ghost">
    Assign
  </Button>
  <Separator orientation="vertical" />
  <Button size="sm" variant="ghost">
    Export
  </Button>
</div>

Source

The examples above are src/components/separator/separator.examples.tsx, which the library’s tests render too.