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.1"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.
/**
* Copyright (c) 2026 DesignMyUI
* SPDX-License-Identifier: MIT
*/
"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
type="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 ? 0.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