Components
Loading preview...
A button that elevates your site - literally. Built on top of the default Button from Shadcn/ui, the Depth Button adds a subtle depth effect and glossy finish that make interactions feel tactile and alive.
@devetaigabbai
npx shadcn@latest add https://21st.dev/r/devetaigabbai/depth-button
import { DepthButton } from "@/components/ui/depth-button";
export default function DemoOne() {
const variants = [
"default",
"secondary",
"destructive",
"outline",
"tertiary",
"ghost",
"link",
] as const;
return (
<div className="flex flex-col items-center justify-center p-8 gap-10">
<p className="mt-2 text-sm text-muted-foreground animate-pulse dark:hidden">
Switch to dark mode to see the depth effect better!
</p>
<div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
{variants.map((variant) => (
<div
key={variant}
className="flex flex-col items-center justify-center gap-3 border border-border rounded-2xl p-6 bg-background shadow-sm hover:shadow-md transition-shadow"
>
<span className="text-sm font-medium text-muted-foreground capitalize">
{variant}
</span>
<DepthButton variant={variant}>Click me</DepthButton>
</div>
))}
</div>
</div>
);
}