Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jsartisan/react-native-magnus
A Utility-First React Native UI Framework 🚀🧩
https://github.com/jsartisan/react-native-magnus
design-system react react-native typescript ui-components
Last synced: 3 months ago
JSON representation
A Utility-First React Native UI Framework 🚀🧩
- Host: GitHub
- URL: https://github.com/jsartisan/react-native-magnus
- Owner: jsartisan
- License: mit
- Created: 2019-11-22T05:52:01.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-30T12:11:02.000Z (8 months ago)
- Last Synced: 2024-10-13T11:42:32.751Z (3 months ago)
- Topics: design-system, react, react-native, typescript, ui-components
- Language: TypeScript
- Homepage: https://magnus-ui.com
- Size: 15.7 MB
- Stars: 1,182
- Watchers: 11
- Forks: 77
- Open Issues: 57
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - react-native-magnus - First React Native UI Framework 🚀🧩 | jsartisan | 815 | (TypeScript)
README
Magnus UI
A Utility-First React Native UI Framework
[![npm package](https://img.shields.io/npm/v/react-native-magnus.svg?style=flat-square)](https://www.npmjs.org/package/react-native-magnus) [![NPM downloads](http://img.shields.io/npm/dm/react-native-magnus.svg?style=flat-square)](http://npmjs.com/react-native-magnus) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
**Build UI in React Native, without the tears**
```jsx
Magnus UI 🚀
```
## ✨ Features
- Universal (Android, iOS, Web, & more)
- Works with Expo
- Works with Vanilla React Native
- Full theme support
- Custom theme variants
- TypeScript support
- Super simple API# Examples
- [Example App]https://expo.io/@pawankumar2901/projects/react-native-magnus-example
## 📦 Installation
```bash
npm install react-native-magnus
``````bash
yarn add react-native-magnus
```## 🔨 Usage
```jsx
import { Button } from 'react-native-magnus';;
```## 📦 Components
- [Div](http://magnus-ui.com/docs/div)
- [Text](http://magnus-ui.com/docs/text)
- [Button](http://magnus-ui.com/docs/button)
- [Checkbox](http://magnus-ui.com/docs/checkbox)
- [Drawer](http://magnus-ui.com/docs/drawer)
- [Icon](http://magnus-ui.com/docs/icon)
- [Input](http://magnus-ui.com/docs/input)
- [Avatar](http://magnus-ui.com/docs/avatar)
- [Image](http://magnus-ui.com/docs/image)
- [Modal](http://magnus-ui.com/docs/modal)
- [Radio](http://magnus-ui.com/docs/radio)
- [Skeleton](http://magnus-ui.com/docs/skeleton)
- [Snackbar](http://magnus-ui.com/docs/snackbar)
- [Tag](http://magnus-ui.com/docs/tag)
- [Dropdown](http://magnus-ui.com/docs/dropdown)
- [Fab](http://magnus-ui.com/docs/fab)
- [Select](http://magnus-ui.com/docs/select)
- [Tooltip](http://magnus-ui.com/docs/tooltip)
- [Overlay](http://magnus-ui.com/docs/overlay)## Examples
- [Components Usage](https://snack.expo.io/@pawankumar2901/magnus-ui)
- [Dribble Login Screen](https://snack.expo.io/@pawankumar2901/dribble-login-page)## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)