my/ui

Command Palette

Search for a command to run...

All components

Background Shine Button

buttons

Ui-Layouts component.

responsive · 350px

Install

Same command in any shadcn project — React (Vite/CRA), Next.js, Remix, Astro, and more:

$npx shadcn@latest add https://your-domain/r/btn-bg-shine.json

Usage

import Cmp from "@/registry/ui-layouts/btn-bg-shine";

export default function Demo() {
  return <Cmp />;
}

Component source

'use client';

const ButtonBackgroundShine = () => {
  return (
    <button className='inline-flex w-fit mx-auto h-12 animate-background-shine items-center justify-center rounded-md  border-2 dark:border-[#656fe2] border-[#c0c6fc] dark:bg-[linear-gradient(110deg,#1e2a78,45%,#3749be,55%,#1e2a78)] bg-[linear-gradient(110deg,#3d5af1,45%,#5471ff,55%,#3d5af1)] bg-size-[200%_100%] dark:hover:border-white px-6 font-medium text-white dark:text-white transition-colors focus:outline-hidden focus:ring-2 dark:focus:ring-neutral-400 focus:ring-offset-2 focus:ring-offset-neutral-50'>
      Click Me
    </button>
  );
};

export default ButtonBackgroundShine;

Source: Ui-Layouts