# Getting Started

## Installation

{% hint style="info" %}
This UI library is dependant on **StyledComponents.** So every component in the library can be customized in the StyleComponents way
{% endhint %}

Installing the package for NPM. use node version 8+

```bash
$ npm install @wigxel/react-components styled-components
```

Installing the package from Yarn

```bash
$ yarn add @wigxel/react-components styled-components
```

###

### Adding Theme Variables

Create a Theme.js file

```bash
# bash
> touch src/Theme.js
```

Copy the Default Theme snippet below into the recently created Theme.js file.

{% code title="src/Theme.js" %}

```javascript
export default {
	colors: {
		primary: "#705DF5",
		accent: "#FFAA00",
		danger: "#E56464",
		grey: "#878787",
		greylight: "#848484",
		navbar: "#FDFDFD",
	},
	
	padding: {
		6: "2rem",
		12: "2.5rem",
	},
	
	alert: {
		info: { bg: "beige", text: "dodgerblue" },
		invite: { bg: "dodgerblue", text: "white" }
	},
	
	timeline: {
		borderColor: "blue",
		hoverColor: "whitesmoke"
	},
	
	...
}
```

{% endcode %}

Next, we have to pass the Theme variables via StyleComponents ThemeProvider.

{% code title="src/App.js" %}

```jsx
import { ThemeProvider } from 'styled-components'
import Theme from './Theme.js'

export default function App () {
    return 
    <ThemeProvider theme={Theme}>
        {/** 
            Using Components within the Theme Provider to add style 
            automatically 
        **/}
    </ThemeProvider>
}
```

{% endcode %}