Components
Loading preview...
An unusual button that employs modern and retro styles at the same time. Credit: https://codepen.io/jdillon/pen/qEWOGxm
@Northstrix
npx shadcn@latest add https://21st.dev/r/maxim.bort.devel/modern-retro-buttonimport ModernRetroButton from "@/components/ui/modern-retro-button";
export default function DemoModernRetroButton() {
return (
<div className="flex flex-col items-center justify-center min-h-screen space-y-8">
<div
className="text-center text-lg font-bold px-4 py-2 rounded"
style={{
color: "var(--modern-retro-button-text-default)",
}}
role="alert"
>
⚠️ Epilepsy Warning ⚠️
<br />
This button flickers on hover.
</div>
<ModernRetroButton
label="Modern, Retro, or both?"
onClick={() => alert("Modern Retro Button clicked!")}
textDefault="var(--modern-retro-button-text-default)"
textHover="var(--modern-retro-button-text-hover)"
background="var(--modern-retro-button-background)"
boxShadow="var(--modern-retro-button-box-shadow)"
boxShadowHover="var(--modern-retro-button-box-shadow-hover)"
svgRect="var(--modern-retro-button-svg-rect)"
svgRectFlicker="var(--modern-retro-button-svg-rect-flicker)"
border={false}
/>
</div>
);
}