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