Liquid Button

A button with a liquid gooey effect on hover.

Installation

Run the following command to install the component:

npx rareui add liquid-button

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

Usage

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

export default function App() {
  return (
    <LiquidButton text="Hover me" />
  );
}

Examples

Custom Colors

<LiquidButton 
  text="Click me"
  backgroundColor="bg-blue-500"
  textColor="text-white"
/>

Continuous Dripping

<LiquidButton 
  text="Always Dripping"
  isDripping={true}
/>

Props

PropTypeDefaultDescription
textstring"Hover me"The text to display inside the button.
classNamestring-Additional CSS classes for the container.
backgroundColorstring"bg-black dark:bg-white"Tailwind class for the background color.
textColorstring"text-white dark:text-black"Tailwind class for the text color.
isDrippingbooleanfalseIf true, liquid drops will continuously animate without needing hover.
Previous
Next