Background Beams
Multiple background beams that traverse the container, creating a stunning visual effect.
Raya UI
Raya (Persian: رایا) means Thought and Vision.
A collection of UI primitives crafted with precision and intelligence for modern dashboards.
Installation
npx shadcn-vue@latest add https://raya-ui.com/registry/background-beams.jsonOr manually:
Install dependencies:
npm install clsx tailwind-mergeCopy the component code into your project.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colorFrom | string | '#18CCFC' | The starting color of the beam gradient. |
| colorMid | string | '#6344F5' | The middle color of the beam gradient. |
| colorTo | string | '#AE48FF' | The ending color of the beam gradient. |
| duration | number | 10 | Base duration of the animation in seconds. |
| delay | number | 0 | Base delay of the animation in seconds. |