DEV Community

Cover image for ShowDev - Magnus UI - A Utility-First React Native UI Framework

ShowDev - Magnus UI - A Utility-First React Native UI Framework

jsartisan profile image Pawan Kumar ・2 min read

Hello friends!

Say hello to Magnus – 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 🧩


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 consist of fundamental properties that defines your brand guidelines. Magnus provides easy API to set the this properties.


Magnus comes with out of the box well polished react components to get you started quickly.

and many more...

Getting Started

This package is available in npm repository as react-native-magnus.

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

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}>
          <Icon fontSize="lg" mr="md" name="google" color="white" />
      }>Sign-in with Google</Button>

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

The above code will give you output like this:

Screenshot 2019-11-22 at 5.06.34 PM.png

Advanced Example

Screenshot 2019-11-25 at 12.51.19 PM.png


Documentation and Examples : Magnus UI Home page


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 :)

Discussion (0)

Editor guide