Docs / Components / Animated Border Button
Animated Border Button
A button component with a moving gradient border animation using motion/react and CSS offset-path.
Dependencies
Install the following dependencies to use this component:
1npm install motion clsx tailwind-merge
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add animated-border
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content of the button. |
| duration | number | 2 | The duration of the border animation in seconds. |
| borderWidth | number | 2 | The width of the animated border. |
| borderRadius | string | 12px | The border radius of the button. |
| className | string | '' | Additional CSS classes. |