Components/Buttons
Sliding Button
A high-performance interactive button that slides an icon into view on hover with spring animations and depth shadows.
buttonslidingmotion
Preview
Installation
npx shadcn@latest add @grootstudio/sliding-buttonUsage
1
Import the component
2
Use like this
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | undefined | The content to display inside the button. | |
| variant | default|outline | default | The visual style of the button. | |
| iconPosition | left|right | right | Which side the sliding icon should appear on. | |
| className | string | undefined | Optional class names for custom styling. |
Dependencies
motion/react
lucide-react