loading...
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 ๐Ÿงฉ

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.

Components

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}>
      <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

Advanced Example

Screenshot 2019-11-25 at 12.51.19 PM.png

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

Documentation and Examples : Magnus UI Home page

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

Discussion

pic
Editor guide