shadcn.io is an independent project built on shadcn/ui
Buttons
ProShimmer Button for Vue
A button framed by a thin ring that a glint of light keeps running across. For Vue with Ark UI, when one call to action should feel quietly alive.
A thin ring frames the Shimmer Button, and every few seconds a glint of light runs across it, catching the top and bottom edges as it passes. On hover the button lifts a little, and it sinks when pressed.
Use it for one premium action, Get early access or Upgrade, where steady, quiet motion draws the eye without flashing. For light that only answers a hover, use the Shine Button instead. It wraps the Button, so every variant and size works. The glint is a strip of light sliding under the ring, a CSS keyframe animation the install adds to your stylesheet, with no animation library; with reduced motion the ring stays, the glint stands still and the button doesn't grow.
Installation
Usage
<script setup lang="ts">
import { ShimmerButton } from "@/components/ui/shimmer-button";
</script>
<template>
<ShimmerButton>Get early access</ShimmerButton>
</template>
Demos
Color
ringColor is the ring at rest and shimmerColor the glint, each any CSS color. By default the ring is the primary color blended a little toward the page, and the glint is light in both color schemes. Here an outline button gets a border-colored ring with a primary glint, and a filled one a ring in the full primary color.
Duration
duration is one cycle in milliseconds, the glint's run plus the pause before the next one; the default is 3000. A short cycle feels restless, so keep it for small buttons; a long one suits a large hero button.
Accessibility
The ring is decoration and hidden from assistive tech: the button is announced and activated as any Button. Keyboard focus lifts it as hover does. The glint loops while the button is on screen, so the system's reduced-motion setting stops it.
- Enter
- Activate the button.
- Space
- Activate the button.
FAQ
Does the shimmer run all the time?
Yes, the glint runs once per duration for as long as the button is on screen, unless the system asks for reduced motion.
Will a constant animation slow the page down?
No. The glint is a strip moved with translate under a ring mask, which the browser can hand to the compositor: no layout, no re-render and no JavaScript while it runs.
How do I match my brand?
The fill follows variant, and the ring and glint follow ringColor and shimmerColor, which take theme variables such as var(--primary) or any CSS color. The Color demo shows two combinations.
API Reference
ShimmerButton
data-slot="shimmer-button-ring"
children?VNode
The label, above the ring.
clickEffect?boolean
Apply a click effect to the button.
- Default
true
duration?number
How long one pass of light around the ring takes, in milliseconds, pause included.
- Default
3000
isLoading?boolean
Show a loading indicator.
- Default
false
ringColor?string
The ring's color at rest, any CSS color. By default the primary color, blended a little toward the text so the ring stands apart from the fill.
shimmerColor?string
The light that runs along the ring, any CSS color. By default the page's background in light mode and its text color in dark mode, so it reads as light in both.
asChild?boolean
Use the provided child element as the default rendered element, combining their props and behavior.
class?string
Merged with the part's classes.
--shimmer-button-durationstring
One pass of the glint, pause included (3s).
--shimmer-button-glintstring
The light that runs along the ring.
--shimmer-button-ringstring
The ring's color at rest.
