āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/aceternity/components/hover-border-gradient ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
A hover effect that expands to the entire container with a gradient border.
hover, card, utility, button
npx shadcn@latest add @aceternity/hover-border-gradient
Run the following command:
npx shadcn@latest add @aceternity/hover-border-gradient
| Prop | Type | Description | Default Value |
| :--- | :--- | :--- | :--- |
| 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. |
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā