Soft Button

A neumorphic button with soft shadows, hover effects, and smooth animations.

Button

Installation

Run the following command to install the component:

npx rareui add soft-button

This will install the component to components/rareui/ directory.

Usage

import SoftButton from '@/components/rareui/SoftButton';

export default function App() {
  return (
    <SoftButton onClick={() => alert('Clicked!')}>
      Click Me
    </SoftButton>
  );
}

Features

  • Neumorphic Design: Soft, multi-layered shadows for a 3D raised effect
  • Interactive Hover: Scale animation, background color change, and enhanced glow
  • Active State: Subtle scale-down feedback on click
  • Theme Aware: Uses CSS variables for primary colors
  • Smooth Transitions: 600ms animated state changes
  • Dark Mode Support: Optimized shadows for both light and dark themes
  • Letter Spacing Animation: Expands tracking on hover for dynamic effect
  • Fully Self-Contained: No global CSS required - all styles are in Tailwind classes

Props

PropTypeDefaultDescription
childrenReact.ReactNode"Button"The content to display inside the button.
classNamestring-Additional CSS classes for the outer wrapper.
...propsReact.HTMLAttributes<HTMLDivElement>-Any additional HTML div attributes (onClick, onMouseEnter, etc.).
Previous
Next