Components
Loading preview...
A cycle status button component made with framer motion and tailwind css.
@chetanverma16
npx shadcn@latest add https://21st.dev/r/chetanverma16/status-cycle-buttonimport StatusCycleButton from "@/components/ui/status-cycle-button"
const StatusCycleButtonDemo = ()=> {
return (
<div className="flex gap-4">
<StatusCycleButton
statuses={["Online", "Offline", "Away"]}
cycleInterval={3000}
variant="outline"
size="sm"
/>
<StatusCycleButton
statuses={["Hello", "World"]}
cycleInterval={4000}
size="sm"
/>
<StatusCycleButton
statuses={["Test", "Test 2", "Test 3"]}
cycleInterval={5000}
variant="ghost"
size="sm"
/>
<StatusCycleButton
statuses={["Link 1", "Link 2", "Link 3"]}
cycleInterval={5000}
variant="link"
size="sm"
/>
</div>
)
}
export { StatusCycleButtonDemo }