Button

Displays a button or a component that looks like a button. Interactive, accessible, and ready for any context.

Installation

1. Install Dependencies

npm install clsx tailwind-merge class-variance-authority @radix-ui/react-slot

• clsx & tailwind-merge: For dynamic class names.

• cva: For managing button variants (primary, secondary, etc).

• Radix Slot: Allows the button to merge with child elements (like links).

2. Create lib/utils.ts

lib/utils.ts

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Premium Variants

New

Shimmer Button

A high-performance button with a rotating shimmer effect, perfect for CTAs.

Gradient Shadow

A button with a glowing background gradient that pulses on hover.

Interactive Hover

A button that expands and reveals content on hover.

Standard Variants

Primary

The default button style.

Secondary

For secondary actions.

Destructive

For destructive actions.

Outline

Border only.