Chewypixel component
Status
A colored dot and a label for showing state, with an optional pulse.
Installation
npx shadcn@latest add https://chewypixel.io/r/status.jsonUsage
import { Status } from "@/components/ui/status";
export function OrderStatus() {
return (
<div className="flex gap-4">
<Status tone="success" pulse>Live</Status>
<Status tone="warning">Pending</Status>
<Status tone="danger">Failed</Status>
</div>
);
}Props
toneThe color of the dot and pulse.
"success" | "warning" | "info" | "danger" | "neutral" = "neutral"
pulsePulses a ring out from the dot, for live states.
boolean = false
childrenThe label.
ReactNode
Released under the MIT License.
More components
- Animated NumberA number that counts to its new value when it changes.
- Radio GroupRadio buttons that squish when pressed, with a dot that springs in when picked.
- TooltipA tooltip on a frosted panel that scales in from its trigger and fades out when you move away.
- DialogA dialog that springs up over a light overlay and animates out before it closes.
See them in a real app
These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.