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

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

npm install fe-theme --save

Usage

1. Creating a fe-theme folder in the root directory of you application. It contains configuration files of fe-theme component like Button, Input etc.

npm run theme-prepare --prefix ./node_modules/fe-theme

2. Passing universal configuration like color properties, font family properties, to the fe-theme library using ThemeProvider (For internal usage only but required)

import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'styled-components';
import theme from '{root-location-of-your-project}/fe-theme/universal/theme'; // root-location-of-your-project is dynamic variable
import App from './App';

ReactDOM.hydrate(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root'),
);

3. Setup is completed, Now import UI component in your application like button

import Button from 'fe-theme/Button';

<Button />

Hurrah...!!! Button is created, but button theme does not match with the your application. No worries. You can change default properties of button component

Your Application Folder(Root Directory)
  └──fe-theme                       
    ├──configButton           
    ├──configInput          
    └──configChip

Play around the property of button according to your project.

Online Editor Templates

WIP

Contributing

Feel like contributing? Most welcome! Follow this quick setup and guide lines to get fe-theme working on your local machine and contribute.

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}