{"id":14230475,"url":"https://github.com/realvjy/coolshapes-react","last_synced_at":"2025-04-08T10:26:39.066Z","repository":{"id":224823770,"uuid":"642499053","full_name":"realvjy/coolshapes-react","owner":"realvjy","description":"100+ abstract shapes with gradient for design \u0026 dev project","archived":false,"fork":false,"pushed_at":"2025-01-22T16:55:32.000Z","size":1252,"stargazers_count":266,"open_issues_count":0,"forks_count":16,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-01T09:20:03.097Z","etag":null,"topics":["coolshapes","figma","illustration","library","react","reactcomponent","shape"],"latest_commit_sha":null,"homepage":"https://coolshap.es","language":"TypeScript","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/realvjy.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":"realvjy","buy_me_a_coffee":"realvjy"}},"created_at":"2023-05-18T17:51:46.000Z","updated_at":"2025-04-01T09:06:22.000Z","dependencies_parsed_at":"2024-03-27T18:39:26.676Z","dependency_job_id":"7eaf2e5f-494d-42a5-9d8a-5f6da2144809","html_url":"https://github.com/realvjy/coolshapes-react","commit_stats":{"total_commits":54,"total_committers":3,"mean_commits":18.0,"dds":0.2592592592592593,"last_synced_commit":"47d8391bdb23b9d28ac9917a6407abe488e1768e"},"previous_names":["realvjy/react-coolshapes","realvjy/coolshapes-react"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realvjy%2Fcoolshapes-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realvjy%2Fcoolshapes-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realvjy%2Fcoolshapes-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realvjy%2Fcoolshapes-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/realvjy","download_url":"https://codeload.github.com/realvjy/coolshapes-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247822418,"owners_count":21001864,"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":["coolshapes","figma","illustration","library","react","reactcomponent","shape"],"created_at":"2024-08-20T13:01:14.244Z","updated_at":"2025-04-08T10:26:39.039Z","avatar_url":"https://github.com/realvjy.png","language":"TypeScript","readme":"[![Coolshapes](https://coolshap.es/preview.jpg)](https://coolshap.es)\n\n# \u003cp align=center\u003eCoolshapes\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/realvjy/coolshapes-react/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/coolshapes-react\" alt=\"license\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/coolshapes-react\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/coolshapes-react\" alt=\"npm package\"\u003e\u003c/a\u003e\n\u003c/p\u003e\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). 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- [Coolshapes](#coolshapes)\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        - [Shape category components example](#component-with-shape-category-example)\n        - [Generating random shapes](#generating-random-shapes)\n        - [Random shape function](#using-random-shape-function)\n        - [Other Methods](#other-methods)\n        - [Accessing the shapes object](#renders-the-shapes-from-all-catagories)\n        - [Props](#props)\n        - [Categories](#categories)\n        - [Others](#others)\n            - [Classname and css](#classnames-and-css)\n            - [Builds](#builds)\n    - [Figma File](#figma-file)\n    - [Credits](#credits)\n    - [Contributing](#contributing)\n    - [Support \\\u0026 Donation](#support--donation)\n\n## Installation\n\n```sh\nnpm install coolshapes-react\n```\n\nor\n\n```sh\nyarn add coolshapes-react\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\nJust import the Global component `Coolshape` and it will work.\n\n```js\nimport { Coolshape } from \"coolshapes-react\";\n\nconst App = () =\u003e {\n  return \u003cCoolshape type=\"star\" index={0} size={48} noise={true}/\u003e;\n};\n\nexport default App;\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```js\nimport { Star } from \"coolshapes-react\";\n\nconst App = () =\u003e {\n  return \u003cStar index={0} size={48}/\u003e;\n};\n\nexport default App;\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```js\n// renders a random shape from any category\nconst Component = () =\u003e {\n  return \u003cCoolshape random={true}/\u003e;\n};\n// renders a shape from the category star\nconst Component2 = () =\u003e {\n  return \u003cCoolshape type=\"star\" random={true}/\u003e;\n};\n```\n\n#### Using random shape function\n```js\nimport { getRandomShape } from \"coolshapes-react\";\n```\n\n```js\ngetRandomShape(); // returns a random shape component\n```\n\n```js\ngetRandomShape({ type: \"ellipse\" }); // returns a random shape component from the category ellipse\n```\n\n```js\ngetRandomShape({ onlyId: true }); // returns shape identifier that can passed as props to the shape component\n// {shapeType, index}\n```\n\n```js\ngetRandomShape({ onlyId: true, type: \"star\" }); // returns shape identifier that can passed as props to the shape component\n// {shapeType: \"star\", index}\n```\n\n#### Other Methods\n\nAll the components are mapped from object that we have given you access to\n\n```js\nconst shapes = {\n  star: [Star1, Star2, ...],\n  ellipse: [Ellipse1, Ellipse2, ...],\n  ...\n}\n```\n\n#### Renders the shapes from all categories\n\n```jsx\nimport { shapes } from \"coolshapes-react\";\n\nconst ShapeGrid = () =\u003e {\n  return (\n    \u003c\u003e\n      {\n        Object.keys(shapes).map((shapeType, _) =\u003e {\n          return shapes[shapeType].map((Shape, index) =\u003e {\n            return \u003cShape size={48} /\u003e;\n        });\n      })}\n    \u003c/\u003e\n  );\n};\n```\n\n###### syntax\n\n```js\nshapes[type][index];\n```\n\n```js\nconst starComponents = shapes[\"star\"];\nconst StarComponent1 = starComponents[0];\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\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### 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### Others\n\n#### ClassNames and css\n\nall the components have classname `coolshapes` assigned as default, but you can also pass custom classname of yours.\n```jsx\nimport { Star } from 'coolshapes-react';\n\nexport const Shape = () =\u003e {\n  return(\n    \u003cStar className={\"myshape\"}/\u003e\n  )\n}\n```\n```scss\n// make the shapes size responsive similar to img elements.\n.coolshapes{\n  width: 100%;\n  max-height: 48px;\n}\n```\n#### Builds\n\nWe have given `umd`, `es` and `cjs` versions of the build.\n\n#### cjs\n\n```js\nconst Coolshapes = require(\"coolshapes-react\");\n```\n\nUsing with react in the browser\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\" /\u003e\n  \u003cscript src=\"https://unpkg.com/react@18/umd/react.development.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/react-dom@18/umd/react-dom.development.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/@babel/standalone/babel.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/coolshapes-react/dist/umd/coolshapes.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\u003cscript type=\"text/babel\"\u003e\n  const domContainer = document.querySelector(\"#root\");\n  const root = ReactDOM.createRoot(domContainer);\n  const coolshapes = window.coolshapes;\n  const Coolshape = coolshapes.Coolshape;\n  root.render(\u003cCoolshape /\u003e);\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n##### unpkg\n```\nhttps://unpkg.com/coolshapes-react/dist/umd/coolshapes.js\n```\n\n## Figma File\n\nGrab it from [Figma Community](https://www.figma.com/community/file/1367467631420622345/cool-shapes-100-abstract-shapes) \n\n## Credits\n- Crafted by [realvjy](https://vjy.me?ref=gcs). You are always welcome to share your feedback on twitter or any other social media platform.\n\n- [Noisy Gradients Plugin](https://www.figma.com/community/plugin/1174390287006360600/noisy-gradients) - Some of the gradients generated using **Noisy Gradients** Figma plugin \n\n## Contributing\nIf you want to contribute, create a [pull request](https://github.com/realvjy/coolshapes-react/pulls).\n\n## Support \u0026 Donation\n\n**Coffee fuels design \u0026 coding ☕️**\n\n\u003ca href=\"https://www.buymeacoffee.com/realvjy\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\" \u003e\u003c/a\u003e\n","funding_links":["https://github.com/sponsors/realvjy","https://buymeacoffee.com/realvjy","https://www.buymeacoffee.com/realvjy"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frealvjy%2Fcoolshapes-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frealvjy%2Fcoolshapes-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frealvjy%2Fcoolshapes-react/lists"}