Aurora Shimmer React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import AuroraShimmer from "./AuroraShimmer";

export default function Example() {
  return (
    <AuroraShimmer
      label={"Launch Reactverse"}
      variant={"primary"}
      size={"md"}
    />
  );
}

Using Aurora Shimmer

Use Aurora Shimmer for a primary action with a short label. Connect onClick to your action and choose size and variant for the available space.

Set accentColor and textColor together so the label stays readable throughout the light sweep.

Props

Name	Type	Required	Default	Description
label	string	No	"Click me"	Accessible or visible label for this component.
variant	'primary' \| 'secondary'	No	"primary"	Visual style of the button.
size	'sm' \| 'md' \| 'lg'	No	"md"	Size of the button.
onClick	function	No	undefined	Click handler function.
accentColor	string	No	"#b5f5d1"	Accent Color.
textColor	string	No	"#14271b"	Text Color.
borderRadius	number	No	10	Border Radius.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.
children	ReactNode	No	undefined	Your content. No demo content is rendered by default.
className	string	No	""	Additional CSS class names, merged with base component styles.