Pulse

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

export function PulseDemo() {

Installation

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

Usage

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

Copy<Pulse />

Customization

Pulse animates a bordered ring with gentle scale and opacity breathing. It is deliberately low urgency—use it when you want presence without implying a hard error or precise percent complete.

Size

Match the ring to icons, badges, and list rows with size-* utilities on the outer span.

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

export function PulseSize() {

Color

The ring uses border-current, so the stroke follows inherited foreground and currentColor. The Color preview uses explicit hex swatches for clarity.

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

export function PulseColor() {

Ring weight

Target the animated ring with a child selector if you need a lighter or heavier stroke.

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

export function PulseRingWeight() {

Duration

Breathing speed follows --duration.

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

export function PulseDuration() {

Examples

These examples emphasize soft holds: warm cache, idle polish, and tooltips that explain a temporary state.

Button

Keeps pending actions feeling patient next to firmer spinners elsewhere in the app.

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

Badge

Works well for “standby” or “degraded but OK” badges where a full spinner would feel loud.

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

Collapsible

A dashed shell and muted copy reinforce that the section is optional context, not a blocker.

import { ChevronsUpDownIcon } from "lucide-react";

import {

Tooltip

Short explanations plus a subtle pulse signal backoff or partial health without opening a dialog.

import { Button } from "@/components/ui/button";
import {
  Tooltip,