Ripple
MotionMITMaterial-style ripple effect on press — for buttons and tappable surfaces.
bun add @otfdashkit/ui
Preview
RippleMotion
Loading Storybook preview…
Code
@otfdashkit/uiimport { Ripple } from '@otfdashkit/ui'
export function Example() {
return (
<Ripple className="inline-block rounded-lg border border-border bg-card px-8 py-4 cursor-pointer select-none">
<span className="text-foreground font-medium">Click me for ripple</span>
</Ripple>
)
}
Free with the SDK. This pattern ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the Ripple source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | ||
| color | string | 'currentColor' | Ripple color — defaults to current text color at 20% opacity |
| duration | number | 0.6 | Duration in seconds |