Published source aligned with the DesignMyUI interface foundation.
Published Oct 11, 2026✳Made to stand out.
Free · MIT license
Gradient Border
A subtle frame that makes a simple idea stand out.
- Styling
- inline CSS
- Delivery
- Reusable React component
Add it to your project
pnpm dlx shadcn@latest add "https://designmyui.dev/r/gradient-border?version=1.0.1"Uses React and inline CSS. No additional runtime libraries. Installation guide ↗
♡ Save to favorites
Free source is public. Sign in to keep this version in your library.
Source & usage
The source below is checked against this release’s published SHA-256 hash before delivery. Copy the file or use the registry.
/**
* Copyright (c) 2026 DesignMyUI
* SPDX-License-Identifier: MIT
*/
import type { ReactNode } from "react";
export function GradientBorder({
children = (
<>
<span style={{ fontSize: 22 }}>✳</span>
<span>Made to stand out.</span>
</>
),
radius = 18,
}: {
children?: ReactNode;
radius?: number;
}) {
return (
<div
style={{
padding: 1.5,
borderRadius: radius,
background: "linear-gradient(120deg,#a8b9f3,#d4a2f5,#f5bbc7,#f2d8af)",
boxShadow: "0 10px 28px #9f91bb16",
width: "100%",
maxWidth: 270,
}}
>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 12,
borderRadius: Math.max(0, radius - 1.5),
padding: "24px 20px",
background: "#ffffffed",
color: "#554b69",
fontSize: 14,
fontWeight: 500,
}}
>
{children}
</div>
</div>
);
}
Use it in your interface
Interactive handlers belong in a React client component. Replace the content and props with your own.
import { GradientBorder } from "./gradient-border";
<GradientBorder radius={18}>Your content</GradientBorder>Published versions
Each download keeps its original source. Choose a release to inspect and download that exact version.
Initial published source.
Published Oct 11, 2026