Primitives
Divider
Visual separator for content with support for orientation, variants, thickness, colors and decorations.
import { Divider } from "@pipecat-ai/voice-ui-kit";
<Divider />| Prop | Type | Default |
|---|---|---|
orientation? | "horizontal" | "vertical" | "horizontal" |
variant? | "solid" | "dotted" | "dashed" | "solid" |
color? | "primary" | "secondary" | "destructive" | "active" | "inactive" | "warning" | "secondary" |
thickness? | "thin" | "medium" | "thick" | "thin" |
size? | "none" | "sm" | "md" | "lg" | "xl" | "none" |
decoration? | "none" | "plus" | "none" |
childrenClassName? | string | undefined |
className? | string | undefined |
Usage
Variants
import { Divider } from "@pipecat-ai/voice-ui-kit";
<div className="flex flex-col gap-6 w-full">
<Divider color="primary" />
<Divider variant="dotted" color="primary" />
<Divider variant="dashed" color="primary" />
</div>Decoration
import { Divider } from "@pipecat-ai/voice-ui-kit";
<div className="flex flex-col gap-6 w-full">
<Divider decoration="plus" />
<Divider decoration="plus">Section</Divider>
</div>With Label
import { Divider } from "@pipecat-ai/voice-ui-kit";
<div className="flex flex-col gap-6 w-full">
<Divider>Hello</Divider>
<Divider color="active">Active</Divider>
<Divider variant="dashed" color="destructive">Danger</Divider>
</div>Orientation
import { Divider, Card, CardContent } from "@pipecat-ai/voice-ui-kit";
<div className="flex flex-row gap-6 items-stretch h-24">
<Card className="flex-1">
<CardContent className="h-full">
<Divider orientation="vertical" color="primary" />
</CardContent>
</Card>
<Card className="flex-1">
<CardContent className="h-full">
<Divider orientation="vertical" color="primary" decoration="plus" />
</CardContent>
</Card>
</div>Colors
import { Divider } from "@pipecat-ai/voice-ui-kit";
<div className="flex flex-col gap-4 w-full">
<Divider color="secondary" />
<Divider color="primary" />
<Divider color="destructive" />
<Divider color="warning" />
<Divider color="active" />
<Divider color="inactive" />
</div>Thickness
import { Divider } from "@pipecat-ai/voice-ui-kit";
<div className="flex flex-col gap-4 w-full">
<Divider thickness="thin" />
<Divider thickness="medium" />
<Divider thickness="thick" />
</div>Sizes (margins)
import { Divider } from "@pipecat-ai/voice-ui-kit";
<div className="flex flex-col gap-4 w-full">
<Divider size="sm" color="primary" />
<Divider size="md" color="primary" />
<Divider size="lg" color="primary" />
<Divider size="xl" color="primary" />
</div>