Voice UI Kit
Primitives

Loader

Loading indicators for async states.

import { SpinLoader, StripeLoader } from "@pipecat-ai/voice-ui-kit";

<div className="flex flex-row gap-6 items-center">
  <SpinLoader />
  <StripeLoader />
</div>
PropTypeDefault
SpinLoader?
{ size?: number }
{ size: 32 }
StripeLoader?
{ className?: string }
{}

Usage

Spin Loader

import { SpinLoader } from "@pipecat-ai/voice-ui-kit";

<div className="flex flex-row gap-6 items-center">
  <SpinLoader size={16} />
  <SpinLoader />
  <SpinLoader size={48} />
</div>

Stripe Loader

import { StripeLoader } from "@pipecat-ai/voice-ui-kit";

<div className="flex flex-col gap-4">
  <StripeLoader />
  <StripeLoader className="text-destructive" />
  <StripeLoader className="w-60 h-6" />
</div>