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.0"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.
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