{"id":18005011,"url":"https://github.com/aritheelk/uigradients","last_synced_at":"2025-05-02T22:31:06.349Z","repository":{"id":57385340,"uuid":"72833919","full_name":"AriTheElk/uigradients","owner":"AriTheElk","description":"Gradients-as-a-react-component™","archived":false,"fork":false,"pushed_at":"2019-11-05T08:18:59.000Z","size":1156,"stargazers_count":227,"open_issues_count":2,"forks_count":10,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-19T04:13:04.179Z","etag":null,"topics":["gradient-generator","react","reactjs","styled-components"],"latest_commit_sha":null,"homepage":"https://uigradients.syntra.io","language":"JavaScript","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/AriTheElk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-04T09:37:51.000Z","updated_at":"2025-02-11T15:48:56.000Z","dependencies_parsed_at":"2022-09-26T16:50:40.152Z","dependency_job_id":null,"html_url":"https://github.com/AriTheElk/uigradients","commit_stats":null,"previous_names":["aritheelk/uigradients","garetmckinley/uigradients"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AriTheElk%2Fuigradients","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AriTheElk%2Fuigradients/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AriTheElk%2Fuigradients/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AriTheElk%2Fuigradients/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AriTheElk","download_url":"https://codeload.github.com/AriTheElk/uigradients/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252116135,"owners_count":21697316,"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":["gradient-generator","react","reactjs","styled-components"],"created_at":"2024-10-30T00:17:16.436Z","updated_at":"2025-05-02T22:31:04.792Z","avatar_url":"https://github.com/AriTheElk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://raw.githubusercontent.com/garetmckinley/project-assets/master/uigradients/header.svg?sanitize=true\" alt=\"UIGradients Logo\" id=\"dracula-invert\" /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"CircleCI\" src=\"https://img.shields.io/circleci/build/github/garetmckinley/uigradients?style=for-the-badge\"\u003e\n  \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/uigradients?style=for-the-badge\"\u003e\n  \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dt/uigradients?color=dodgerblue\u0026label=Installs\u0026style=for-the-badge\"\u003e\n  \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/garetmckinley/uigradients?color=mediumslateblue\u0026style=for-the-badge\"\u003e\n\u003c/p\u003e\n\n* [💾 Installation](#-installation)\n* [📚 Docs](#-docs)\n* [🏗 Usage Examples](#-usage-examples)\n* [📜 License](#-license)\n\n\n## 💾 Installation\n\n    npm install --save uigradients\n\nor \n\n    yarn add uigradients\n\n\n## 📚 Docs\n\n### Components\n\n- [`Gradient`](https://garetmckinley.github.io/uigradients/?path=/docs/documentation-gradient--linear-gradient)\n- [`GradientProvider`](https://garetmckinley.github.io/uigradients/?path=/docs/documentation-gradientprovider--usage)\n\n### Utilities\n\n- [`generator`]()\n  \n\n#### [Or, go to the interactive docs →](https://garetmckinley.github.io/uigradients)\n\n\n## 🏗 Usage Examples\n### Linear Gradient Component\n\n``` jsx\n// Import the component...\nimport { Gradient } from 'uigradients';\n\n// Now, use it!\nclass App extends Component {\n    // If no gradient preset is provided,\n    // a random preset will be used.\n    return (\n      \u003cGradient preset=\"cherry\"\u003e\n        \u003ch1\u003eThis will draw a div with a cherry gradient, like the one you're looking at right now.\u003c/h1\u003e\n      \u003c/Gradient\u003e\n    );\n}\n```\n\u003e ###### `cherry` is only one of the many presets provided by [_`uigradients`_](https://jsbros.github.io/uigradients/)\n\u003e A complete list of the gradient presets can be previewed [here](https://0df99f9c-6d93-4766-a009-1f633aa91579.sbook.io/).\n\u003e You can use your own preset library via [`GradientProvider`](https://garetmckinley.github.io/uigradients/?path=/docs/documentation-gradientprovider--usage)\n\n### Radial Gradient Component\n\n``` jsx\nimport { Gradient } from 'uigradients';\n\nclass App extends Component {\n    return (\n      // Add a \"type\" attribute on your component and\n      // set it to \"radial\" for a radial gradient!\n      // NOTE: If a \"type\" attribute is not on\n      // your component, the gradient type will\n      // default to linear\n      \u003cGradient preset=\"aubergine\" type=\"radial\"\u003e\n        \u003ch1\u003eWow, a radial gradient!\u003c/h1\u003e\n      \u003c/Gradient\u003e\n    );\n}\n```\n\n### Gradient Generator\n\n``` jsx\nimport { generator } from 'uigradients';\n\ngenerator({preset: 'intuitive_purple'});\n\n/* The function above returns:\nbackground-color: ,#DA22FF,;\nbackground-image: -webkit-linear-gradient(\n  left,\n  ,#DA22FF,,\n  ,#9733EE,);\nbackground-image: linear-gradient(\n  to left,\n  ,#DA22FF,,\n  ,#9733EE,);\n*/\n```\n\n### 💅 Styled Components\n#### Use the Generator in `styled-components`\n\n``` jsx\nimport { generator } from 'uigradients';\nimport styled from 'styled-components';\n\nconst Pre = styled.pre`\n  ${generator({preset: 'electric_violet'})}\n  border-radius: 4px;\n  display: block;\n`;\n```\n\n#### And render the component\n\n![This is what an electric_violet pre looks like!](https://imgur.com/hNuroip.png)\n\n#### Or, you can override other properties on the Gradient component\n\n``` jsx\nimport { Gradient } from 'uigradients';\nimport styled from 'styled-components';\n\nconst Header = styled(Gradient)`\n  min-height: 300px;\n  text-align: center;\n  width: 100%;\n`;\n```\n\n#### And render the component\n\n![Awesome!](https://imgur.com/7G9C4eN.png)\n\n#### Or, you can generate a radial gradient\n\n```js\nimport { generator } from 'uigradients';\nimport styled from 'styled-components';\n\nconst RadialComponent = styled.div`\n  ${generator({gradient: 'electric_violet', type: 'radial'})}\n`;\n```\n\n#### And render the component\n\n![Radial gradient](https://i.imgur.com/PcyFqtx.jpg)\n\n\n## 📜 License\n\nThis package is released under the [MIT License](LICENSE)\n\n\n\u003cimg src=\"https://raw.githubusercontent.com/syntra/assets/master/syntra-sponsorship.svg?sanitize=true\" alt=\"sponsored by syntra.io\"/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faritheelk%2Fuigradients","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faritheelk%2Fuigradients","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faritheelk%2Fuigradients/lists"}