Installation

• Expo / React Native (Recommended)
• Nativewind CSS

Automatic Installation

Using the CLI is now the easiest way to start a solUI project. You can initialize your project and add components directly via the CLI:

Installation

Execute one of the following commands in your terminal:

pnpm add -g solui

Initialization and Starting the App

Initialize the project by using the init command.

solui init

Start the local server:

cd solui-app && pnpm run dev

Adding the Components

Once your solUI project is ready to develop, you can add individual components using the CLI. For example, to add a button component:

solui add button

Manual Installation

If you prefer not to use the CLI, you may try individual installation to set up solUI in your project:

Most components rely on nativewind for CSS and react-native-vector-icons for a Icons Library. Run the following command in your terminal:

pnpm add  nativewind react-native-reanimated@~3.17.4 react-native-safe-area-context@5.4.0 --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11  react-native-vector-icons  

Create tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}"
  ],
  presets: [require("nativewind/preset")],
  theme: { extend: {} },
  plugins: [],
};

Create global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Create babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
    plugins: [
      'react-native-reanimated/plugin',
    ],
  };
};

1. Browse the Components.
2. Click on the component you want to use.
3. Copy the source code or install via solui CLI.

Need help? Feel free to reach out or open an issue on GitHub.