Shine button
A button with a thin moving light along its border on hover and focus, in default and outline variants, three sizes, and an anchor when given an href.
Preview
Resize it, switch the theme, replay the entrance — or read the source.
Installation
Add the block to a project that already uses shadcn/ui.
npx shadcn@latest add https://prequelui.terravidhal.me/r/shine-button.jsonRequires a project that already uses shadcn/ui on React and Tailwind CSS v4. The block is copied into your project as a single file you own and can edit.
Usage
Import the named export and render it with your own data.
Every prop is optional and ships with deterministic demo data, so a bare render shows the block at its default. Pass props to plug in your own data and formatters.
import { ShineButton } from "@/components/prequel/shine-button/shine-button";
export default function DashboardPage() {
return <ShineButton />;
}import { ShineButton } from "@/components/prequel/shine-button/shine-button";
export default function DashboardPage() {
return <ShineButton />;
}Props
Every prop is optional and ships with demo-data defaults.
| Prop | Type | Description |
|---|---|---|
className | string | Extra classes merged onto the root element. |
children | ReactNode | — |
variant | "default" | "outline" | Visual style. Defaults to "default". |
size | "sm" | "md" | "lg" | Height and padding. Defaults to "md". |
href | string | Renders a link instead of a button when set. |
onClick | () => void | Click handler for both the button and the link. |
type | "button" | "submit" | "reset" | Native button type. Defaults to "button". |
disabled | boolean | Disables the button. Links keep their href. |
ariaLabel | string | Accessible name when the visible label is not enough. |
Accessibility
The rules every PrequelUI block follows, verified against this block's source.
Charts and graphics expose a text summary via role="img" and an aria-label describing the data.
Interactive charts respond to arrow keys, Home and End, and show tooltips on keyboard focus.
Every button carries a visible focus ring so keyboard users can always see where they are.
The block honours prefers-reduced-motion: animations are skipped and content is fully visible.
Live updates run on timers inside effects and pause when the block is off-screen or hovered.