Blankslates

Blankslates are components used to display empty or placeholder states. The Voice UI Kit provides a simple text-based blankslate component.

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

<TextDashBlankslate />

Component Variants

TextDashBlankslate

The TextDashBlankslate component displays three dashes (---) as a placeholder for empty or unavailable content.

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

<TextDashBlankslate />

Usage

Basic Usage

Display the default blankslate placeholder.

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

<TextDashBlankslate />

Custom Styling

Apply custom classes to style the blankslate.

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

<TextDashBlankslate className="text-lg text-muted-foreground" />

In Data Lists

Commonly used in data lists to indicate missing values.

import { DataList, TextDashBlankslate } from "@pipecat-ai/voice-ui-kit";

<DataList
  data={{
    "Status": "Active",
    "Session ID": <TextDashBlankslate />,
    "Version": "1.0.0"
  }}
/>

Integration

The TextDashBlankslate component is commonly used:

• In DataList components to show empty values
• In SessionInfo to indicate missing session data
• In ClientStatus to show unavailable status
• Anywhere you need to indicate an empty or unavailable value

It's a standalone component that doesn't require any context providers.