OhMyUI! - Installation

OhMyUI! is a monorepo containing design tokens and UI components for Angular, React and Flutter. This page explains how to install the packages in your project.

---

Prerequisites

Before installing, make sure you have:

• Node.js v22 or higher
• npm v10 or higher
• Flutter SDK - only if using Flutter components

---

Angular

Install the Angular package:

npm install @ohmyopensource/ohmyui-angular

Import the component you need directly in your standalone component:

import { ButtonComponent } from '@ohmyopensource/ohmyui-angular';

@Component({
  imports: [ButtonComponent],
  template: `<ohmyui-button label="Click me" />`,
})
export class AppComponent {}

Add the token stylesheet to your styles.css or angular.json:

@import '@ohmyopensource/ohmyui-angular/tokens/variables.css';

---

React

Install the React package:

npm install @ohmyopensource/ohmyui-react

Import the component and the token stylesheet:

import { Button } from '@ohmyopensource/ohmyui-react';
import '@ohmyopensource/ohmyui-react/tokens/variables.css';

export function App() {
  return <Button label="Click me" />;
}

---

Flutter

Add the package to your pubspec.yaml:

dependencies:
  ohmyui_flutter:
    git:
      url: https://github.com/ohmyopensource/ohmyui
      path: packages/ohmyui_flutter

Then run:

flutter pub get

Import and use the widget:

import 'package:ohmyui_flutter/ohmyui_flutter.dart';

OhMyUIButton(
  label: 'Click me',
  variant: OhMyUIButtonVariant.primary,
)

---

Next steps

• Setup your development environment
• Create your first component