A simple React component library for addding styled borders to your elements.

[!NOTE] This was originally a JavaScript library but has now been transformed into a simple React component library. If you are still using the old version, you can find it at v0.2.0 or browse all previous versions under the Tags section. The documentation for the previous JavaScript library is maintained separately. You can find it in the Bordex Docs or Bordex Archieve Repo Docs

Table of Contents

• Installation
• Usage
• Documentation
• Examples
• Contributing
• License

Installation

You can install Bordex via npm:

npm install bordex

Usage

Here's a quick example of how to use Bordex in your project:

import { GradientBorder } from 'bordex';

export default function App() {
  return (
    <GradientBorder
      angle="45deg"
      colors={['red', 'green', 'blue']}
      borderWidth="5px"
    >
      <p>Gradient Border</p>
    </GradientBorder>
  );
}

Documentation

Check out the Bordex Documentation for a detailed list of available components and options.

Examples

Let's see an example on how to add a stripe border to an element

import { StripeBorder } from 'bordex';

export default function App(){
  return (
    <StripeBorder
    borderWidth='5px'
    stripeWidth='10'
    angle='45deg'
    colors={['red', 'orange', 'lightblue']}>
      <p>Stripe Border</p>
    </StripeBorder>
  )
}

Check out the Documentation for a more detailed list about the available styled borders.

Contributing

Contributions are welcome! Please read the CONTRIBUTING.md for guidelines on how to conribute to this project.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License. See the LICENSE file for more details.