Getting Started

Get started with Mihr UI in your Flutter project. This guide walks you through installation, basic setup, and customization.

Installation

From your Flutter project directory, run the following command to add Mihr UI:

Usage

Wrap your MaterialApp with Mihr UI themes. That's it — all tokens and components are instantly available.

import 'package:flutter/material.dart';
import 'package:mihr_ui/mihr_ui.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: MihrTheme.light(),
      darkTheme: MihrTheme.dark(),
      themeMode: ThemeMode.system,
      home: const HomeScreen(),
    );
  }
}

Customize the seed

Set a brand seed on MihrThemeConfig and every component re-skins from it. Pass one of the 17 built-in accent palettes — or generate a scale from any hex with ColorScaleGenerator.fromHex().

MihrTheme.light(
  config: MihrThemeConfig(brand: AccentColors.violet),
)

// or from any hex
MihrTheme.light(
  config: MihrThemeConfig(
    brand: ColorScaleGenerator.fromHex('#E63946'),
  ),
)

The 17 built-in accents — pass any as your seed:

Next steps