Build an Aurora Button in React and Tailwind Projects

Run the registry command from the root of the application that owns your shadcn configuration. The canonical export installs the Radix Slot adapter and resolves the Aurora theme as a registry dependency.

npx shadcn add https://menaceui.com/r/aurora-button.json

Inspect the written paths and import the installed Aurora token stylesheet once. The CLI usually writes that file beneath your configured components directory. Use the actual CLI output instead of assuming a fixed alias or folder.

The canonical route uses the Radix Slot adapter. Separate registry exports exist for Base UI and React Aria Components. Choose the adapter already used by your application so focus, disabled state, and polymorphic rendering follow one primitive model.

• Radix supports asChild composition and prevents an inactive slotted link from firing while the button is loading.
• Base UI can keep a pending control focusable while blocking its action.
• React Aria Components maps pending state through its button primitive and exposes interaction state to the class callback.

Review all three exports on the Aurora Button pagebefore replacing an adapter.

Aurora Button is compatible with a Tailwind application, but its component styling is not implemented as Tailwind utility classes. The installed source uses mn-button classes and Aurora CSS variables for size, color, focus, and motion. Keep that stylesheet in the cascade and use utilities for surrounding layout when useful.

• Change semantic Aurora variables before changing every state rule.
• Pass a custom class for application-specific layout, not for removing button semantics or disabled behavior.
• Check primary, secondary, quiet, and destructive variants against the final page background.

Loading sets aria-busy, disables activation, and replaces the visible label with the configured loading label. Error and success retain the action label and append assistive state text. Do not replace those states with color alone.

The token stylesheet removes the highlight sweep and collapses the button transition when reduced motion is requested. Its loading spinner still turns more slowly, so decide whether your product needs a completely static pending indicator.

• Tab to every button and confirm a visible focus indicator.
• Submit inside a form and confirm the intended button type.
• Try loading, disabled, error, and success states with a screen reader.
• Test a slotted link if the Radix adapter uses asChild.
• Enable reduced motion and inspect the pending indicator.