@pipecat-ai/ui
v0.0.11
Published
Maintainers
pipecat-admin
markatdaily
jptaylor
ruthless_daily
christian-daily
filipi.fuchter
vipyne-dailycoKeywords
Readme
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.
import { CircularWaveform } from "@pipecat-ai/ui/visualizations";
import "@pipecat-ai/ui/styles.css";
const MyApp = () => {
return (
<div className="pipecat-ui">
{/** Place components here **/}
<CircularWaveform />
</div>
);
};Modifying styles
You can modify any of the framework variables from within the .pipecat-ui scope like so:
.pipecat-ui {
--font-sans: var(--my-custom-font);
}Theme variables
--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-5Dark mode
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
<html class="dark">or
<div class="pipecat-ui dark">