npm package: @ngxpert/coolshapes
Description: ![banner-for-readme](https://github.com/ngxpert/coolshapes/assets/6831283/0a46ec53-eeb9-451b-9f70-ba95bbbdbebb)
Latest version: 3.0.0

# @ngxpert/coolshapes

![banner-for-readme](https://github.com/ngxpert/coolshapes/assets/6831283/0a46ec53-eeb9-451b-9f70-ba95bbbdbebb)

[![npm](https://img.shields.io/npm/v/@ngxpert/avvvatars?style=flat-square)](https://www.npmjs.com/package/@ngxpert/coolshapes)
[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)](https://github.com/ngxpert/coolshapes/blob/master/LICENSE)
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

> @ngxpert/coolshapes is an Angular library aiming at allowing developers to use cool-looking abstract shapes with little grainy gradients from [coolshapes](https://coolshap.es/)

## Installation

Install in your project using `npm`:

```bash
# Angular 19+
npm install @ngxpert/coolshapes

# Angular 18+
npm install @ngxpert/coolshapes@2

# Angular 17
npm install @ngxpert/coolshapes@1
```

or `yarn`

```bash
# Angular 19+
yarn add @ngxpert/coolshapes

# Angular 18+
yarn add @ngxpert/coolshapes@2

# Angular 17
yarn add @ngxpert/coolshapes@1
```

## Usage

Then simply start using `coolshape` component in your code:

```ts
@Component({
  selector: 'usage',
  templateUrl: 'usage.component.html',
  imports: [CoolshapesComponent],
  standalone: true,
})
export class UsageComponent {}
```

```html
<coolshape></coolshape>
```

## [Demo and Docs](https://ngxpert.github.io/coolshapes)

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tbody>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/shhdharmen"><img src="https://avatars.githubusercontent.com/u/6831283?v=4?s=100" width="100px;" alt="Dharmen Shah"/><br /><sub><b>Dharmen Shah</b></sub></a><br /><a href="https://github.com/ngxpert/@ngxpert/coolshapes/commits?author=shhdharmen" title="Code">💻</a> <a href="#content-shhdharmen" title="Content">🖋</a> <a href="https://github.com/ngxpert/@ngxpert/coolshapes/commits?author=shhdharmen" title="Documentation">📖</a> <a href="#example-shhdharmen" title="Examples">💡</a> <a href="#ideas-shhdharmen" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-shhdharmen" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#maintenance-shhdharmen" title="Maintenance">🚧</a> <a href="#platform-shhdharmen" title="Packaging/porting to new platform">📦</a> <a href="#projectManagement-shhdharmen" title="Project Management">📆</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/realvjy"><img src="https://avatars.githubusercontent.com/u/7387461?v=4?s=100" width="100px;" alt="vijay verma"/><br /><sub><b>vijay verma</b></sub></a><br /><a href="#design-realvjy" title="Design">🎨</a> <a href="#research-realvjy" title="Research">🔬</a></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td align="center" size="13px" colspan="7">
        <img src="https://raw.githubusercontent.com/all-contributors/all-contributors-cli/1b8533af435da9854653492b1327a23a4dbd0a10/assets/logo-small.svg">
          <a href="https://all-contributors.js.org/docs/en/bot/usage">Add your contributions</a>
        </img>
      </td>
    </tr>
  </tfoot>
</table>

<!-- markdownlint-restore -->

<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!