A compact status indicator for real-time activity.
import Ping from "@/components/foliokit/ping";export function PingDemo() { return ( <div className="flex gap-4"> <Ping state="active" /> <Ping state="down" /> <Ping state="idle" /> <Ping state="fixing" /> <Ping state="active" size="sm" /> <Ping state="fixing" size="lg" /> </div> );}pnpm dlx shadcn@latest add https://folio-kit.vercel.app/r/ping.jsonnpx shadcn@latest add https://folio-kit.vercel.app/r/ping.jsonyarn shadcn@latest add https://folio-kit.vercel.app/r/ping.jsonbunx shadcn@latest add https://folio-kit.vercel.app/r/ping.jsonimport Ping from "@/components/foliokit/ping";<Ping state="active" />Use label to add text.
Active Ping
Down Ping
Idle Ping
Fixing Ping
Small Active Ping
Large Fixing Ping
import Ping from "@/components/foliokit/ping";export function PingDemo() { return ( <div className="flex flex-col gap-2"> <Ping state="active" label="Active Ping" /> <Ping state="down" label="Down Ping" /> <Ping state="idle" label="Idle Ping" /> <Ping state="fixing" label="Fixing Ping" /> <Ping state="active" size="sm" label="Small Active Ping" /> <Ping state="fixing" size="lg" label="Large Fixing Ping" /> </div> );}Use size to change the size of the pulse. ( sm | md | lg )
Active Ping
Active Ping
Active Ping
import Ping from "@/components/foliokit/ping";export function PingDemo() { return ( <div className="flex flex-col gap-2"> <Ping state="active" label="Active Ping" size="sm" /> <Ping state="active" label="Active Ping" size="md" /> <Ping state="active" label="Active Ping" size="lg" /> </div> );}Prop
Type