Tailwind CSS buttons
A curated list of awesome, battle tested Tailwind CSS buttons components
All the buttons can be copied directly from the preview. The source code is also available in the Installation section.
Installation (optional)
Install dependencies
npm i motion clsx tailwind-merge react-element-to-jsx-string
Add util file
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Copy these keyframe and animation styles in tailwind.config.ts
file
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
darkMode: "class",
theme: {
extend: {
animation: {
shimmer: "shimmer 2s linear infinite",
},
keyframes: {
shimmer: {
from: {
backgroundPosition: "0 0",
},
to: {
backgroundPosition: "-200% 0",
},
},
},
},
},
plugins: [],
};
Copy the source code (optional)
components/ui/tailwindcss-buttons.tsx
"use client";
import React from "react";
import { IconClipboard } from "@tabler/icons-react";
import { cn } from "@/lib/utils";
export const ButtonsCard = ({
children,
className,
onClick,
}: {
children?: React.ReactNode;
className?: string;
onClick?: () => void;
}) => {
return (
<div
onClick={onClick}
className={cn(
"h-60 w-full bg-white rounded-xl border border-neutral-100 dark:bg-black dark:border-white/[0.2] hover:border-neutral-200 group/btn overflow-hidden relative flex items-center justify-center",
className
)}
>
<div className="absolute inset-0 dark:bg-dot-white/[0.1] bg-dot-black/[0.1]" />
<IconClipboard className="absolute top-2 right-2 text-neutral-300 group-hover/btn:block hidden h-4 w-4 transition duration-200" />
<div className="relative z-40">{children}</div>
</div>
);
};
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time

