ChromeButton uses the @react-bits/LiquidChrome component to render a stunning, animated liquid chrome background behind the button label.

Preview

ChromeButton

Interactive

Install

Add the item with the shadcn CLI.

npx shadcn@latest add @evilbuttons/chrome-button

Usage

[]txt
import ChromeButton from "@/components/evil-buttons/chrome-button";

export function ButtonDemo() {
  return (
    <ChromeButton>
      <span className="relative z-10 text-white font-bold tracking-widest text-lg drop-shadow-md">
        CHROME
      </span>
    </ChromeButton>
  );
}

Props

PropTypeDefaultDescription
childrenReact.ReactNode-The visible button label or content.

Registry

The registry item includes components/evil-buttons/chrome-button.tsx and installs @react-bits/LiquidChrome-TS-TW as a registry dependency.