{"id":28173390,"url":"https://github.com/memeddev/epiderme","last_synced_at":"2025-05-15T20:13:39.419Z","repository":{"id":40790806,"uuid":"171757892","full_name":"MemedDev/epiderme","owner":"MemedDev","description":"React components kit","archived":false,"fork":false,"pushed_at":"2023-04-30T12:15:44.000Z","size":2581,"stargazers_count":5,"open_issues_count":8,"forks_count":0,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-20T20:04:59.915Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://memeddev.github.io/epiderme","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/MemedDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-20T22:16:54.000Z","updated_at":"2020-08-17T16:40:32.000Z","dependencies_parsed_at":"2022-09-14T00:31:41.976Z","dependency_job_id":null,"html_url":"https://github.com/MemedDev/epiderme","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MemedDev%2Fepiderme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MemedDev%2Fepiderme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MemedDev%2Fepiderme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MemedDev%2Fepiderme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MemedDev","download_url":"https://codeload.github.com/MemedDev/epiderme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254414360,"owners_count":22067272,"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":"2025-05-15T20:13:28.957Z","updated_at":"2025-05-15T20:13:39.393Z","avatar_url":"https://github.com/MemedDev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://memed.com.br\" rel=\"noopener\" target=\"_blank\"\u003e\u003cimg width=\"150\" src=\"http://memed.com.br/resources/img/logo.png\" alt=\"Memed logo\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\" color=\"#56CDDF\"\u003eEpiderme\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Travis (.org)](https://img.shields.io/travis/MemedDev/epiderme.svg)](https://travis-ci.org/MemedDev/epiderme)\n[![npm (scoped)](https://img.shields.io/npm/v/@memed-dev/epiderme.svg)](https://www.npmjs.com/package/@memed-dev/epiderme)\n[![downloads](https://img.shields.io/npm/dm/@memed-dev/epiderme.svg)](http://npm-stat.com/charts.html?package=@memed-dev/epiderme\u0026from=2015-08-01)\n[![Codecov](https://img.shields.io/codecov/c/gh/MemedDev/epiderme.svg)](https://codecov.io/gh/MemedDev/epiderme)\n[![GitHub](https://img.shields.io/github/license/MemedDev/epiderme.svg)](http://opensource.org/licenses/MIT)\n\n\u003c/div\u003e\n\n## Instalation\n\nEpiderme is available as an [npm package](https://www.npmjs.com/package/@memed-dev/epiderme).\n\nTo install you can use the `npm`.\n\n```shell\nnpm install --save @memed-dev/epiderme\n```\n\nEpiderme is built on top of [React](https://reactjs.org/) and [styled-components](https://www.styled-components.com/), so you must have them installed on your project in order to use it.\n\nYou problably already have React but not styled-components, so:\n\n```shell\nnpm install --save styled-components\n```\n\n## Usage\n\nAfter the installation you will be able to start using it in your project.\n\nHere's a quick example to get you started!\n\n```jsx\n// App.js\nimport React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport { Button, createTheme } from '@memed-dev/epiderme';\n\nconst App = (props) =\u003e (\n  \u003cdiv\u003e\n    \u003cThemeProvider theme={createTheme()}\u003e\n      \u003ch1\u003eMy App Tilte\u003c/h1\u003e\n      \u003cButton color=\"primary\"\u003eButton\u003c/Button\u003e\n    \u003c/ThemeProvider\u003e\n  \u003c/div\u003e\n);\n\nexport default App;\n```\n\n## Customizations\n\nYou can also customize the color, font, spacing, shadows, and many other properties overiding our default theme.\n\nThis is how it looks like:\n\n```javascript\n{\n  typography: {\n    fontFamily: '\"Atcarquette\", \"Helvetica\", \"Arial\", sans-serif',\n    fontSize: '16px',\n    color: 'rgb(51, 51, 51)',\n    body1: {\n      fontSize: '16px',\n      lineHeight: '22px',\n      letterSpacing: '-0.2px'\n    },\n    caption1: {\n      fontSize: '14px',\n      lineHeight: '20px',\n      letterSpacing: '-0.1px'\n    },\n    subtitle2: {\n      fontSize: '18px',\n      lineHeight: '22px',\n      letterSpacing: '-0.35px'\n    },\n    button: {\n      fontSize: '16px',\n      letterSpacing: '-0.2px',\n      textTransform: 'none',\n      fontWeight: 500\n    },\n    weights: {\n      light: 300,\n      regular: 400,\n      medium: 500,\n      semibold: 600,\n      bold: 700\n    }\n  },\n  palette: {\n    black: {\n      default: 'rgb(51, 51, 51)',\n      black50: 'rgba(51, 51, 51, 0.5)',\n      black24: 'rgba(51, 51, 51, 0.24)',\n      black12: 'rgba(51, 51, 51, 0.12)',\n      black08: 'rgba(51, 51, 51, 0.08)'\n    },\n    default: {\n      main: '#dedede',\n      lighten: '#e5e5e5',\n      darken: '#d0d0d0',\n      text: 'rgb(51, 51, 51)'\n    },\n    primary: {\n      main: '#00BCEB',\n      lighten: '#00bbea',\n      darken: '#00a3cc',\n      text: 'white'\n    },\n    accent: {\n      main: '#00d39c',\n      lighten: '#00dba2',\n      darken: '#00c693',\n      text: 'white'\n    }\n  },\n  unit: {\n    space: 8,\n    space2: 16,\n    space3: 24,\n    space4: 32,\n    space5: 40,\n    space6: 48,\n    space7: 56,\n    space8: 64,\n    space9: 72,\n    small: 4,\n    extraSmall: 2\n  },\n  shadows: [\n    'none',\n    '0 3px 10px 0 rgba(0, 0, 0, 0.08)'\n  ],\n  borderRadius: {\n    default: '6px'\n  },\n  icons: {\n    sizes: {\n      small: '16px',\n      medium: '24px',\n      large: '32px',\n    },\n  },\n}\n```\n\nYou can pass your custom theme object to the `createTheme` function provided by epiderme to create your own theme.\nYour theme will be merged with our default theme, you don't need to override all properties, only those you want to customize.\n\n```jsx\n// App.js\nimport React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport { Button, createTheme } from '@memed-dev/epiderme';\n\n// customizing the primary color of the theme\nconst myCustomTheme = createTheme({\n  palette: {\n    primary: {\n      main: 'myAwesomePrimaryColor',\n      lighten: 'myAwesomePrimaryColor',\n      darken: 'myAwesomePrimaryColor',\n      text: 'white',\n    }\n  }\n});\n\nconst App = (props) =\u003e (\n  \u003cdiv\u003e\n    \u003cThemeProvider theme={createTheme(myCustomTheme)}\u003e\n      \u003ch1\u003eMy App Tilte\u003c/h1\u003e\n      \u003cButton color=\"primary\"\u003eButton\u003c/Button\u003e\n    \u003c/ThemeProvider\u003e\n  \u003c/div\u003e\n);\n\nexport default App;\n```\n\nTo see more components, check out our [StoryBook](https://memeddev.github.io/epiderme)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmemeddev%2Fepiderme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmemeddev%2Fepiderme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmemeddev%2Fepiderme/lists"}