Pipecat UI Components

Styling

Pipecat UI is build using Tailwind 4.

You can customize the look and feel of components by either modifying the theme variables or replacing it entirely.

To avoid style conflicts, the theme (and all associated variables and utilities) are scoped with a pipecat-ai prefix. If you are using individual components vs. one of the premade containers (such as the Widget), you must ensure you include a higher-order component on the page with this class name.

``jsx
import { CircularWaveform } from "@pipecat-ai/ui/visualizations";
import "@pipecat-ai/ui/styles.css";

const MyApp = () => {
return (


You can modify any of the framework variables from within the .pipecat-ui scope like so:

`css
.pipecat-ui {
--font-sans: var(--my-custom-font);
}
`

$3

`css
--font-sans
--font-mono

--shadow-long
--shadow-xshort

--radius-panel
--height-panel-header
--width-widget
--width-widget-panel
--height-widget-panel
--spacing-widget-v
--spacing-widget-h
--spacing-widget-gap

--color-background
--color-foreground
--color-card
--color-card-foreground
--color-popover
--color-popover-foreground
--color-primary
--color-primary-foreground
--color-secondary
--color-secondary-foreground
--color-muted
--color-muted-foreground
--color-accent
--color-accent-foreground
--color-destructive
--color-border
--color-input
--color-ring
--color-subtle
--color-mute
--color-mute-foreground

--color-chart-1
--color-chart-2
--color-chart-3
--color-chart-4
--color-chart-5
`

$3

Pipecat UI will follow system defaults for light mode or dark mode, or look for a .dark class as part of either the pipecat-ui container or html element on the page

`

`
or
`