The fe-theme from opensrc0

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
📦 Installation
💻 Usage
⚙️ Customization
📚 Online Editor Templates
📝 Contributing
✨ Contributors
⚖️ 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}