{"id":17374162,"url":"https://github.com/opensrc0/fe-theme","last_synced_at":"2025-04-06T12:12:08.567Z","repository":{"id":57155810,"uuid":"189353543","full_name":"opensrc0/fe-theme","owner":"opensrc0","description":"A React UI library using styled-component to build consistent, responsive, theme able UI","archived":false,"fork":false,"pushed_at":"2025-02-28T03:26:23.000Z","size":6248,"stargazers_count":53,"open_issues_count":24,"forks_count":11,"subscribers_count":7,"default_branch":"develop","last_synced_at":"2025-03-30T09:08:46.382Z","etag":null,"topics":["accessibility","css","design-system","fe-theme","framwork","frontend","library","mobile-first","react","react-components","react-hooks","reactjs","responsive","storybook","styled-components","styled-system","theme","ui","ui-components","ui-design"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/fe-theme","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/opensrc0.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["opensrc0"],"open_collective":"fe-theme","custom":"https://app.buidlbox.io/buidler/opensrc0"}},"created_at":"2019-05-30T05:50:25.000Z","updated_at":"2024-07-18T18:48:22.000Z","dependencies_parsed_at":"2024-05-17T21:38:01.927Z","dependency_job_id":"45a56061-2c23-4e6f-b986-f5e9b3254eb0","html_url":"https://github.com/opensrc0/fe-theme","commit_stats":{"total_commits":421,"total_committers":18,"mean_commits":23.38888888888889,"dds":"0.23752969121140144","last_synced_commit":"05a662b3476b459c11033180571b46b52be5c203"},"previous_names":["hdlion/ui-theme","hg-arch/fe-theme","opensrc0/fe-theme"],"tags_count":74,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensrc0%2Ffe-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensrc0%2Ffe-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensrc0%2Ffe-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensrc0%2Ffe-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/opensrc0","download_url":"https://codeload.github.com/opensrc0/fe-theme/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247478324,"owners_count":20945266,"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":["accessibility","css","design-system","fe-theme","framwork","frontend","library","mobile-first","react","react-components","react-hooks","reactjs","responsive","storybook","styled-components","styled-system","theme","ui","ui-components","ui-design"],"created_at":"2024-10-16T03:04:18.188Z","updated_at":"2025-04-06T12:12:08.540Z","avatar_url":"https://github.com/opensrc0.png","language":"JavaScript","readme":"\u003cimg src=\"https://github.com/opensrc0/fe-theme/blob/develop/logo.svg\" alt=\"FE-Theme Logo\" width=\"100%\" style=\"width: 100%;\"\u003e\n\u003ch2 align=\"center\"\u003eA React UI library using styled-component to build consistent, responsive, theme able UI 💪 \u003c/h2\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/fe-theme\"\u003e\n   \u003cimg alt=\"Minified Size\" src=\"https://badgen.net/bundlephobia/minzip/fe-theme?color=cyan\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://styled-components.com/releases#v6.1.1\"\u003e\n  \u003cimg alt=\"Styled Component Version\" src=\"https://img.shields.io/badge/styled_component-6.1.1-%2350c62a?logo=styled-components\u0026logoColor=50c62a\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://react.dev/reference/react\"\u003e\n  \u003cimg alt=\"React Version\" src=\"https://img.shields.io/badge/react-18.2.0-%23f1e05a?logo=React\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/fe-theme\"\u003e\n    \u003cimg alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dw/fe-theme?label=Downloads\u0026logo=npm\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/fe-theme/v/latest\"\u003e\n    \u003cimg alt=\"Latest Release\" src=\"https://badgen.net/github/release/opensrc0/fe-theme?icon=github\u0026color=pink\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/opensrc0/fe-theme/stargazers\"\u003e\n    \u003cimg alt=\"Github Stars\" src=\"https://badgen.net/github/stars/opensrc0/fe-theme?icon=github\u0026color=purple\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/opensrc0/fe-theme/blob/master/LICENSE.md\"\u003e\n    \u003cimg alt=\"MIT License\" src=\"https://badgen.net/static/license/MIT/orange\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cbr /\u003e\n\nFE-Theme is a styled-component based comprehensive library of accessible, reusable, and composable React components that streamlines the development of modern web applications and websites. The library offers a theme based UI to quickly start a new small/medium/large size web based applications.\n\n## Table of contents\n1. 🚀 [Features](#features)\n2. 📦 [Installation](#installation)\n3. 💻 [Usage](#usage)\n4. ⚙️  [Customization](#customization)\n4. 📚 [Online Editor Templates](#online-editor-templates)\n5. 📝 [Contributing](#contributing)\n6. ✨ [Contributors](#contributors)\n7. ⚖️  [License](#license)\n  \n## Features\n\n- **Theme:** FE-Theme provides themeable based UI component, and are easy to configure.\n- **Web/Mobile Support:** FE-theme will be helpfull in Large/Mid/Small size of web based applications.\n- **Ease of Styling:** FE-Theme contains a set of layout components like `Button` and `Input` that make it easy to style your components by passing props.\n- **Advancement:** FE-Theme provide a variety of advance plug and play component like `Voice Search`, `Share`, `Contact List`, `Live Location Tracking`, `Current Location` etc.\n- **Scalable \u0026 Maintainable:** FE-Theme components are built on top of a React UI and Styled-Component for better scalable, maintainable component.\n- **Accessiblity Support:** FE-Theme components follow the accessiblity guidelines specifications and have the right `aria-*` attributes.\n- **Dark Mode UI:** FE-Theme support dark mode compatibility.\n  \n## Installation\nInstall `fe-theme` package using any package manager\n  \n```sh\n# with Yarn\n$ yarn add fe-theme\n    \n# with npm\n$ npm i fe-theme --save\n\n# with pnpm\n$ pnpm add fe-theme\n\n# with Bun\n$ bun add fe-theme\n```\n\n## Usage\n\n#### 1. Use fe-theme in your application using themeProvider\n\n```js\nimport { ThemeProvider } from 'styled-components'; // import ThemeProvider component\nimport init from 'fe-theme/init'; // import Init function \nimport App from './App';\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  // Wrap your application with ThemeProvider\n  \u003cThemeProvider theme={init()}\u003e\n    \u003cApp /\u003e\n  \u003c/ThemeProvider\u003e\n);\n```\n\n#### 2. You are good to go and import fe-theme component in your application\n```js\nimport Button from 'fe-theme/Button';\n\n\u003cButton /\u003e\n```\n\n\u0026nbsp;\u0026nbsp;Wow, the configuration is quite simple, but wait... button design is different in your application. \n\u0026nbsp;\u0026nbsp;No worry, Checkout Customization.\n\n\n## Customization\n\n#### 1. Create your own theme\n\n==\u003e To Generate config files for components **Automatically** using command line [Check Commands](./.github/COMMAND.md).\n\n==\u003e To create config files for components **Manually**, follow steps given below.\n\n\u0026nbsp;\u0026nbsp; **a)** Create an empty folder called ```fe-theme-config``` in your application at any location.\n\n\u0026nbsp;\u0026nbsp; **c)** Create ```configButton.js``` file inside ```fe-theme-config folder``` (To configure Button Component)\n\n```js\nconst Button = {\n  primary: {\n    color: configColor.white,\n    background: configColor.themeColor,\n    borderColor: configColor.themeColor,\n    borderRadius: '4px',\n  },\n  outlined: {\n    color: configColor.themeColor,\n    bgColor: configColor.white,\n    borderColor: configColor.themeColor,\n    borderRadius: '14px',\n  },\n  size: {\n    s: { fontSize: 'xs', padding: [1, 2] },\n    m: { fontSize: 's', padding: [1.5, 2] },\n    l: {  fontSize: 's',  padding: [2, 2.5] },\n  },\n  extraProps: {},\n};\n\nexport default Button;\n```\n\u0026nbsp;\u0026nbsp; **Note** Config file name start with ```config``` keyword along with ```component Name``` like ```configButton.js``` or ```configInput.js```\n\n\u0026nbsp;\u0026nbsp; **c)** Create theme.js file and include configButton.js \n```js\nimport Button from '../configButton';\n\nexport default {\n  Button,\n};\n\n```\n\n#### 2. Pass the newly created theme file in init function\n\n```js\nimport { ThemeProvider } from 'styled-components';\nimport init from 'fe-theme/init';\nimport theme from '{PATH}/fe-theme-config/theme';  // Include your theme to fe-theme\nimport App from './App';\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  // Inside the Init function pass theme\n  \u003cThemeProvider theme={init(theme)}\u003e\n    \u003cApp /\u003e\n  \u003c/ThemeProvider\u003e\n);\n```\n\n**Note:** ```PATH``` is a variable i.e. location of config files in your application\n\n**Hurrah...!!!** Now you can change button(any compponent) property according to your application\n\n```\nYour Application Folder(Root Directory)\n  └──fe-theme-config                       \n    ├──configButton           \n    ├──configInput          \n    └──configChip\n```\nPlay around the property of component according to your project.\n\n## Online Editor Templates\n#### 1. CodeSandbox\n- JavaScript Starter: https://codesandbox.io/p/devbox/fe-theme-js-6q2vcg\n\u003c!-- - TypeScript Starter: WIP --\u003e\n\u003c!-- - NextJS TypeScript Starter: WIP --\u003e\n\n#### 2. Stackblitz\n- JavaScript Starter: https://stackblitz.com/edit/fe-theme-js-b6mri2\n\u003c!-- - TypeScript Starter: WIP --\u003e\n\u003c!-- - NextJS TypeScript Starter: WIP --\u003e\n\n\n## Contributing\n\nFeel like contributing? Most welcome! \n[Setup locally](./.github/SETUP.md) to get fe-theme working on your local machine and [guide lines](./.github/CONTRIBUTING.md) to contribute in fe-theme.\n\n## Contributors\n\nThanks goes to these wonderful people\n\n\u003ctable\u003e\n    \u003ctbody\u003e\n      \u003ctr\u003e\n        \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\n          \u003ca href=\"https://github.com/opensrc0\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/6891544?s=400\u0026v=4\" width=\"64px;\" alt=\"Himanshu Gupta\" /\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eHimanshu Gupta\u003c/b\u003e\u003c/sub\u003e\n          \u003c/a\u003e\n          \u003cbr /\u003e\n        \u003c/td\u003e\n        \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\n          \u003ca href=\"https://github.com/ashwinihegde123\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/40521396?v=4\" width=\"64px;\" alt=\"Ashwini Hegde\" /\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eAshwini Hegde\u003c/b\u003e\u003c/sub\u003e\n          \u003c/a\u003e\n          \u003cbr /\u003e\n        \u003c/td\u003e\n        \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\n          \u003ca href=\"https://github.com/vineet091\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/5345138?v=4\" width=\"64px;\" alt=\"Vineet Gupta\" /\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eVineet Gupta\u003c/b\u003e\u003c/sub\u003e\n          \u003c/a\u003e\n          \u003cbr /\u003e\n        \u003c/td\u003e\n        \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\n          \u003ca href=\"https://github.com/Alok30\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/36290248?s=64\u0026v=4\" width=\"64px;\" alt=\"Alok Dubey\" /\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eAlok Dubey\u003c/b\u003e\u003c/sub\u003e\n          \u003c/a\u003e\n          \u003cbr /\u003e\n        \u003c/td\u003e\n        \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\n          \u003ca href=\"https://github.com/Ravi-Chef\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/31059087?v=4\" width=\"64px;\" alt=\"Ravi Verma\" /\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eRavi Verma\u003c/b\u003e\u003c/sub\u003e\n          \u003c/a\u003e\n          \u003cbr /\u003e\n        \u003c/td\u003e\n        \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\n          \u003ca target=\"_blank\" href=\"https://github.com/semantic-release-bot\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/32174276?v=4\" width=\"64px;\" alt=\"Semantic Release Bot\" /\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eSemantic Release Bot\u003c/b\u003e\u003c/sub\u003e\n          \u003c/a\u003e\n          \u003cbr /\u003e\n        \u003c/td\u003e\n        \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\n          \u003ca target=\"_blank\" href=\"https://github.com/Ghanshyam-K-Dobariya\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/5426993?s=400\" width=\"64px;\" alt=\"Ghanshyam KD\" /\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eGhanshyam KD\u003c/b\u003e\u003c/sub\u003e\n          \u003c/a\u003e\n          \u003cbr /\u003e\n        \u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\n          \u003ca target=\"_blank\" href=\"https://github.com/fossabot\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/29791463?v=4\" width=\"64px;\" alt=\"Fossa Bot\" /\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eFossa Bot\u003c/b\u003e\u003c/sub\u003e\n          \u003c/a\u003e\n          \u003cbr /\u003e\n        \u003c/td\u003e\n        \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\n          \u003ca target=\"_blank\" href=\"https://github.com/swarajgolu\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/31703347?v=4\" width=\"64px;\" alt=\"Swaraj Singh\" /\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eSwaraj Singh\u003c/b\u003e\u003c/sub\u003e\n          \u003c/a\u003e\n          \u003cbr /\u003e\n        \u003c/td\u003e\n        \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\n          \u003ca target=\"_blank\" href=\"https://github.com/abhinavGupta786\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/69836367?v=4\" width=\"64px;\" alt=\"Abhinav Gupta\" /\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eAbhinav Gupta\u003c/b\u003e\u003c/sub\u003e\n          \u003c/a\u003e\n          \u003cbr /\u003e\n        \u003c/td\u003e\n        \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\n          \u003ca target=\"_blank\" href=\"https://github.com/hardikjain29\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/13768932?v=4\" width=\"64px;\" alt=\"Hardik Jain\" /\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eHardik Jain\u003c/b\u003e\u003c/sub\u003e\n          \u003c/a\u003e\n          \u003cbr /\u003e\n        \u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n\n## License\n\nMIT © [Himanshu Gupta](https://github.com/opensrc0)\n","funding_links":["https://github.com/sponsors/opensrc0","https://opencollective.com/fe-theme","https://app.buidlbox.io/buidler/opensrc0"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopensrc0%2Ffe-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopensrc0%2Ffe-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopensrc0%2Ffe-theme/lists"}