The GradientFlow component creates a flowing gradient animation effect for its children, adding visual interest to backgrounds or UI elements.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/gradient-flow.jsonEverything Gradient Flow accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children (required) | React.ReactNode | No default | The content to be wrapped with the gradient flow effect |
| duration | number | 10 | Duration of the animation cycle (in seconds) |
| colors | string[] | ['#ff0080', '#7928ca', '#ff4d4d'] | Array of colors to use in the gradient |
| className | string | '' | Additional CSS classes for styling |
Required.