How to Design a Dashboard in Around 15 Minutes

UXPin
5 min readAug 28, 2024

--

We’ll show you how to use UXPin Merge to build a simple — yet fully functional and responsive — dashboard with MUI components. If you want to follow along, create a UXPin account or log into it if you already have one.

Here’s what we’re going to create. To see it up close, inspect its code, and see how interactive and responsive it is, open this UXPin preview.

Step 1: Create a new prototype

When in UXPin’s dashboard, start by creating a hover on “Design with coded components” and pick MUI library.

An editor will pop up. In the center of it, you have a canvas. It’s 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.

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’ll find it under Merge libraries.)

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.

Step 2: Access ThemeCustomizer

Open the MUI library and search for ThemeCustomizer — 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’re able to navigate to it easily.

Step 3: Place MUI components on the canvas

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.

You can easily adjust the size of the components by clicking on their corners and expanding or contracting them.

We’re also pulling out:

  • Cards — We will duplicate this component to highlight different insights.
  • Paper — It will be our textbox.
  • Typography — We drag it out of the library and put it into the Paper components. It helps us manipulate fonts.
  • Table — It will be our data table that we can sort through.

Now that we have the components ready. We can switch their theme with ThemeCustomizer which we placed above the canvas.

Step 4: Customize components

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.

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.

Step 5: Set up grids and layout

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’s how you can do it.

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 “responsive.”

After that, drag a box for our breadcrumbs and put grids for our data table, cards, and text boxes.

It’s 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.

Step 6: Preview and share your design

You are ready to see your dashboard and share it with others. Go to “Share,” copy a URL to preview the copy a URL to preview the prototype, and paste it in the browser or click the preview button ▶️.

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.

Step 7: Develop the dashboard

The design is done, so the last step is to copy the code into your React application.

We have provided a starter React App boilerplate, containing all the dependencies and configuration needed — or begin editing right-away in CodeSandbox or StackBlitz (click to go to the preferred one.)

Installing and running the React App Boilerplate:

  1. Download or clone the Starter React App boilerplate repo
  2. Install the project by running: npm install
  3. Run the project by running: npm start

Importing the theme:

  1. From UXPin’s spec mode, copy the JSX of the ThemeCustomizer component.
  2. Paste JSX into the theme.js file of the project

Here is a video example of using the starter React App repository.

Importing the components:

  1. From UXPin’s spec mode, copy the JSX of the desired component composition.
  2. Paste JSX into to the App.js file
  3. Make sure you have added import statements for each component that you are importing from MUI. Example: import Button from ‘@mui/material/Button’

For the more in-depth instructions, see the last part of CoderOne’s video tutorial.

Build responsive UI 10x faster with UXPin Merge

That’s it! You’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 looks exactly, as the dashboard in our Preview.

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 — without advanced design skills. Get started with UXPin Merge.

--

--

UXPin
UXPin

Written by UXPin

The design tool for teams and professionals. From UI design and prototyping to collaboration and handoff. Speed it up with UXPin. • www.uxpin.com

No responses yet