{"id":16365222,"url":"https://github.com/xiaoluoboding/coolshapes-vue","last_synced_at":"2026-02-12T10:30:17.815Z","repository":{"id":238519443,"uuid":"796198243","full_name":"xiaoluoboding/coolshapes-vue","owner":"xiaoluoboding","description":"100+ abstract shapes with gradient for design \u0026 dev project for Vue","archived":false,"fork":false,"pushed_at":"2024-05-19T07:46:37.000Z","size":650,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-19T08:32:20.907Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://coolshapes-vue.vercel.app","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xiaoluoboding.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["xiaoluoboding"]}},"created_at":"2024-05-05T08:29:59.000Z","updated_at":"2024-05-20T14:45:38.668Z","dependencies_parsed_at":"2024-05-09T14:16:28.596Z","dependency_job_id":"a441abb4-ad15-4492-98cf-4109008f89a4","html_url":"https://github.com/xiaoluoboding/coolshapes-vue","commit_stats":null,"previous_names":["xiaoluoboding/coolshapes-vue"],"tags_count":2,"template":false,"template_full_name":"xiaoluoboding/vue-library-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fcoolshapes-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fcoolshapes-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fcoolshapes-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fcoolshapes-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaoluoboding","download_url":"https://codeload.github.com/xiaoluoboding/coolshapes-vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239471115,"owners_count":19644253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T02:43:01.489Z","updated_at":"2026-02-12T10:30:17.771Z","avatar_url":"https://github.com/xiaoluoboding.png","language":"Vue","readme":"[![Coolshapes](https://coolshap.es/preview.jpg)](https://coolshap.es)\n\n# \u003cp align=center\u003eCoolshapes Vue\u003c/p\u003e\n\n[![NPM][npmBadge]][npmUrl]\n[![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl]\n[![NPM Download][npmDtBadge]][npmDtUrl]\n\n[npmBadge]: https://img.shields.io/npm/v/coolshapes-vue.svg?maxAge=2592000\n[npmUrl]: https://www.npmjs.com/package/coolshapes-vue\n[npmDtBadge]: https://img.shields.io/npm/dt/coolshapes-vue.svg\n[npmDtUrl]: https://www.npmjs.com/package/coolshapes-vue\n[bundlePhobiaBadge]: https://img.shields.io/bundlephobia/minzip/coolshapes-vue\n[bundlePhobiaUrl]: https://bundlephobia.com/package/coolshapes-vue@latest\n\nA simple, fun project for the sake of creating some cool-looking abstract shapes with little grainy gradients crafted by [@realvjy](https://x.com/realvjy), ported to [Vue.js](https://vuejs.org/) by [@xiaoluoboding](https://x.com/robert_shaw_x). Coolshapes is a completely open-source set of 100+ abstract shapes crafted for any design and development projects. Free for both commercial and personal use. Licensed under MIT.\n\n## Table of Contents\n\n\u003cdetails\u003e\n\n\u003csummary\u003eTOC\u003c/summary\u003e\n\n- [Coolshapes Vue](#coolshapes-vue)\n  - [Table of Contents](#table-of-contents)\n  - [Installation](#installation)\n  - [How to use](#how-to-use)\n      - [Global component example](#global-component-example)\n      - [Component with shape category example](#component-with-shape-category-example)\n      - [Generating random shapes](#generating-random-shapes)\n    - [Props](#props)\n      - [notes](#notes)\n    - [Categories](#categories)\n  - [Contributing](#contributing)\n  - [Thanks to](#thanks-to)\n  - [License](#license)\n\n\u003c/details\u003e\n\n## Installation\n\n```sh\npnpm install coolshapes-vue\n```\n\nor\n\n```sh\nbun add coolshapes-vue\n```\n\n## How to use\n\nThere are two types of components available in **Coolshapes**, which you can use: **Global component** and **Component\nfor each category of shapes**. and, you can pass additional [props](#props) to adjust the shapes.\n\n#### Global component example\n\n```vue\n\u003ctemplate\u003e\n  \u003cCoolshape type=\"star\" :index=\"0\" :size=\"48\" /\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup\u003e\nimport { Coolshape } from 'coolshapes-vue'\n\u003c/script\u003e\n```\n\n#### Component with shape category example\n\nYou can import the component for specific category - `Star`,`Ellipse`... etc - and simply pass the index of the shape.\n\n```vue\n\u003ctemplate\u003e\n  \u003cStar :index=\"0\" :size=\"48\" /\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup\u003e\nimport { Star } from 'coolshapes-vue'\n\u003c/script\u003e\n```\n\n#### Generating random shapes\n\nsetting the `random` [prop](#props) to true or leaving the `index` or `type` prop empty would replace the shape with a\nrandom shape every time it renders.\n\n```vue\n\u003ctemplate\u003e\n  \u003c!-- // renders a random shape from any category --\u003e\n  \u003cCoolshape random /\u003e\n  \u003c!-- // renders a shape from the category star --\u003e\n  \u003cCoolshape type=\"star\" random /\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup\u003e\nimport { Coolshape } from 'coolshapes-vue'\n\u003c/script\u003e\n```\n\n### Props\n\n| name                  | data type | default | description                                                                                                                                              |\n| --------------------- | --------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `size`                | _Number_  | 200     | The dimension of shape                                                                                                                                   |\n| [`type`](#categories) | _String_  | random  | The category of shapes, if left empty it will randomly select a category.                                                                                |\n| `noise`               | _Boolean_ | true    | Whether to add noise to the shape or not.                                                                                                                |\n| `index`               | _Number_  | random  | The index of shape within the shape [category](#categories), it would randomly select a shape from the category if type prop given. index starts from 0. |\n| `random`              | _Boolean_ | false   | If set true it will select a random component                                                                                                            |\n\n#### notes\n\n\u003e Index starts from number 0, so if you want to retrieve the first shape of any category, you would use the index number 0.\n\n\u003e The shapes are SVG components behind the hood, so it's also supports all the props that can be passed in a svg element.\n\n### Categories\n\nThere are a total of **115** shapes available in Coolshapes under the following categories.\n\n| name        | count |\n| ----------- | ----- |\n| `star`      | 13    |\n| `triangle`  | 14    |\n| `moon`      | 15    |\n| `polygon`   | 8     |\n| `flower`    | 16    |\n| `rectangle` | 9     |\n| `ellipse`   | 12    |\n| `wheel`     | 7     |\n| `misc`      | 11    |\n| `number`    | 10    |\n\n**Note:** While passing the category name in the component, the name will be in lower case.\n\n## Contributing\n\nIf you want to contribute, create a [pull request](https://github.com/xiaoluoboding/coolshapes-vue/pulls).\n\n## Thanks to\n\n[coolshapes-react](https://github.com/realvjy/coolshapes-react)\n\n## License\n\nMIT [@xiaoluoboding](https://github.com/xiaoluoboding)\n","funding_links":["https://github.com/sponsors/xiaoluoboding"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoluoboding%2Fcoolshapes-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaoluoboding%2Fcoolshapes-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoluoboding%2Fcoolshapes-vue/lists"}