Pulse dot

ChatGPT uses this directly in the chat surface: one small dot that pulses at the end of the assistant turn until streamed text appears. PulseDot is the same pattern for your own products: copilots, support bots, and composer footers where a full spinner would feel heavy.

import { PulseDot } from "@/components/loading-ui/pulse-dot";

export function PulseDotDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/pulse-dot
Copy

Usage

Copyimport { PulseDot } from "@/components/loading-ui/pulse-dot";

Copy<PulseDot />

Customization

The dot is a rounded-full block with bg-current, so color follows inherited foreground and currentColor. Scale sets how large the “breathing” motion feels relative to surrounding copy.

Size

Chat UIs usually keep this tiny (size-2 or size-2.5 beside baseline text), larger in empty states or toolbars.

import { PulseDot } from "@/components/loading-ui/pulse-dot";

export function PulseDotSize() {

Color

Because the dot is filled with bg-current, its hue follows the element’s text color / currentColor. The preview below uses text-[#…] on purpose so the swatches stay obvious; in real layouts you usually inherit from a parent or use whatever color API matches your theme.

import { PulseDot } from "@/components/loading-ui/pulse-dot";

export function PulseDotColor() {

Duration

Breathing speed uses --duration, defaulting to 1.2s in the component.

import { PulseDot } from "@/components/loading-ui/pulse-dot";

export function PulseDotDuration() {

Examples

Button

Drop-in for “assistant is working” actions without changing button height.

import { Button } from "@/components/ui/button";
import { PulseDot } from "@/components/loading-ui/pulse-dot";

Badge

Thread and model-status chips stay compact because the dot carries the motion alone.

import { Badge } from "@/components/ui/badge";
import { PulseDot } from "@/components/loading-ui/pulse-dot";

Input group

Mirrors the inline composer pattern: placeholder copy plus a dot at the trailing edge.

import {
  InputGroup,
  InputGroupAddon,

Tabs

Use a tab panel to separate streaming copy from secondary material (sources, citations).

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { PulseDot } from "@/components/loading-ui/pulse-dot";