ui-shrushank
componentprimary-buttonsource: ok · hit
Primary Button
The default call to action, solid fill with hover and focus states.
npx shadcn add "https://raw.githubusercontent.com/Shrootiiii/ui/main/r/primary-button.json"free
Where it goes
stats
Interaction
animated-counter
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · mediumanimationframer-motion
Files1 · source cached 10/14/2026, 5:44:04 PM
components/ui/PrimaryButton.tsx
"use client";
import { motion, useReducedMotion } from "framer-motion";
export function PrimaryButton({ children }: { children: React.ReactNode }) {
const shouldReduceMotion = useReducedMotion();
return (
<motion.button
whileTap={shouldReduceMotion ? undefined : { scale: 0.98 }}
transition={{ duration: 0.12, ease: [0.22, 1, 0.36, 1] }}
className="inline-flex h-10 items-center justify-center rounded-md bg-emerald-700 px-4 text-sm font-medium text-white transition-colors duration-150 hover:bg-emerald-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600 active:bg-emerald-900 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:outline-emerald-400"
>
{children}
</motion.button>
);
}