GradientOutline

A React component that adds a customizable animated gradient outline effect to any element.

Demo

Installation

Before using this package, you need to install ** Tailwind CSS ** in your project:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

Add the following to your tailwind.config.js file:

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Add the following to your postcss.config.js file:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

or go to the documentation Tailwind Installation Using PostCSS

After tailwind is installed, you can install the package:

yarn add gradient-outline

or using npm:

npm install gradient-outline

Usage

import React from "react";
import Gline from "gradient-outline";

const App = () => {
  return (
    <Gline borderRadius={16} strokeWidth={2} className="w-full ">
      <button className="p-4 text-white bg-black">Click Me</button>
    </Gline>
  );
};

export default App;

Props

Prop	Type	Default Value	Description
id	string	undefined	Unique identifier for the component.
style	CSSProperties	{}	Custom styles for the outer container.
contentStyle	CSSProperties	{}	Styles applied to the inner content container.
contentClass	string	""	Additional class names for the inner content.
allowHover	boolean	true	Enables hover effect to change gradient colors.
strokeWidth	number	1.5	Width of the gradient border stroke.
borderRadius	number	24	Border radius of the outline.
hoverGradientColors	string[]	[#E6CAA4, #E9B84E]	Gradient colors when hovered.
gradientColors	string[]	[...]	Default gradient colors.
gradientAngle	number	135	Angle of the gradient direction.
className	string	""	Additional class names for the outer container.
onClick	() => void	undefined	Click handler.

Features

• Customizable animated gradient border
• Resizable with automatic dimension tracking
• Configurable gradient colors and angles
• Supports hover state changes

License

MIT