Tailwind CSS Buttons
Collection of styled button variants built with Tailwind CSS utility classes.
Preview
Tailwind CSS Buttons
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Global CTA elements and form submissions across all IO pages.
Why this component matters
Buttons are the primary action element. Consistency in button styling builds muscle memory for users.
Usage guidance
Use primary (gradient) for main CTAs, secondary (outline) for alternatives. One primary button per section maximum.
Installation
bash
npx shadcn@latest add @aceternity/tailwindcss-buttonsUsage
example.tsxtsx
import { TailwindCSSButtons } from "@/components/ui/tailwindcss-buttons";
export default function Example() {
return (
<TailwindCSSButtons>
{/* Your content here */}
</TailwindCSSButtons>
);
}Source
tailwindcss-buttons.tsx
components/ui/tailwindcss-buttons.tsx