Published source aligned with the DesignMyUI interface foundation.
Published Oct 11, 2026Make it yours
These settings are included in the generated wrapper. The original release source stays unchanged.
"use client";
import type { ButtonHTMLAttributes } from "react";
import { AuroraButton } from "./aurora-button";
// DesignMyUI appearance schema v1. Base source is kept unchanged.
export function ConfiguredAuroraButton(props: ButtonHTMLAttributes<HTMLButtonElement>) {
return <AuroraButton {...props} style={{ ...{
"background": "linear-gradient(135deg,#b1a4fa,#8c72de 60%,#ad83b5)",
"borderRadius": 24,
"boxShadow": "0 4px 0 #8c72de,0 12px 25px #8c72de35,inset 0 1px 1px #ffffff80",
"padding": "16px 29px"
}, ...props.style }} />;
}
Free · MIT license
Aurora Button
A soft gradient, a little depth, and a satisfying click.
- Styling
- inline CSS
- Delivery
- Reusable React component
Add it to your project
pnpm dlx shadcn@latest add "https://designmyui.dev/r/aurora-button?version=1.0.0"Requires lucide-react@1.54.0. The registry installs dependencies. 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.
'use client';
import type { ButtonHTMLAttributes } from 'react';
import { ArrowUpRight } from 'lucide-react';
export function AuroraButton({ children = 'Make it happen', style, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
return <button {...props} style={{display:'inline-flex',alignItems:'center',justifyContent:'center',gap:12,padding:'15px 25px',borderRadius:99,border:'1px solid rgba(255,255,255,.5)',color:'white',background:'linear-gradient(135deg, #b1a4fa 0%, #8c72de 50%, #ad83b5 100%)',boxShadow:'0 5px 0 #8064bd, 0 12px 24px #9474d140, inset 0 1px 1px #ffffff80',fontSize:13,fontWeight:600,cursor:props.disabled?'not-allowed':'pointer',opacity:props.disabled?.5:1,...style}}>{children}<ArrowUpRight size={16}/></button>;
}
Use it in your interface
Interactive handlers belong in a React client component. Replace the content and props with your own.
import { AuroraButton } from "./aurora-button";
<AuroraButton onClick={() => console.log("Clicked")}>
Build something
</AuroraButton>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