open-index/open-npm huggingface dataset:
npm package: @sliit-wif/animated-borders
Description: > Add stylish animated borders to your buttons with this Tailwind CSS plugin!
Latest version: 1.1.0

# @sliit-wif/animated-borders

> Add stylish animated borders to your buttons with this Tailwind CSS plugin!

<br/>

## Install

<br/>

Using npm:

```sh
npm install --save @sliit-wif/animated-borders
```

or using yarn:

```sh
yarn add @sliit-wif/animated-borders
```

<br/>

## Usage

1.  Make sure you have Tailwind CSS set up in your project.
2.  Update tailwind.config.js:

    - In your tailwind.config.js, make sure to use the correct plugin name:

---

```sh

    plugins: [require("@sliit-wif/animated-borders/src/customButtonPlugin.js")],

```

---

3.  Use the Styles in Your Components:
    - After installing and configuring the plugin, you can use the styles.

---

```sh

  <>

    <button className="flex justify-center items-center bg-blue-900 hover:bg-cyan-200 rounded-[10px] text-white hover:text-blue-900 font-bold py-2 px-4 focus:outline-none focus:shadow-outline animated-border from-blue-800 via-sky-400 to-blue-800 transition-all">
      Custom Button
    </button>

  </>


```

---

4. Make sure to add this css code into your CSS file.

---

- Additional CSS:-

```sh
 @property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

```

---
npm package: @sliit-wif/button-wrapper
Description: > Boost your React projects with our @sliit-wif/button-wrapper—where style meets function. Designed with Tailwind CSS, this button component not only captivates with dynamic animations and hover effects but also doubles as a navigator, seamlessly guiding 
Latest version: 0.1.6

# @sliit-wif/button-wrapper

> Boost your React projects with our @sliit-wif/button-wrapper—where style meets function. Designed with Tailwind CSS, this button component not only captivates with dynamic animations and hover effects but also doubles as a navigator, seamlessly guiding users with its integrated linking feature. It’s the perfect upgrade for a more interactive and polished user experience.

<br/>

## Features

- **Smooth Hover Effects**: Enjoy a subtle scaling background color transition that ensures your buttons not only stand out but also captivate.
- **Arrow Animation**: Dynamic arrows glide on hover, signaling direction and prompting user interaction.
- **Integrated Navigation** : Each button doubles as a navigation tool, offering seamless in-app routing with built-in linking capabilities. Perfect for guiding users through your application’s journey.

<br/>

## Installation

<br/>

Using npm:

```sh
npm install --save @sliit-wif/button-wrapper
```

or using yarn:

```sh
yarn add @sliit-wif/button-wrapper
```

<br/>

## Usage

1.  Make sure you have Tailwind CSS set up in your project.
2.  To use the Animated Button plugin in your project, you need to add it to your tailwind.config.js:

---

```sh

    plugins: [require("@sliit-wif/button-wrapper/dist/buttonStyles")],

```

---

3.  Use the Styles in Your Components:
    - After installing and configuring the plugin, you can use the styles.

---

```sh

  <>

  import { ButtonWrapper } from '@sliit-wif/button-wrapper';


  <ButtonWrapper to="/next-page" className="w-auto" arrow arrowClassName="md:mt-[0.08rem]">
      Go to Next Page
  </ButtonWrapper>

  </>


```
npm package: @slikmen/my-vd-components
Description: This repository is used to create custom components that can be used in multiple projects.
Author: Jesse van Luijtelaar - jesse@vergelijkdirect.com
Latest version: 1.1.21

# Vergelijkdirect.com Components Repository

This repository is used to create custom components that can be used in multiple projects.

## Installation

To make sure that you can build in this project, you'll need to build node modules. This can be achieved by using the following command:

```js
   npm install
```

## How to build and test in this project

When making an component you'll need to test it, this is to make sure that the new component works as intended. In this project there is a feature build in, this feature is called a dev-server. Inside the project files you can see there is a directory called "dev". In this folder you can setup your component and test it inside the browser. To start this dev-server you can call the command: 

```js
   npm run serve
```