tailwind.config.js
const { vpnCustomTheme } = require("@vpn-label/react");

module.exports = {
  plugins: [
    vpnCustomTheme({
      themes: {
        light: {
          colors: {
            primary: "#1A73E8",
          },
        },
        dark: {
          colors: {
            primary: "#1A73E8",
          },
        },
      },
    }),
  ],
};

_app.tsx
import React from "react";
import { VPNProvider } from "@vpn-label/react";

const Application = ({ Component, pageProps }) => {
  return (
    <VPNProvider>
      <main className={isDark ? "dark" : "light"}>
        <Component {...pageProps} />
      </main>
    </VPNProvider>
  );
};

export default Application;

custom-button.tsx
import React from "react";
import { Button } from "@nextui-org/react";

const CustomButton = () => {
  return (
    <Button
      ref={buttonRef}
      disableRipple
      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:!duration-500 hover:after:scale-150 hover:after:opacity-0"
      size="lg"
      onPress={handleConfetti}
    >
      Start Earning Today
    </Button>
  );
};

export default CustomButton;