Gradient Border Card

A static two-stop gradient ring, painted once and never animated.

cards
card
effect
border
gradient

Studio plan

A static two-stop ring, no motion required.

Quick usage

usage

import { GradientBorderCard } from "@pinky-ui/components";

<GradientBorderCard>
  <PricingCard {...plan} />
</GradientBorderCard>

Presets

Default

The family's pink-to-blue accent pair.

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell

npm install @pinky-ui/components

shell

pnpm add @pinky-ui/components

shell

yarn add @pinky-ui/components

shell — copies source into your project

npx pinky-ui add gradient-border-card

Prefer to run the whole repository locally instead?

repository

git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

Prop	Type	Default	Description
children	ReactNode	—	Required.
thickness	number	1.5	Border thickness in px.
from	string	var(--color-blush-300)	First gradient stop.
to	string	var(--color-cloud-300)	Second gradient stop.
radius	"md" \| "lg" \| "xl" \| "2xl"	"xl"	Corner radius from the shape scale.
as	ElementType	"div"	Pass Link from next/link to make the whole card navigable.
href	string	—	Only meaningful when as renders an anchor.
onClick	() => void	—	Makes the card a click target; adds the focus-visible ring automatically.

Accessibility

Same focus-visible rule as Basic Card once onClick/href is present.
The gradient ring is decorative and aria-hidden.

Reduced motion

No motion of its own — the border is static at rest and never animates.

When to use

A card that needs to read as special at rest — a screenshot, a printed reference, a list a pointer never touches

When not to use

A card that should only look special once something's actually moving over or near it — Glow Border or Border Beam Card