ShowDev - Magnus UI - A Utility-First React Native UI Framework
Tags: javascript, reactnative, showdev, ui
Published: 2020-04-23 08:48:24

---
title: ShowDev - Magnus UI - A Utility-First React Native UI Framework
published: true
description: Giving your users an ability to change the theme has become a necessity nowadays. Every site is now providing a way to allow users to change the theme according to there mood. In this guide, I will show you how to make Theme Switcher in your React Native app using [Magnus UI.](https://magnus-ui.com/)
cover_image: 'https://magnus-ui.com/images/og-image.png'
tags: javascript, reactnative, showdev, ui
---

Hello friends!

Say hello to  [Magnus](https://magnus-ui.com)  – A Utility-First React Native UI Framework that I built recently.

### Why do you need to choose Magnus UI?

- Consistent Design system and API 🏋️
- Full theme customization 👌
- Easy to use. 🚀
- Expanding list of components 🧩

### Overview 

**Magnus UI is built with Typescript.**

Magnus UI is fully typed because it’s built with Typescript. This means that your theme is typed which ensures that you only access a value that exists on your component.

Magnus comes with two main aspects:
- Utilities
- Components

### Utilities
Utilities consist of fundamental properties that defines your brand guidelines. Magnus provides easy API to set the this properties.
-  [typography](https://magnus-ui.com/docs/typography) 
-  [spacing](https://magnus-ui.com/docs/border-radius) 
-  [border-radius](magnus-ui.com/docs/border-radius) 
-  [icons](https://magnus-ui.com/docs/icons) 
-  [shadows](https://magnus-ui.com/docs/shadows) 
-  [colors](https://magnus-ui.com/docs/colors-system)

### Components
Magnus comes with out of the box well polished react components to get you started quickly.
- [Div](http://magnus-ui.web.app/docs/div)
- [Text](http://magnus-ui.web.app/docs/text)
- [Button](http://magnus-ui.web.app/docs/button)
- [Checkbox](http://magnus-ui.web.app/docs/checkbox)
- [Drawer](http://magnus-ui.web.app/docs/drawer)
- [Icon](http://magnus-ui.web.app/docs/icon)
- [Input](http://magnus-ui.web.app/docs/input)
- [Avatar](http://magnus-ui.web.app/docs/avatar)
- [Image](http://magnus-ui.web.app/docs/image)
- [Modal](http://magnus-ui.web.app/docs/modal)
- [Radio](http://magnus-ui.web.app/docs/radio)
- [Skeleton](http://magnus-ui.web.app/docs/skeleton)
- [Snackbar](http://magnus-ui.web.app/docs/snackbar)
- [Tag](http://magnus-ui.web.app/docs/tag)

and many more...

### Getting Started 
This package is available in npm repository as `react-native-magnus`. 

```bash
npm install react-native-magnus --save
# using yarn
yarn add react-native-magnus
```
Wrap your root component in ThemeProvider from react-native-magnus. You can also pass your custom theme as a prop to **ThemeProvider**
```js
import * as React from "react";
import { AppRegistry } from "react-native";
import { ThemeProvider } from "react-native-magnus";

import App from "./src/App";

const theme = {
  colors: {
    google: "#4285F4",
  }
}

export default function Main() {
  return (
    <ThemeProvider theme={theme}>
      <Button
        mt="md"
        py="lg"
        rounded="sm"
        bg="google"
        block 
        color="white"
        prefix={
          <Icon fontSize="lg" mr="md" name="google" color="white" />
      }>Sign-in with Google</Button>
    </ThemeProvider>
  );
}

AppRegistry.registerComponent("main", () => Main);
```

The above code will give you output like this:

![Screenshot 2019-11-22 at 5.06.34 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1574422621995/lvud_oAav.png)

### Advanced Example

![Screenshot 2019-11-25 at 12.51.19 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1574666498907/3DoXcoNSV.png)

%[https://snack.expo.io/@pawankumar2901/dribble-login-page]


Documentation and Examples :  [Magnus UI Home page]( https://magnus-ui.com/) 

Github:  [https://github.com/jsartisan/react-native-magnus](https://github.com/jsartisan/react-native-magnus) 

#### It's now your turn to try it !!!
Thanks for reading! If you think other people should read this post and use this library, please tweet and share the post 🙂

What do you think, any ideas? Feel free to contact me :)