Components
Loading preview...
The Countdown Button is a shadcn/ui component designed for time-sensitive actions, such as “Resend OTP” or retry mechanisms. Once clicked, the button starts a countdown timer and automatically disables itself, showing the remaining seconds (e.g., “Resend OTP in 20s”). After the countdown ends, it re-enables for further interactions. This component supports configurable sizes (sm, md, lg) and is highly reusable for workflows that require controlled user interactions, ensuring both clarity and functionality while maintaining a clean, modern UI.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/countdown-buttonimport CountdownButton from "@/components/ui/countdown-button";
export default function DemoCountdownButton() {
return (
<div className="flex gap-4">
<CountdownButton label="Resend OTP" countdown={20} />
<CountdownButton label="Retry" countdown={10} size="lg" />
</div>
);
}