mui · mnajdova · Sep 29, 2020 · Sep 25, 2020 · Sep 25, 2020 · Sep 25, 2020
diff --git a/docs/src/pages/getting-started/example-projects/example-projects.md b/docs/src/pages/getting-started/example-projects/example-projects.md
@@ -12,6 +12,7 @@ You can find some example projects in the [GitHub repository](https://github.com
 - [Preact](https://github.com/mui-org/material-ui/tree/next/examples/preact)
 - [CDN](https://github.com/mui-org/material-ui/tree/next/examples/cdn)
 - [Plain server-side](https://github.com/mui-org/material-ui/tree/next/examples/ssr)
+- [Use styled-components as styled engine](https://github.com/mui-org/material-ui/tree/next/examples/styled-components-as-styled-engine)
 - And more
 
 Create React App is an awesome project for learning React.

diff --git a/examples/styled-components-as-styled-engine/.gitignore b/examples/styled-components-as-styled-engine/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# production
+/dist
+
+# IDEs and editors
+/.idea
+/.vscode
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/styled-components-as-styled-engine/index.html b/examples/styled-components-as-styled-engine/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Material UI with styled-components</title>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/styled-components-as-styled-engine/package.json b/examples/styled-components-as-styled-engine/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "material-ui-with-styled-components",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.html",
+  "scripts": {
+    "start": "parcel index.html --open",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "@material-ui/core": "next",
+    "@material-ui/lab": "next",
+    "@material-ui/styled-engine-sc": "next",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "parcel-bundler": "^1.6.1",
+    "react": "latest",
+    "react-dom": "latest",
+    "styled-components": "latest"
+  },
+  "keywords": [],
+  "alias": {
+    "@material-ui/styled-engine": "@material-ui/styled-engine-sc"
+  }
+}
diff --git a/examples/styled-components-as-styled-engine/src/demo.tsx b/examples/styled-components-as-styled-engine/src/demo.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Slider from '@material-ui/lab/SliderStyled';
+import { Typography } from '@material-ui/core';
+
+export default function App() {
+  return (
+    <div className="App">
+      <Typography>Styled slider powered by styled-components</Typography>
+      <Slider defaultValue={30} aria-labelledby="primary-slider" color="primary" />
+      <Slider defaultValue={30} aria-labelledby="secondary-slider" color="secondary" />
+      <Slider defaultValue={30} disabled />
+      <Slider
+        defaultValue={30}
+        aria-labelledby="discrete-slider"
+        valueLabelDisplay="auto"
+        step={10}
+        marks
+        min={10}
+        max={110}
+      />
+    </div>
+  );
+}
diff --git a/examples/styled-components-as-styled-engine/src/index.tsx b/examples/styled-components-as-styled-engine/src/index.tsx
@@ -0,0 +1,5 @@
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import Demo from './demo';
+
+ReactDOM.render(<Demo />, document.getElementById('app'));