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
Shiny Text!
import { AnimatedShinyText } from "@/components/ui/animated-shiny-text"
export function AnimatedShinyTextDemo() {
return (
<div className="z-10 flex min-h-64 items-center justify-center">
<AnimatedShinyText
shimmerWidth={220}
shimmerColor="white/90"
gradientVia="white/70"
className="text-5xl font-bold"
>
Shiny Text!
</AnimatedShinyText>
</div>
)
}
Installation
pnpm dlx shadcn@latest add https://ebonui.com/r/animated-shiny-text.json
Usage
import { AnimatedShinyText } from "@/components/ui/animated-shiny-text"<AnimatedShinyText>Hello</AnimatedShinyText>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | node | - | The text to be shimmered. |
className | string | - | The class name to be applied to the shimmer. |
shimmerWidth | number | 100 | The width of the shimmer in pixels. |
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