Merlo UI

I'm just trying to replicate the design and some functionality of HeroUI v2 for React Native.

Here is a list of some of the components that have already been implemented:

• [x] Button
• [x] Checkbox
• [x] Chip
• [x] Input
• [x] Progress
• [x] CircularProgress
• [x] Radio
• [x] Slider
• [x] Spinner
• [x] Switch

Preview

Since I created the library for my own needs, I did not create any documentation, so feel free to ask any questions in issues.

Installation

Follow the instructions for installing NativeWind v4

Install merlo-ui

# npm
npm install merlo-ui

# yarn
yarn add merlo-ui

To use checkboxes, spinner or icons, also install react-native-svg

# npm
npm install react-native-svg

# yarn
yarn add react-native-svg

Modify your tailwind.config.js

// tailwind.config.js

+ const { merloui } = require("merlo-ui/plugin")

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
+   "node_modules/merlo-ui/**/*.{js,jsx,ts,tsx}"
  ],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  darkMode: "class",
+ plugins: [merloui()],
}

Usage

import { Button } from 'merlo-ui'

// ...

;<Button color="success" variant="flat">
  Button
</Button>

Preview

License

MIT

Made with create-react-native-library