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-5

Dark 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">

<div class="pipecat-ui dark">

FAQs

What is @pipecat-ai/ui?

Is @pipecat-ai/ui popular?

Is @pipecat-ai/ui well maintained?

Package last updated on 04 Jun 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install