gradient-outline v1.0.3

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

Features

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

License

MIT