Components
Shiny Button
A pill button with a light sweep that glides across on hover.
A call-to-action button with a diagonal light sweep that glides across the
surface on hover, while the leading sparkle twinkles. It is a real
<button> — forward a ref, wire onClick, disabled, type, anything native.
Pure CSS.
Installation
pnpm dlx shadcn@latest add @tween-ui/shiny-buttonUsage
app/page.tsx
import ShinyButton from '@/components/tweenui/button/shiny-button';
export default function Page() {
return <ShinyButton onClick={() => console.log('clicked')}>Get started</ShinyButton>;
}Props
Extends every native <button> attribute (onClick, type, disabled, ref, …).
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Button label. |
icon | ReactNode | Sparkles | Leading icon; pass null to hide it. |
type | 'button' | 'submit' | 'reset' | 'button' | Native button type. |
className | string | — | Merged with the base styles. |
Accessibility
It renders a native <button>, so keyboard and screen-reader behaviour comes
for free; a visible focus ring is included. The light sweep and sparkle are
decorative (aria-hidden) and are disabled under
prefers-reduced-motion: reduce.