diff --git a/examples/material-ui/project.clj b/examples/material-ui/project.clj
new file mode 100644
index 0000000..feb130d
--- /dev/null
+++ b/examples/material-ui/project.clj
@@ -0,0 +1,46 @@
+(defproject material-ui-reagent "0.6.0"
+ :dependencies [[org.clojure/clojure "1.9.0"]
+ [org.clojure/clojurescript "1.10.312"]
+ [reagent "0.8.1"]
+ [figwheel "0.5.16"]
+ [cljsjs/material-ui "1.2.1-0"]]
+
+ :plugins [[lein-cljsbuild "1.1.7"]
+ [lein-figwheel "0.5.16"]]
+
+ :figwheel {:repl false
+ :http-server-root "public"}
+
+ :profiles {:dev {:resource-paths ["target/cljsbuild/client" "target/cljsbuild/client-npm"]}}
+
+ :cljsbuild
+ {:builds
+ {:client
+ {:source-paths ["src"]
+ :figwheel true
+ :compiler {:parallel-build true
+ :source-map true
+ :optimizations :none
+ :main "example.core"
+ :output-dir "target/cljsbuild/client/public/js/out"
+ :output-to "target/cljsbuild/client/public/js/main.js"
+ :asset-path "js/out"
+ :npm-deps false}}
+
+ ;; FIXME: Doesn't work due to Closure bug with scoped npm packages
+ :client-npm
+ {:source-paths ["src"]
+ :figwheel true
+ :compiler {:parallel-build true
+ :source-map true
+ :optimizations :none
+ :main "example.core"
+ :output-dir "target/cljsbuild/client-npm/public/js/out"
+ :output-to "target/cljsbuild/client-npm/public/js/main.js"
+ :asset-path "js/out"
+ :install-deps true
+ :npm-deps {react "16.3.0"
+ react-dom "16.3.0"
+ create-react-class "16.3.2"
+ "@material-ui/core" "1.2.1"}
+ :process-shim true}}}})
diff --git a/examples/material-ui/resources/public/index.html b/examples/material-ui/resources/public/index.html
new file mode 100644
index 0000000..482ef72
--- /dev/null
+++ b/examples/material-ui/resources/public/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ Example
+
+
+
+
+
Reagent example app – see README.md
+
+
+
+
diff --git a/examples/material-ui/src/example/core.cljs b/examples/material-ui/src/example/core.cljs
new file mode 100644
index 0000000..adaaeaa
--- /dev/null
+++ b/examples/material-ui/src/example/core.cljs
@@ -0,0 +1,50 @@
+(ns example.core
+ (:require [reagent.core :as r]
+ [material-ui :as mui]
+ [goog.object :as gobj]
+ [reagent.impl.template :as rtpl]))
+
+(def mui-theme-provider (r/adapt-react-class mui/MuiThemeProvider))
+
+(def ^:private input-wrapper
+ (r/reactify-component
+ (fn [props]
+ [:input (-> props
+ (assoc :ref (:inputRef props))
+ (dissoc :inputRef))])))
+
+;; To fix cursor jumping when controlled input value is changed,
+;; use wrapper input element created by Reagent instead of
+;; letting Material-UI to create input element directly using React.
+;; Create-element + convert-props-value is the same as what adapt-react-class does.
+(defn text-field [props & children]
+ (let [props (-> props
+ (assoc-in [:InputProps :inputComponent] input-wrapper)
+ rtpl/convert-prop-value)]
+ (apply r/create-element mui/TextField props children)))
+
+(defonce text-state (r/atom "foobar"))
+
+(defn main []
+ [:div
+ [:div
+ [:strong @text-state]]
+ [:button
+ {:on-click #(swap! text-state str " foo")}
+ "update value property"]
+ [:button
+ {:on-click #(reset! text-state "")}
+ "reset"]
+ [text-field
+ {:id "example"
+ :value @text-state
+ :label "Label"
+ :placeholder "Placeholder"
+ :on-change (fn [e]
+ (reset! text-state (.. e -target -value)))
+ :inputRef #(js/console.log "input-ref" %)}]])
+
+(defn start []
+ (r/render [main] (js/document.getElementById "app")))
+
+(start)