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. 📦 Installation
2. 💻 Usage
3. 📝 Contributing
4. ✨ Contributors
5. ⚖️ License

Installation

npm install fe-theme --save

Usage

1. Importing UI component in your application

import Button from 'fe-theme/Button';

<Button />

Hurrah...!!! Button is created, but color does not match with the application. No worries.

2. Do you want to change theme according to your application?

Generate a sample file(sample-theme.js) by running below commond in terminal in your project location.

cp sample-theme.js ./ Or Download Sample File

3. Bootstrap theme by calling a themeInit function and pass it to ThemeProvider in theme property

import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'styled-components';
import themeInit from 'fe-theme/Init';
import theme from './sample-theme.js';
import App from './App';

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

4. Go to the sample-theme.js and change the theme like primary: '#000', secondary: '#333'

<Button design="primary" />
<Button design="secondary" />

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

License

MIT © Himanshu Gupta