Hover Border Gradient
A hover effect that expands to the entire container with a gradient border.
Installation
Run the following command
npx shadcn@latest add @aceternity/hover-border-gradientProps
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | N/A | The content to be displayed inside the hover gradient component. |
| containerClassName | string? | undefined | Additional CSS class for the container. |
| className | string? | undefined | Additional CSS class for the inner content. |
| as | React.ElementType? | "button" | The component type that will be used as the container. |
| duration | number? | 1 | Duration of the animation cycle in seconds. |
| clockwise | boolean? | true | Determines the direction of the gradient rotation. |
| ...buttonProps | React.HTMLAttributes<HTMLElement> | N/A | Additional props to be spread over the container element. |
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
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
