ReactMD is available over a CDN. Add one of the following to your app:
12345<!-- ReactMD without any icons -->
<script
crossorigin
src="https://unpkg.com/react-md@2.9.1/dist/umd/react-md.development.js"
></script>
12345<!-- ReactMD with font icons -->
<script
crossorigin
src="https://unpkg.com/react-md@2.9.1/dist/umd/react-md-with-font-icons.development.js"
></script>
12345<!-- ReactMD with svg icons -->
<script
crossorigin
src="https://unpkg.com/react-md@2.9.1/dist/umd/react-md-with-svg-icons.development.js"
></script>
The links above are only meant for development, and are not suitable for production. Minified and optimized production versions of ReactMD are available at:
12345<!-- ReactMD without any icons -->
<script
crossorigin
src="https://unpkg.com/react-md@2.9.1/dist/umd/react-md.production.min.js"
></script>
12345<!-- ReactMD with font icons -->
<script
crossorigin
src="https://unpkg.com/react-md@2.9.1/dist/umd/react-md-with-font-icons.production.min.js"
></script>
12345<!-- ReactMD with SVG icons -->
<script
crossorigin
src="https://unpkg.com/react-md@2.9.1/dist/umd/react-md-with-svg-icons.production.min.js"
></script>
To choose a specific version, replace 2.9.1
in the urls with the
specific version.
Head on over to the advanced installation guide for more information about using the CDN hosted UMD bundle of react-md.
Unfortunately the pre-compiled css bundles and themes are not included automatically with the UMD bundles, but they are available through the jsDelivr CDN. Unlike the UMD bundles, there are no development versions of the pre-compiled css bundles and only minified production versions are provided.
Each theme will follow the naming pattern of:
react-md.{PRIMARY}-{SECONDARY}-{SECONDARY_WEIGHT}-{LIGHT|DARK}.min.css
So a few examples are:
react-md.indigo-pink-200-dark.min.css
react-md.indigo-pink-200-light.min.css
react-md.light_blue-deep_orange-200-light.min.css
react-md.light_blue-deep_orange-700-dark.min.css
react-md.purple-pink-200-dark.min.css
react-md.purple-pink-200-light.min.css
react-md.teal-pink-200-dark.min.css
react-md.teal-pink-200-light.min.css
To include a pre-compiled theme in your app, update your index.html
to include
a new <link>
tag:
12345<link
crossorigin
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@2.9.1/themes/react-md.teal-pink-200-dark.min.css"
/>
Replace any of the theme colors in the href
for your specific theme and
replace 2.9.1
for a specific version of ReactMD.
The pre-compiled themes used to be published with the base
react-md
package, but the tarball ended up being too large so package managers and other CDNs rejected it. The themes are compiled and committed with each tagged version of ReactMD, but removed before pushing the commit tomain
.