Skip to content

opensrc0/fe-theme

Repository files navigation

FE-Theme Logo

A React UI library using styled-component to build consistent, responsive, theme able UI 💪


Minified Size Styled Component Version React Version NPM Downloads Latest Release

Github Stars MIT License


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

2. Stackblitz

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
Himanshu Gupta

Ashwini Hegde
Ashwini Hegde

Vineet Gupta
Vineet Gupta

Alok Dubey
Alok Dubey

Ravi Verma
Ravi Verma

Semantic Release Bot
Semantic Release Bot

Ghanshyam KD
Ghanshyam KD

Fossa Bot
Fossa Bot

Swaraj Singh
Swaraj Singh

Abhinav Gupta
Abhinav Gupta

Hardik Jain
Hardik Jain

License

MIT © Himanshu Gupta