fe-theme

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
2. 📦 Installation
3. 💻 Usage
4. ⚙️ Customization
5. 📚 Online Editor Templates
6. 📝 Contributing
7. ✨ Contributors
8. ⚖️ 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

# 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

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
  <ThemeProvider theme={init()}>
    <App />
  </ThemeProvider>
);

2. You are good to go and import fe-theme component in your application

import Button from 'fe-theme/Button';

<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.

==> 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)

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

import Button from '../configButton';

export default {
  Button,
};

2. Pass the newly created theme file in init function

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
  <ThemeProvider theme={init(theme)}>
    <App />
  </ThemeProvider>
);

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 to get fe-theme working on your local machine and guide lines 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