Docs
Shimmer Button
Shimmer Button
A button with a shimmering light which travels around the perimeter.
Installation
npx nyxbui@latest add shimmer-button
Add the following animations to your tailwind.config.ts file:
// tailwind.config.ts
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 |