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-gradient
Props
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
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time

