Primitives
Panel
A simple panel layout with header, content, footer and actions.
Dashboard panel that uses container queries to adjust its size.
import { Panel, PanelHeader, PanelTitle, PanelContent } from "@pipecat-ai/voice-ui-kit";
<Panel className="w-full">
<PanelHeader>
<PanelTitle>Hello world</PanelTitle>
</PanelHeader>
<PanelContent>
My Panel
</PanelContent>
</Panel>| Prop | Type | Default |
|---|---|---|
className? | string | undefined |
Usage
Header Variants
import { Panel, PanelHeader, PanelTitle, PanelContent } from "@pipecat-ai/voice-ui-kit";
<div className="flex flex-col gap-4 w-full">
<Panel className="flex-1">
<PanelHeader variant="default">
<PanelTitle>Default Header</PanelTitle>
</PanelHeader>
<PanelContent>Content</PanelContent>
</Panel>
<Panel>
<PanelHeader variant="inline">
<PanelTitle>Inline Header</PanelTitle>
</PanelHeader>
<PanelContent>Content</PanelContent>
</Panel>
</div>With Buttons
Button components use container queries to adjust their size based on the panel's size.
import { Panel, PanelHeader, PanelTitle, PanelContent, Button, ButtonGroup, ArrowRightIcon } from "@pipecat-ai/voice-ui-kit";
<Panel className="w-full">
<PanelHeader>
<PanelTitle>Actions</PanelTitle>
</PanelHeader>
<PanelContent>
<Button size="lg">I shrink</Button>
<Button size="xl" isIcon>
<ArrowRightIcon />
</Button>
</PanelContent>
</Panel>