Sections
Get Started
Components
- Accordion
- Alert Dialog
- Animated Gradient Text
- Animated Shiny Text
- Avatar
- Badge
- Bento Box
- Bento Grid
- Border Beam
- Breadcrumbs
- Card
- Checkbox
- Custom Cursor
- Dialog
- Glow Border
- Glow Card
- Hyper Text
- Logo Beam
- Marquee
- Number Counter
- Popover
- Ripple Button
- Scroll Area
- Separator
- Shimmer Button
- Shinny Icons
- Tabs
- Terminal
- Text Animate
- Theme Toggler
- Typing Animation
- Word Rotate
import { RippleButton } from "@/components/ui/ripple-button"
export function RippleButtonDemo() {
return <RippleButton rippleColor="#ADD8E6">Tap me</RippleButton>
}
Installation
pnpm dlx shadcn@latest add https://ebonui.com/r/ripple-button.json
Usage
import { RippleButton } from "@/components/ui/ripple-button"<RippleButton>Ripple Button</RippleButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The content of the button. |
className | string | - | Additional class names for the button. |
rippleColor | string | - | The rbg numbers only for the color of the rippling waves. |
duration | string | - | The time span of one ripple. |
Credits
- Credit to @Sidd5arth
Support Ebon UI by giving it a star on GitHub!
A lot of work goes into maintaining and improving Ebon UI. Your stars help show your support and encourage further development.
Star on Github