On hover a liquid rises from the bottom with a rippling wavy edge while the label color inverts.
npx shadcn@latest add https://hyperblur.dev/r/liquid-button.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/liquid-button.tsx.
import { LiquidButton } from "@/components/hyperblur/liquid-button"
<LiquidButton color="#19c3f5">Join the list</LiquidButton>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Button label. |
| color | string | "#2f7bff" | Border, liquid and focus ring color. |
| duration | number | 0.6 | Seconds for the liquid to fill the button. |
| rounded | number | 9999 | Corner radius in pixels. The default makes a pill. |
| size | "sm" | "md" | "lg" | "md" | Font size and padding preset. |