Living systems
A quiet orbit around your content
A restrained gradient circles the edge while the card surface, layout and content remain completely still and readable.
Gradient Border Card
A free card component with a slowly rotating gradient edge.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- No runtime packages
Gradient Border Card is a free card component for Next.js and React, styled with Tailwind, that rotates a conic gradient behind an opaque content surface. It is a gradient border card react css pattern with a fixed one-pixel edge and no gradient-angle repaint.
One oversized square rotates using a single CSS transform and pauses whenever the card is fully offscreen, the document is hidden or a user hovers or focuses within the card. Interactive children keep their own semantics and focus styles, while prefers-reduced-motion leaves the complete border visible and static at its authored position.
Explore the component library
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/card-gradient-borderUsage
import { CardGradientBorder } from "@/components/ui/card-gradient-border";
export default function Page() {
return (
<CardGradientBorder className="max-w-md">
<article className="space-y-3">
<h2 className="text-xl font-semibold">A card with a moving edge</h2>
<p className="text-muted">Your content remains completely still.</p>
</article>
</CardGradientBorder>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Card content, including any interactive children. |
| className | string | undefined | Additional classes merged onto the card root. |
Customisation
Gradient Border Card exposes three Tier 3 tokens. --card-border-from and --card-border-to set the two semantic colour stops with Template Empire and vanilla shadcn fallbacks, while --card-border-dur sets one full rotation period. Override them from :root or any ancestor:
:root {
--card-border-from: var(--color-brand-500, var(--primary));
--card-border-to: var(--color-accent-400, var(--ring));
--card-border-dur: 9s;
}Frequently asked questions
- Is Gradient Border Card free for commercial use?
- Yes. Gradient Border Card is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Gradient Border Card accessible and performant?
- Yes. The decorative layer cannot receive pointer input or focus, and the opaque semantic background keeps content contrast independent from the border. One transform rotates while the gradient stays static, the loop pauses offscreen, in a hidden document, on hover or during focus within, and reduced motion stops it completely.
- How do I customise the border colours or speed?
- Override --card-border-from and --card-border-to with semantic colour tokens, then set --card-border-dur to the desired rotation period. The built-in nested fallbacks work in both Template Empire and vanilla shadcn themes.