Shadcn.io is not affiliated with official shadcn/ui
Status Pulse Text
Live status indicator with a pulsing colored dot beside a label, featuring a continuous expanding ring for React applications.
Status Pulse Text preview
A tiny but high-signal component for dashboards, status pages, and live feeds. A solid colored dot sits beside its label, while a second concentric ring scales outward and fades — the classic "ping" pulse that tells the eye, at a glance, that something is alive. Five built-in semantic states (live, warning, offline, idle, plus a free-form custom color) cover the usual surface area, and each state maps to a Tailwind palette so the dot reads correctly in both light and dark modes. The pulse can be turned off for static rows in tables, and the whole thing inherits text color from its parent so it composes cleanly inside badges, chips, or inline copy.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the status-pulse-text text effect into my projectRelated Components
Flickering Text
Failing-fluorescent flicker effect across characters
Shimmering Text
Wave-like color shimmer across text
Blur Text
Text animation from blur to focus
Text Cursor
Character trails that follow cursor movement
Typing Text
Typewriter effect with blinking cursor
Motion Highlight
Dynamic background highlight that follows active items
FAQ
Was this page helpful?
Sign in to leave feedback.