Awesome Open Source
Awesome Open Source


Fable bindings for Material-UI


Install Fable bindings for Material-UI


Fable Material-UI is available as Nuget package

dotnet add package Fable.MaterialUI


paket add Fable.MaterialUI


You also need to install Material-UI npm package

npm install @material-ui/core


yarn add @material-ui/core


How to use the bindings

Simply open Fable.MaterialUI.Core and Props module

open Fable.MaterialUI.Core
open Fable.MaterialUI.Props

There are several components, such as button, which are also present in Fable.Helpers.React. To avoid conflicts you can assign module names:

module R = Fable.Helpers.React
module Mui = Fable.MaterialUI.Core

Minimal example

module R = Fable.Helpers.React
module Mui = Fable.MaterialUI.Core
open Fable.MaterialUI.Props

let view =
    Mui.button [
        ButtonProp.Variant ButtonVariant.Contained
    ] [ R.str "Hello world!" ]

Migration to version 2

Required dependency

Fable.MaterialUI v2 works only with dotnet-fable > 2.0.6

Make sure to use the correct version

Breaking changes

Styles.Custom is now a function and has the signature: string * CSSProp list -> Styles. You don't need to manually convert the list of CSS props to an object

Predefined Styles props matching class keys are moved to a nested module Themes.Styles and require either open Fable.MaterialUI.Themes.Styles or qualified access, e.g. Styles.Root

TransitionDuration is removed from:

  • MenuProp
  • PopoverProp
  • StepContentProp

and moved to MaterialProp.TransitionDurationAuto (compiled to transitionDuration but allows to pass AutoEnum.Auto)


Since keyValueList function is not recursive in Fable 2, there are several properties which have now been replaced with functions, converting a list of DU cases to an object. The usage of those props stays the same, except Styles (see above).



To build the project you need Paket and FAKE installed as dotnet global tool:

dotnet tool install paket -g
dotnet tool install fake-cli -g

Then run:

paket restore
fake build

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
f-sharp (329
material-ui (228
fsharp (141
fable (21