Signature / Moleculestable

Shimmer Button

Button with animated shimmer sweep overlay and glass-aware variants.

@glinui/uiComponent: shimmer-button

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add shimmer-button

Usage$

Drop-in button replacement with a sweeping shimmer animation overlay.

Basic$

TSX

1import { ShimmerButton } from "@glinui/ui"
2
3export function ShimmerButtonDemo() {
4return <ShimmerButton>Get Started</ShimmerButton>
5}

Examples$

Variants$

TSX

1import { ShimmerButton } from "@glinui/ui"
2
3export function ShimmerButtonVariantsDemo() {
4return (
5  <div className="flex flex-wrap gap-3">
6    <ShimmerButton variant="default">Default</ShimmerButton>
7    <ShimmerButton variant="glass">Glass</ShimmerButton>
8    <ShimmerButton variant="accent">Accent</ShimmerButton>
9  </div>
10)
11}

Sizes$

TSX

1import { ShimmerButton } from "@glinui/ui"
2
3export function ShimmerButtonSizesDemo() {
4return (
5  <div className="flex flex-wrap items-center gap-3">
6    <ShimmerButton size="sm">Small</ShimmerButton>
7    <ShimmerButton size="md">Medium</ShimmerButton>
8    <ShimmerButton size="lg">Large</ShimmerButton>
9  </div>
10)
11}

Accessibility$

Renders a native <button> element with full keyboard support.
Focus ring via focus-visible for keyboard navigation.
Shimmer overlay is decorative (pointer-events-none).

Reduced Motion$

Shimmer uses motion-safe:animate-[...] / motion-reduce:hidden. Under prefers-reduced-motion, the shimmer is hidden and the button renders as a standard styled button.

API Reference$

Prop	Type	Required	Default	Description
`shimmerColor`	`string`	No	`"rgba(255,255,255,0.3)"`	Auto-generated from TypeScript source.
`shimmerDuration`	`number`	No	`2`	Auto-generated from TypeScript source.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from shimmerButtonVariants.
`variant`	`"default" \| "glass" \| "accent"`	No	`"default"`	Variant option from shimmerButtonVariants.

Source$

TSX

1import { ShimmerButton } from "@glinui/ui"

packages/ui/src/components/shimmer-button.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/shimmer-button.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

ShimmerButtonProps

`ShimmerButtonProps`

Prop	Type	Required	Default	Description
`shimmerColor`	`string`	No	`"rgba(255,255,255,0.3)"`	-
`shimmerDuration`	`number`	No	`2`	-
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from shimmerButtonVariants.
`variant`	`"default" \| "glass" \| "accent"`	No	`"default"`	Variant option from shimmerButtonVariants.