Installation
Run the following command:
npx magicui-cli add shimmer-buttonUpdate tailwind.config.js
Add the following animations to your tailwind.config.js file:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
animation: {
"spin-around": "spin-around calc(var(--speed) * 2) infinite linear",
slide: "slide var(--speed) ease-in-out infinite alternate",
},
keyframes: {
"spin-around": {
"0%": {
transform: "translateZ(0) rotate(0)",
},
"15%, 35%": {
transform: "translateZ(0) rotate(90deg)",
},
"65%, 85%": {
transform: "translateZ(0) rotate(270deg)",
},
"100%": {
transform: "translateZ(0) rotate(360deg)",
},
},
slide: {
to: {
transform: "translate(calc(100cqw - 100%), 0)",
},
},
},
},
},
};Props
| Prop Name | Type | Description | Default Value |
|---|---|---|---|
| shimmerColor | string | The color of the shimmer | #ffffff |
| shimmerSize | string | The size of the shimmer | 0.05em |
| borderRadius | string | The border radius of the button | 100px |
| sparkDuration | string | The duration of the spark animation | 3s |
| background | string | The background of the button | rgba(0, 0, 0, 1) |
| className | string | The class name of the button | undefined |
| children | React.ReactNode | The children of the button | undefined |
Credits
Credit to @jh3yy for the inspiration behind this component.