{"id":51060,"date":"2023-11-15T03:51:06","date_gmt":"2023-11-15T11:51:06","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=51060"},"modified":"2024-10-09T07:10:12","modified_gmt":"2024-10-09T14:10:12","slug":"how-to-design-with-coded-components","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/","title":{"rendered":"How to Design with Coded Components \u2013 Simple &#038; Responsive Dashboard Tutorial"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/MUI-Tutorial-1024x512.png\" alt=\"MUI Tutorial\" class=\"wp-image-51166\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/MUI-Tutorial-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/MUI-Tutorial-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/MUI-Tutorial-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/MUI-Tutorial.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Dashboard is an essential part of most apps. It summarizes key events within the application or shows stats that can be used for further analysis. That\u2019s why it\u2019s so common in business tools for teamwork, sales, marketing, and other apps.&nbsp;<\/p>\n\n\n\n<p>At first, dashboard design seems complicated \u2013 it integrates loads of information and datasets. When you actually get to create one, it can be quite easy to put together. The key thing is to have out-of-the-box components that will help you guide design decisions.<\/p>\n\n\n\n<p>In this article, we will walk you through designing a responsive dashboard with a coded component library \u2013 Material UI, one of the best, thoroughly documented libraries of ready-made elements.<\/p>\n\n\n\n<p>Create responsive layouts blazing fast. Drag and drop fully interactive elements to assemble professionally-looking UI in minutes\u2013 as easy as pie. <a href=\"https:\/\/www.uxpin.com\/merge\/developers\" target=\"_blank\" rel=\"noreferrer noopener\">Discover UXPin Merge<\/a>.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <h3 class=\"discover-merge__heading\">Design UI with code-backed components.<\/h3>\n            <p class=\"discover-merge__text\">Use the same components in design as in development. Keep UI consistency at scale.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Try UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-use-mui-components-to-build-a-dashboard\">Why use MUI components to build a dashboard<\/h2>\n\n\n\n<p>MUI created its design library following Google\u2019s Material Design standards. Back in the day, it was a revolutionary component library, helping React developers build responsive layouts faster. It is still relevant to this day, as the MUI team continues to evolve its library, releasing new versions every now and then. To read more about it, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-mui\/\" target=\"_blank\" rel=\"noreferrer noopener\">check out our article about MUI<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-mui-is-full-of-data-display-components\">MUI is full of data display components<\/h3>\n\n\n\n<p>MUI offers many <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-interface-elements-every-designer-should-know\/\" target=\"_blank\" rel=\"noreferrer noopener\">user interface elements<\/a> that are perfect for <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/dashboard-design-principles\/\" target=\"_blank\" rel=\"noreferrer noopener\">dashboards<\/a>. They\u2019re customizable to a great extent. Let\u2019s highlight some of them:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cards<\/strong> \u2013 You can create cards representing a specific data point or a group of related data that you want to highlight.<\/li>\n\n\n\n<li><strong>Data table<\/strong> \u2013 MUI published to a clean-looking React component that has built-in sorting and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/filter-ui-and-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">filtering<\/a> features.<\/li>\n\n\n\n<li><strong>Date and time pickers <\/strong>\u2013 If you need to be super specific and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/date-picker-ui-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">sort by date or time<\/a>, Material-UI components have you covered.<\/li>\n\n\n\n<li><strong>Input components<\/strong> \u2013 You\u2019ll find every type of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/button-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">button<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/form-input-design-best-practices\/\" target=\"_blank\" rel=\"noreferrer noopener\">input<\/a> field you\u2019d like to have in a data table, be it a checkbox, rating, select, and more.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-it-s-a-well-documented-library\">It\u2019s a well-documented library<\/h3>\n\n\n\n<p>Material UI is one of the most documented <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-react-component-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI component libraries<\/a>. It has comprehensive official documentation, stemming from its commitment to keeping the documentation aligned with the evolving nature of the library.<\/p>\n\n\n\n<p>Aside from the effort of MUI\u2019s team to keep its library up to date, the library enjoys strong community support. Developers often share tutorials on building apps with Material UI and they\u2019re ready to help out others.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-it-is-accessible-and-responsive\">It is accessible and responsive<\/h3>\n\n\n\n<p>There are two major characteristics of MUI: accessibility and responsiveness which are key when it comes to modern interface design.<br>MUI places a strong emphasis on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">accessibility<\/a>. Its documentation contains tips on accessibility best practices, including using ARIA attributes. When it comes to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-merge\/\">responsive design<\/a>, MUI is one of the best component libraries to use. You can easily create responsive layouts that will work across devices and screen sizes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Build a Simple Dashboard with MUI components<\/h2>\n\n\n\n<p>We\u2019ll show you how to use <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-code-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a> to build a simple \u2013 yet fully functional and responsive \u2013 dashboard with MUI components. If you want to follow along, <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">create a UXPin account<\/a> or log into it if you already have one.<\/p>\n\n\n\n<p>Here\u2019s what we\u2019re going to create. To see it up close, inspect its code, and see how interactive and responsive it is, <strong><a href=\"https:\/\/preview.uxpin.com\/cb2012469cf786d889b0599f061780aceb8686c4#\/pages\/164789822\" target=\"_blank\" rel=\"noreferrer noopener\">open this UXPin preview<\/a><\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"422\" style=\"aspect-ratio: 750 \/ 422;\" width=\"750\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/dashboard-with-mui.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Create a new prototype<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"597\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/First-project-UXPin-1-1024x597.png\" alt=\"First project UXPin 1\" class=\"wp-image-51174\" style=\"width:750px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/First-project-UXPin-1-1024x597.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/First-project-UXPin-1-515x300.png 515w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/First-project-UXPin-1-768x448.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/First-project-UXPin-1-1536x895.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/First-project-UXPin-1-2048x1194.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>When in UXPin\u2019s dashboard, start by creating a <strong>hover on \u201cDesign with coded components\u201d and pick MUI library.<\/strong><\/p>\n\n\n\n<p>An editor will pop up. In the center of it, you have a canvas. It\u2019s your work field. Adjust the canvas size to match the device you want to design your layout for. You can do that in the right-side menu. In this menu, you can also change the background colors and add grids to help you align elements.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/kb-zKEMw2xD1ZyqRqUB178NCdHxwm6-8N4Gv2Sxxj6pwXOTN4yfD2aGL4qrG7u0UeNZ-uzF37a6HhGDBTGtjZxdk0ie1SK9GPWCz3ju1-SqtVQa5i-lagSssDxW2npzSPoeACed2Yi-TuP5HMKlWxvU\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>On the left side of the canvas, you have a menu where you can find all the pages and layers or ready-made components. To find the MUI library, go to Design System Libraries in the bottom left corner and pick MUI V5 (you\u2019ll find it under Merge libraries.)<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/dg8pKCNwVwBZNOr1Jx7f8jdaOhFJj2JePDdd2h7a_aBdU3HMVL9fJoopUHlu2tJampWzWh45loF7Zg2GaRcHauvAwK4fj42bWPWFgv95_0iCPN43a_j-XkIxCdQ2mFIN2pi_3V6GD_8QnoDDEPpLgKU\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Now, you can click on any component you like and drag it onto the canvas or just click on it to have it appear in the center. See how easy it is.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/4U84vMPMdGAHDERPeTARpm-LNhKObCP9Tbb_dZehAUEK3rOt37pif34IqMBeSsk4AsEMzf9HAZPPE1OYRR1gQT8S88lxMSol7tjbXd_xrfBnLxCyGGpORKVdoVnBmevA0IV0Q3DEHNSgZhhDiHaBfJQ\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Access ThemeCustomizer<\/h3>\n\n\n\n<p>Open the MUI library and search for ThemeCustomizer \u2013 you can use the search bar. It will come in handy when you want to adjust the look of your MUI components. Place ThemeCustomizer above and outside the canvas, so you\u2019re able to navigate to it easily.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"470\" style=\"aspect-ratio: 750 \/ 470;\" width=\"750\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/theme-customizer-mui.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Place MUI components on the canvas<\/h3>\n\n\n\n<p>Pick the components that you want to design with. Start with navigation, such as an app bar and breadcrumbs UI elements. The app bar will help users access other pages and move around the app. When it comes to breadcrumbs, they allow users to orient themselves within the app. Watch this part of the tutorial:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"470\" style=\"aspect-ratio: 750 \/ 470;\" width=\"750\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/design-with-coded-components.mp4\"><\/video><\/figure>\n\n\n\n<p>You can easily adjust the size of the components by clicking on their corners and expanding or contracting them.&nbsp;<\/p>\n\n\n\n<p>We\u2019re also pulling out:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cards<\/strong> \u2013 We will duplicate this component to highlight different insights.<\/li>\n\n\n\n<li><strong>Paper<\/strong> \u2013 It will be our textbox.<\/li>\n\n\n\n<li><strong>Typography<\/strong> \u2013 We drag it out of the library and put it into the Paper components. It helps us manipulate fonts.<\/li>\n\n\n\n<li><strong>Table<\/strong> \u2013 It will be our data table that we can sort through.<\/li>\n<\/ul>\n\n\n\n<p>Now that we have the components ready. We can switch their theme with ThemeCustomizer which we placed above the canvas.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Customize components<\/h3>\n\n\n\n<p>Now the fun part! Move the components around, fill them with your own content and data, and edit their padding and size. Arrange them in any way you want. This is also a step in which you can create complex components from the basic ones.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"470\" style=\"aspect-ratio: 750 \/ 470;\" width=\"750\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/customize-mui-components.mp4\"><\/video><\/figure>\n\n\n\n<p>Just look at how we took our textbox components and copied a few children inside. Then, we filled them with real content, adjusted text size, and added padding. Same goes with the table. We added more rows by simply copying the Table cells and pasting them in the Pages and Layers panel.&nbsp;<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Set up grids and layout<\/h3>\n\n\n\n<p>Make sure that our layout can be responsive. Push your components out of the canvas for a moment and place the layout elements in. Here&#8217;s how you can do it.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"470\" style=\"aspect-ratio: 750 \/ 470;\" width=\"750\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/grids-layouts-dashboard-prototyping.mp4\"><\/video><\/figure>\n\n\n\n<p>Start with a container for a menu. Place the container on top of the canvas, resize it to fit the width, and place the app bar back in. Make sure that your container is set to \u201cresponsive.\u201d<\/p>\n\n\n\n<p>After that, drag a box for our breadcrumbs and put grids for our data table, cards, and text boxes.<\/p>\n\n\n\n<p>It\u2019s super easy to do that because you are just moving the components in the menu, copying the grids, and placing different components inside of them.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6: Preview and share your design<\/h3>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"470\" style=\"aspect-ratio: 750 \/ 470;\" width=\"750\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/prewviw-design-and-inspect-code.mp4\"><\/video><\/figure>\n\n\n\n<p>You are ready to see your dashboard and share it with others. Go to \u201cShare,\u201d copy a URL to preview the prototype, and paste it in the browser or click the preview button \u25b6\ufe0f.&nbsp;<\/p>\n\n\n\n<p>Do you have it? Great! Now, you can change the size of the window to see if your prototype adjusts its size as a truly responsive design would. Share your link with others, so they can preview it too.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 7: Develop the dashboard<\/h3>\n\n\n\n<p>The design is done, so the last step is to copy the code into your React application. <\/p>\n\n\n\n<p>We have provided a <a href=\"https:\/\/github.com\/uxpin-merge\/material-ui-cra\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">starter React App boilerplate<\/a>, containing all the dependencies and configuration needed \u2013 or begin editing right-away in <strong><a href=\"https:\/\/codesandbox.io\/s\/github\/uxpin-merge\/material-ui-cra\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">CodeSandbox<\/a><\/strong> or <a href=\"https:\/\/stackblitz.com\/github\/uxpin-merge\/material-ui-cra\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>StackBlitz<\/strong><\/a> (click to go to the preferred one.)<br><br><strong>Installing and running the React App Boilerplate:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Download or clone the <a href=\"https:\/\/github.com\/uxpin-merge\/material-ui-cra\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Starter React App boilerplate<\/a> repo<\/li>\n\n\n\n<li>Install the project by running: npm install<\/li>\n\n\n\n<li>Run the project by running: npm start<\/li>\n<\/ol>\n\n\n\n<p><strong>Importing the theme:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>From UXPin\u2019s spec mode, copy the JSX of the ThemeCustomizer component.<\/li>\n\n\n\n<li>Paste JSX into the theme.js file of the project<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Here is a video example of using the starter React App repository.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"582\" style=\"aspect-ratio: 750 \/ 582;\" width=\"750\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/developing-react-app.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Importing the components:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"632\" height=\"924\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/Zrzut-ekranu-2023-11-14-o-12.48.19.png\" alt=\"Zrzut ekranu 2023 11 14 o 12.48.19\" class=\"wp-image-51131\" style=\"width:350px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/Zrzut-ekranu-2023-11-14-o-12.48.19.png 632w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/Zrzut-ekranu-2023-11-14-o-12.48.19-205x300.png 205w\" sizes=\"auto, (max-width: 632px) 100vw, 632px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>From UXPin\u2019s spec mode, copy the JSX of the desired component composition.&nbsp;<\/li>\n\n\n\n<li>Paste JSX into to the App.js file<\/li>\n\n\n\n<li>Make sure you have added import statements for each component that you are importing from MUI. Example: import Button from &#8216;@mui\/material\/Button&#8217;<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>For the more in-depth instructions, see the last part of CoderOne\u2019s video tutorial.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Design To React Code Components\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/PsxwVAjMtqI?start=639&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Build layouts 10x faster with UXPin Merge<\/h2>\n\n\n\n<p>That&#8217;s it! You&#8217;ve now set up a new dashboard for your app that is fully responsive and consistent with the MUI component library. Check if your dashboard <a href=\"https:\/\/preview.uxpin.com\/cb2012469cf786d889b0599f061780aceb8686c4#\/pages\/164789822\" target=\"_blank\" rel=\"noreferrer noopener\">looks exactly, as the dashboard in our Preview<\/a>.<\/p>\n\n\n\n<p>With UXPin Merge, you can build way more than just dashboards. Create full user interface designs of apps, websites, and other digital products that can be easily translated into code \u2013 without advanced design skills. <a href=\"https:\/\/www.uxpin.com\/merge\/developers\" target=\"_blank\" rel=\"noreferrer noopener\">Get started with UXPin Merge<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">Try UXPin Merge<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Dashboard is an essential part of most apps. It summarizes key events within the application or shows stats that can be used for further analysis. That\u2019s why it\u2019s so common in business tools for teamwork, sales, marketing, and other apps.&nbsp; At first, dashboard design seems complicated \u2013 it integrates loads of information and datasets. When<\/p>\n","protected":false},"author":3,"featured_media":51166,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,11],"tags":[],"class_list":["post-51060","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-tutorials"],"yoast_title":"A Simple & Responsive Dashboard Tutorial | UXPin","yoast_metadesc":"Learn about designing responsive layouts with coded components that come from MUI libraryy. See how easy you can drag and drop MUI components.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.7 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Simple &amp; Responsive Dashboard Tutorial | UXPin<\/title>\n<meta name=\"description\" content=\"Learn about designing responsive layouts with coded components that come from MUI libraryy. See how easy you can drag and drop MUI components.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Design with Coded Components \u2013 Simple &amp; Responsive Dashboard Tutorial\" \/>\n<meta property=\"og:description\" content=\"Learn about designing responsive layouts with coded components that come from MUI libraryy. See how easy you can drag and drop MUI components.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-15T11:51:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-09T14:10:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/MUI-Tutorial.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-design-with-coded-components\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-design-with-coded-components\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"How to Design with Coded Components \u2013 Simple &#038; Responsive Dashboard Tutorial\",\"datePublished\":\"2023-11-15T11:51:06+00:00\",\"dateModified\":\"2024-10-09T14:10:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-design-with-coded-components\\\/\"},\"wordCount\":1513,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-design-with-coded-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/MUI-Tutorial.png\",\"articleSection\":[\"Blog\",\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-design-with-coded-components\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-design-with-coded-components\\\/\",\"name\":\"A Simple & Responsive Dashboard Tutorial | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-design-with-coded-components\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-design-with-coded-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/MUI-Tutorial.png\",\"datePublished\":\"2023-11-15T11:51:06+00:00\",\"dateModified\":\"2024-10-09T14:10:12+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Learn about designing responsive layouts with coded components that come from MUI libraryy. See how easy you can drag and drop MUI components.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-design-with-coded-components\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-design-with-coded-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-design-with-coded-components\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/MUI-Tutorial.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/MUI-Tutorial.png\",\"width\":1200,\"height\":600,\"caption\":\"MUI Tutorial\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/how-to-design-with-coded-components\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Design with Coded Components \u2013 Simple &#038; Responsive Dashboard Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Simple & Responsive Dashboard Tutorial | UXPin","description":"Learn about designing responsive layouts with coded components that come from MUI libraryy. See how easy you can drag and drop MUI components.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/","og_locale":"en_US","og_type":"article","og_title":"How to Design with Coded Components \u2013 Simple & Responsive Dashboard Tutorial","og_description":"Learn about designing responsive layouts with coded components that come from MUI libraryy. See how easy you can drag and drop MUI components.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/","og_site_name":"Studio by UXPin","article_published_time":"2023-11-15T11:51:06+00:00","article_modified_time":"2024-10-09T14:10:12+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/MUI-Tutorial.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"How to Design with Coded Components \u2013 Simple &#038; Responsive Dashboard Tutorial","datePublished":"2023-11-15T11:51:06+00:00","dateModified":"2024-10-09T14:10:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/"},"wordCount":1513,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/MUI-Tutorial.png","articleSection":["Blog","Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/","name":"A Simple & Responsive Dashboard Tutorial | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/MUI-Tutorial.png","datePublished":"2023-11-15T11:51:06+00:00","dateModified":"2024-10-09T14:10:12+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Learn about designing responsive layouts with coded components that come from MUI libraryy. See how easy you can drag and drop MUI components.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/MUI-Tutorial.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/MUI-Tutorial.png","width":1200,"height":600,"caption":"MUI Tutorial"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-with-coded-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to Design with Coded Components \u2013 Simple &#038; Responsive Dashboard Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/51060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=51060"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/51060\/revisions"}],"predecessor-version":[{"id":54916,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/51060\/revisions\/54916"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/51166"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=51060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=51060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=51060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}