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

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.

• typography
• spacing
• border-radius
• icons
• shadows
• colors

Components

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

• Div
• Text
• Button
• Checkbox
• Drawer
• Icon
• Input
• Avatar
• Image
• Modal
• Radio
• Skeleton
• Snackbar
• Tag

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:

Advanced Example

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