Gradient Border

Monochrome by default; brand colours for a feature card or a premium plan.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add gradient-border

Example

import { GradientBorder } from "@/components/galactrex/gradient-border";

<div className="relative rounded-xl p-6"><GradientBorder />Pro</div>

Installs to components/galactrex/gradient-border.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`colors`	`string[]`	—	Colours round the ring.
`width`	`number`	`1.5`	Border width.
`duration`	`number`	`8`	Seconds per turn; 0 holds still.
`className`	`string`	—	Extra classes for the outer element.