Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/opensrc0/fe-theme
A React UI library using styled-component to build consistent, responsive, theme able UI
https://github.com/opensrc0/fe-theme
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
Last synced: 5 days ago
JSON representation
A React UI library using styled-component to build consistent, responsive, theme able UI
- Host: GitHub
- URL: https://github.com/opensrc0/fe-theme
- Owner: opensrc0
- License: mit
- Created: 2019-05-30T05:50:25.000Z (over 5 years ago)
- Default Branch: develop
- Last Pushed: 2024-10-15T18:06:42.000Z (21 days ago)
- Last Synced: 2024-10-17T07:38:26.612Z (19 days ago)
- 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
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/fe-theme
- Size: 5.32 MB
- Stars: 53
- Watchers: 8
- Forks: 11
- Open Issues: 21
-
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
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
A React UI library using styled-component to build consistent, responsive, theme able UI đź’Ş
FE-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.
## Table of contents
1. 🚀 [Features](#features)
2. 📦 [Installation](#installation)
3. đź’» [Usage](#usage)
4. ⚙️ [Customization](#customization)
4. đź“š [Online Editor Templates](#online-editor-templates)
5. đź“ť [Contributing](#contributing)
6. ✨ [Contributors](#contributors)
7. ⚖️ [License](#license)
## Features
- **Theme:** FE-Theme provides themeable based UI component, and are easy to configure.
- **Web/Mobile Support:** FE-theme will be helpfull in Large/Mid/Small size of web based applications.
- **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.
- **Advancement:** FE-Theme provide a variety of advance plug and play component like `Voice Search`, `Share`, `Contact List`, `Live Location Tracking`, `Current Location` etc.
- **Scalable & Maintainable:** FE-Theme components are built on top of a React UI and Styled-Component for better scalable, maintainable component.
- **Accessiblity Support:** FE-Theme components follow the accessiblity guidelines specifications and have the right `aria-*` attributes.
- **Dark Mode UI:** FE-Theme support dark mode compatibility.
## Installation
Install `fe-theme` package using any package manager
```sh
# with Yarn
$ yarn add fe-theme
# with npm
$ npm i fe-theme --save
# with pnpm
$ pnpm add fe-theme
# with Bun
$ bun add fe-theme
```
## Usage
#### 1. Use fe-theme in your application using themeProvider
```js
import { ThemeProvider } from 'styled-components'; // import ThemeProvider component
import init from 'fe-theme/init'; // import Init function
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
// Wrap your application with ThemeProvider
);
```
#### 2. You are good to go and import fe-theme component in your application
```js
import Button from 'fe-theme/Button';
```
  Wow, the configuration is quite simple, but wait... button design is different in your application.
  No worry, Checkout Customization.
## Customization
#### 1. Create your own theme
==> To Generate config files for components **Automatically** using command line [Check Commands](./.github/COMMAND.md).
==> To create config files for components **Manually**, follow steps given below.
  **a)** Create an empty folder called ```fe-theme-config``` in your application at any location.
  **c)** Create ```configButton.js``` file inside ```fe-theme-config folder``` (To configure Button Component)
```js
const Button = {
primary: {
color: configColor.white,
background: configColor.themeColor,
borderColor: configColor.themeColor,
borderRadius: '4px',
},
outlined: {
color: configColor.themeColor,
bgColor: configColor.white,
borderColor: configColor.themeColor,
borderRadius: '14px',
},
size: {
s: { fontSize: 'xs', padding: [1, 2] },
m: { fontSize: 's', padding: [1.5, 2] },
l: { fontSize: 's', padding: [2, 2.5] },
},
extraProps: {},
};
export default Button;
```
  **Note** Config file name start with ```config``` keyword along with ```component Name``` like ```configButton.js``` or ```configInput.js```
  **c)** Create theme.js file and include configButton.js
```js
import Button from '../configButton';
export default {
Button,
};
```
#### 2. Pass the newly created theme file in init function
```js
import { ThemeProvider } from 'styled-components';
import init from 'fe-theme/init';
import theme from '{PATH}/fe-theme-config/theme'; // Include your theme to fe-theme
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
// Inside the Init function pass theme
);
```
**Note:** ```PATH``` is a variable i.e. location of config files in your application
**Hurrah...!!!** Now you can change button(any compponent) property according to your application
```
Your Application Folder(Root Directory)
└──fe-theme-config
├──configButton
├──configInput
└──configChip
```
Play around the property of component according to your project.
## Online Editor Templates
#### 1. CodeSandbox
- JavaScript Starter: https://codesandbox.io/p/devbox/fe-theme-js-6q2vcg
#### 2. Stackblitz
- JavaScript Starter: https://stackblitz.com/edit/fe-theme-js-b6mri2
## Contributing
Feel like contributing? Most welcome!
[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.
## Contributors
Thanks goes to these wonderful people
Himanshu Gupta
Ashwini Hegde
Vineet Gupta
Alok Dubey
Ravi Verma
Semantic Release Bot
Ghanshyam KD
Fossa Bot
Swaraj Singh
Abhinav Gupta
Hardik Jain
## License
MIT © [Himanshu Gupta](https://github.com/opensrc0)