Components
Loading preview...
Display an indicator of deployment status.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/status-dotimport React from "react";
import { StatusDot } from "@/components/ui/status-dot";
export const Default = () => (
<div className="flex flex-col gap-4">
<div className="font-bold text-xl dark:text-white">Default</div>
<StatusDot state="QUEUED" />
<StatusDot state="BUILDING" />
<StatusDot state="ERROR" />
<StatusDot state="READY" />
<StatusDot state="CANCELED" />
</div>
);
export const Label = () => (
<div className="flex flex-col gap-4">
<div className="font-bold text-xl dark:text-white">Label</div>
<StatusDot label state="QUEUED" />
<StatusDot label state="BUILDING" />
<StatusDot label state="ERROR" />
<StatusDot label state="READY" />
<StatusDot label state="CANCELED" />
</div>
);