Card

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardFooter,
  Divider
} from "@pipecat-ai/voice-ui-kit";

<Card>
  <CardHeader>
    <CardTitle className="text-lg">Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    General purpose card content.
  </CardContent>
  <Divider />
  <CardFooter>
    Card Footer
  </CardFooter>
</Card>

Prop	Type	Default
`variant?`	`"default" \| "destructive" \| "success"`	`"default"`
`size?`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`
`background?`	`"none" \| "scanlines" \| "grid" \| "stripes"`	`"none"`
`rounded?`	`"none" \| "sm" \| "md" \| "lg" \| "xl"`	`size value`
`shadow?`	`"none" \| "xshort" \| "short" \| "long" \| "xlong"`	`"none"`
`withElbows?`	`boolean`	`false`
`withGradientBorder?`	`boolean`	`false`
`className?`	`string`	`undefined`

Usage

Card Sizing

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "@pipecat-ai/voice-ui-kit";

<>
  <Card size="sm">
    <CardHeader>
      <CardTitle>Small Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>size="sm"</pre>
    </CardContent>
  </Card>

  <Card size="md">
    <CardHeader>
      <CardTitle>Medium Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>size="md"</pre>
    </CardContent>
  </Card>

  <Card size="lg">
    <CardHeader>
      <CardTitle>Large Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>size="lg"</pre>
    </CardContent>
  </Card>

  <Card size="xl">
    <CardHeader>
      <CardTitle>Extra Large Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>size="xl"</pre>
    </CardContent>
  </Card>
</>

Variants

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "@pipecat-ai/voice-ui-kit";

<>
  <Card variant="destructive" className="w-full">
    <CardHeader>
      <CardTitle>Destructive Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>variant="destructive"</pre>
    </CardContent>
  </Card>
  <Card variant="success" className="w-full">
    <CardHeader>
      <CardTitle>Success Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>variant="success"</pre>
    </CardContent>
  </Card>
</>

Background

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "@pipecat-ai/voice-ui-kit";

<div className="flex flex-col gap-4 w-full">
  <Card background="stripes">
    <CardHeader>
      <CardTitle>Stripe Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>background="stripes"</pre>
    </CardContent>
  </Card>
  <Card background="stripes" variant="destructive">
    <CardHeader>
      <CardTitle>Destructive Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>background="stripes" variant="destructive"</pre>
    </CardContent>
  </Card>
  <Card background="stripes" variant="success">
    <CardHeader>
      <CardTitle>Destructive Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>background="stripes" variant="success"</pre>
    </CardContent>
  </Card>
  <Card background="scanlines">
    <CardHeader>
      <CardTitle>Stripe Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>background="stripes"</pre>
    </CardContent>
  </Card>
  <Card background="grid">
    <CardHeader>
      <CardTitle>Destructive Card</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>background="stripes" variant="success"</pre>
    </CardContent>
  </Card>
</div>

Border Radius

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "@pipecat-ai/voice-ui-kit";

<div className="flex flex-col gap-4 w-full">
  <Card rounded="none">
    <CardHeader>
      <CardTitle>No Rounded Corners</CardTitle>
    </CardHeader>
  </Card>
  <Card rounded="sm">
    <CardHeader>
      <CardTitle>Small Rounded Corners</CardTitle>
    </CardHeader>
  </Card>
  <Card rounded="md">
    <CardHeader>
      <CardTitle>Medium Rounded Corners</CardTitle>
    </CardHeader>
  </Card>
  <Card rounded="lg">
    <CardHeader>
      <CardTitle>Large Rounded Corners</CardTitle>
    </CardHeader>
  </Card>
  <Card rounded="xl">
    <CardHeader>
      <CardTitle>Extra Large Rounded Corners</CardTitle>
    </CardHeader>
  </Card>
</div>

Shadows

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "@pipecat-ai/voice-ui-kit";

<div className="flex flex-col gap-4 w-full">
  <Card shadow="none">
    <CardHeader>
      <CardTitle>No Shadow</CardTitle>
    </CardHeader>
  </Card>
  <Card shadow="xshort">
    <CardHeader>
      <CardTitle>X-Short Shadow</CardTitle>
    </CardHeader>
  </Card>
  <Card shadow="short">
    <CardHeader>
      <CardTitle>Short Shadow</CardTitle>
    </CardHeader>
  </Card>
  <Card shadow="long">
    <CardHeader>
      <CardTitle>Long Shadow</CardTitle>
    </CardHeader>
  </Card>
  <Card shadow="xlong">
    <CardHeader>
      <CardTitle>X-Long Shadow</CardTitle>
    </CardHeader>
  </Card>
  <Card variant="destructive" shadow="short">
    <CardHeader>
      <CardTitle>Destructive Short Shadow</CardTitle>
    </CardHeader>
  </Card>
  <Card variant="success" shadow="short">
    <CardHeader>
      <CardTitle>Success Short Shadow</CardTitle>
    </CardHeader>
  </Card>
</div>

Elbows

Note: will not work with rounded corners.

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "@pipecat-ai/voice-ui-kit";

<>
  <Card className="w-full" withElbows={true}>
    <CardHeader>
      <CardTitle>Card with Elbows</CardTitle>
    </CardHeader>
    <CardContent>
      <pre>withElbows={true}</pre>
    </CardContent>
  </Card>
</>

Gradient Border

Note: Using gradient border applies only when a background variant is not set.

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "@pipecat-ai/voice-ui-kit";

<>
  <Card className="w-full" withGradientBorder shadow="xlong">
    <CardHeader>
      <CardTitle>With Gradient Border (makes shadow stand out more)</CardTitle>
    </CardHeader>
  </Card>
</>

On this page