Material-Ui Components in Artemis library

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Material_Ui Component #1

Material-UI

Artemis Dashboard

import { Box, Grid, Typography, Avatar, Button }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            padding: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.grey[50]
        },
        avatar: {
            mt: theme.spacing(1),
            padding: theme.spacing(1.5),
            backgroundColor: theme.palette.primary[500]
        },
        button: {
            color: theme.palette.primary[500],
            backgroundColor: theme.palette.common.white, 
            ':hover': { 
                color: theme.palette.common.white, 
                backgroundColor: theme.palette.primary[500]
            }
        },
        title: {

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #2

Material-UI

Artemis Dashboard

import { useState } from 'react';
import { Grid, Box, Typography, Tabs, Tab }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            pt: theme.spacing(3.75),
            pl: theme.spacing(3.75),
            pr: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white
        },
        tab: {
            fontSize: theme.spacing(1.75),
            color: theme.palette.grey[300]
        }
    }
    const [value, setValue] = useState(0);

    const handleChange = (event, newValue) => {
      setValue(newValue);
    };

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #3

Material-UI

Artemis Dashboard

import { Box, Typography }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            p: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.grey[50]
        }
    }

    const content = {
        'Typography1-1': 'Hello, John Doe!',
        ...props.content
    }

    return (
        <Box component="section" sx={styles.section}>
            <Typography variant="h4">{content['Typography1-1']}</Typography>
        </Box>
    )
}

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #4

Material-UI

Artemis Dashboard

import { Box, Typography }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            p: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white
        }
    }

    const content = {
        'Typography1-1': 'Hello, John Doe!',
        ...props.content
    }

    return (
        <Box component="section" sx={styles.section}>
            <Typography variant="h4">{content['Typography1-1']}</Typography>
        </Box>
    )
}

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #5

Material-UI

Artemis Dashboard

import { Box, Grid, Typography, Avatar, Button }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            padding: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white
        },
        avatar: {
            mt: theme.spacing(1),
            padding: theme.spacing(1.5),
            backgroundColor: theme.palette.primary[500]
        },
        button: {
            color: theme.palette.primary[500],
            backgroundColor: theme.palette.primary[50],
            ':hover': { 
                color: theme.palette.common.white, 
                backgroundColor: theme.palette.primary[500]
            }
        },
        title: {

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #6

Material-UI

Artemis Dashboard

import { Box, Grid, Typography, Button, Chip, TextField }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            p: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.grey[50]
        },
        chip: {
            fontSize: theme.spacing(1.5)
        },
        search: {
            position: 'absolute',
            right: 16
        },
        wrapperTextField: {
            position: 'relative',
            [theme.breakpoints.up('lg')]: {
                width: theme.spacing(41.25)
            }
        },
        textField: {

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #7

Material-UI

Artemis Dashboard

import { Box, Grid, Typography, Button, Chip, TextField }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            p: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white
        },
        chip: {
            fontSize: theme.spacing(1.5)
        },
        search: {
            position: 'absolute',
            right: 16
        },
        wrapperTextField: {
            position: 'relative',
            [theme.breakpoints.up('lg')]: {
                width: theme.spacing(41.25)
            }
        },
        textField: {

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #8

Material-UI

Artemis Dashboard

import { Box, Grid, Typography, Avatar, Button, TextField }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            padding: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.grey[50]
        },
        avatar: {
            mt: theme.spacing(1),
            padding: theme.spacing(1.5),
            backgroundColor: theme.palette.primary[500]
        },
        title: {
            color: theme.palette.common.dark
        },
        subtitle: {
            color: theme.palette.grey[500]
        },
        search: {
            position: 'absolute',
            right: 16

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #9

Material-UI

Artemis Dashboard

import { Box, Grid, Typography, Avatar, Button, TextField }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            padding: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white
        },
        avatar: {
            mt: theme.spacing(1),
            padding: theme.spacing(1.5),
            backgroundColor: theme.palette.primary[500]
        },
        title: {
            color: theme.palette.common.dark
        },
        subtitle: {
            color: theme.palette.grey[500]
        },
        search: {
            position: 'absolute',
            right: 16

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #10

Material-UI

Artemis Dashboard

import { useState } from 'react';
import { Box, Grid, Typography, Button, Link, Breadcrumbs, FormControl, Select, MenuItem } from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const [date1, setDate1] = useState("20/04/2021");
    const [date2, setDate2] = useState("24/04/2021");

    const handleChange1 = (event) => {
      setDate1(event.target.value);
    };

    const handleChange2 = (event) => {
        setDate2(event.target.value);
    };

    const styles = {
        section: {
            p: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.grey[50]
        },
        text: {
            color: theme.palette.grey[500],

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #11

Material-UI

Artemis Dashboard

import { useState } from 'react';
import { Box, Grid, Typography, Button, Link, Breadcrumbs, FormControl, Select, MenuItem } from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const [date1, setDate1] = useState("20/04/2021");
    const [date2, setDate2] = useState("24/04/2021");

    const handleChange1 = (event) => {
      setDate1(event.target.value);
    };

    const handleChange2 = (event) => {
        setDate2(event.target.value);
    };

    const styles = {
        section: {
            p: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white
        },
        text: {
            color: theme.palette.grey[500],

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #12

Material-UI

Artemis Dashboard

import { useState } from 'react';
import { Grid, Box, Typography, Tabs, Tab }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            pt: theme.spacing(3.75),
            pl: theme.spacing(3.75),
            pr: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.grey[50]
        },
        tab: {
            fontSize: theme.spacing(1.75),
            color: theme.palette.grey[300]
        }
    }
    const [value, setValue] = useState(0);

    const handleChange = (event, newValue) => {
      setValue(newValue);
    };

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #13

Material-UI

Artemis Dashboard

import { Grid, Box, Typography, Container, TextField, Button, Link }  from '@mui/material';
import theme from '../../theme/theme';

const FileTable = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        search: {
            position: 'absolute',
            right: 16
        },
        wrapperTextField: {
            position: 'relative',
            [theme.breakpoints.up('lg')]: {
                width: theme.spacing(41.25)
            }
        },
        textField: {
            backgroundColor: theme.palette.common.white,
            fontWeight: theme.typography.fontWeightRegular,
        },
        img: {
            display: 'block'

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #14

Material-UI

Artemis Dashboard

import React from "react";
import { Grid, Box, Typography, Container, Link }  from '@mui/material';
import theme from '../../theme/theme';

const Banner = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        wrapper: {
            backgroundColor: theme.palette.primary[500],
            borderRadius: theme.spacing(0.5),
            overflow: 'hidden'
        },
        header: {
            padding: theme.spacing(4)
        },
        title: {
            color: theme.palette.common.white
        },
        subtitle: {
            color: theme.palette.primary[100],
            fontWeight: theme.typography.fontWeightMedium,
            mb: theme.spacing(8)

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #15

Material-UI

Artemis Dashboard

import { useState } from 'react';
import { Grid, Box, Typography, Container, Chip, Button, Link, Checkbox, FormControl, Select, MenuItem, Pagination, Stack }  from '@mui/material';
import theme from '../../theme/theme';

const UserTable = (props) => {
    const [age, setAge] = useState('');

    const handleChange = (event) => {
      setAge(event.target.value);
    };
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        scroll: {
            overflow: 'auto'
        },
        body: {
            width: theme.spacing(144),
            [theme.breakpoints.up('lg')]: {
                width: 'auto'
            }
        },
        thLeftRadius: {

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #16

Material-UI

Artemis Dashboard

import { Grid, Box, Typography, Chip, Container }  from '@mui/material';
import theme from '../../theme/theme.js';

const StatTiles = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2),
        },
        box: {
            p: theme.spacing(3),
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1]
        },
        subtitle: {
            color: theme.palette.grey[600],
            pl: theme.spacing(1)
        },
        unit: {
            color: theme.palette.grey[800],
            mt: theme.spacing(1),
            mb: theme.spacing(1)
        },
        chip: {

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #17

Material-UI

Artemis Dashboard

import { useState } from 'react';
import { Grid, Box, Typography, Container, Chip, Button, Stepper, Step, StepLabel, StepContent, Paper }  from '@mui/material';
import theme from '../../theme/theme';

const TaskTables = (props) => {
    const [activeStep, setActiveStep] = useState(0);

    const handleNext = () => {
      setActiveStep((prevActiveStep) => prevActiveStep + 1);
    };
  
    const handleBack = () => {
      setActiveStep((prevActiveStep) => prevActiveStep - 1);
    };
  
    const handleReset = () => {
      setActiveStep(0);
    };

    const styles = {
        section: {
            py: theme.spacing(2),
        },
        box: {

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #18

Material-UI

Artemis Dashboard

import { useState } from 'react';
import { Grid, Box, Typography, Link, Button, Divider, List, ListItemButton, ListItemIcon, ListItemText, Collapse, Chip, Avatar } from '@mui/material';
import theme from '../../theme/theme';

const Menu = (props) => {
    const [mobile, setMobile] = useState({ display: 'none' })
    const [open1, setOpen1] = useState(false);
    const [open3, setOpen3] = useState(false);
    const [open4, setOpen4] = useState(false);
    const [open5, setOpen5] = useState(false);
    const [open6, setOpen6] = useState(false);
    
    const handleClick1 = () => {
        setOpen1(!open1);
    };
    const handleClick3 = () => {
        setOpen3(!open3);
    };
    const handleClick4 = () => {
        setOpen4(!open4);
    };
    const handleClick5 = () => {
        setOpen5(!open5);
    };

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #19

Material-UI

Artemis Dashboard

import { Grid, Box, Typography, Link }  from '@mui/material';
import theme from '../../theme/theme.js';

const Alert = (props) => {
    const styles = {
        section: {
            margin: theme.spacing(2),
            padding: theme.spacing(3),
            backgroundColor: theme.palette.error[50],
            borderLeft: 4,
            borderColor: theme.palette.error[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.error[800]
        }
    }

    const content = {
        'Typography1-1': 'Banner example',
        'Link1-1': <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.93341 8.00008L13.1334 3.80008C13.4001 3.53341 13.4001 3.13341 13.1334 2.86675C12.8667 2.60008 12.4667 2.60008 12.2001 2.86675L8.00008 7.06675L3.80008 2.86675C3.53341 2.60008 3.13341 2.60008 2.86675 2.86675C2.60008 3.13341 2.60008 3.53341 2.86675 3.80008L7.06675 8.00008L2.86675 12.2001C2.73341 12.3334 2.66675 12.4667 2.66675 12.6667C2.66675 13.0667 2.93341 13.3334 3.33341 13.3334C3.53341 13.3334 3.66675 13.2667 3.80008 13.1334L8.00008 8.93341L12.2001 13.1334C12.3334 13.2667 12.4667 13.3334 12.6667 13.3334C12.8667 13.3334 13.0001 13.2667 13.1334 13.1334C13.4001 12.8667 13.4001 12.4667 13.1334 12.2001L8.93341 8.00008Z" fill="#5D221B"/></svg>,
        ...props.content
    }

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material_Ui Component #20

Material-UI

Artemis Dashboard

import { Grid, Box, Typography, Container, Link }  from '@mui/material';
import theme from '../../theme/theme';

const GeneralTables = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2),
        },
        box: {
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            width: theme.spacing(144),
            [theme.breakpoints.up('lg')]: {
                width: 'auto'
            }
        },
        scroll: {
            overflow: 'auto',
            boxShadow: theme.shadows[1]
        },
        subtitle: {
            color: theme.palette.grey[500],
        },
        subtitle2: {

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Material-Ui Components by Shuffle

Browse 188 of ready-made components in Material-Ui and Artemis library. They are divided into UI libraries that our professional designers designed. Each of them has a resource of many variations of different types of components. Under each of them, there is a clear code created by our team of developers.

All elements available in the editor are fully responsive. You will get full access to them by subscribing to our drag and drop editor.

Try the demo for free!

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Material UI (MUI) Components – Artemis Library

Framework

UI Library

Components

Material_Ui Component #1

Get the code for 13,400+ components

Material_Ui Component #2

Get the code for 13,400+ components

Material_Ui Component #3

Get the code for 13,400+ components

Material_Ui Component #4

Get the code for 13,400+ components

Material_Ui Component #5

Get the code for 13,400+ components

Material_Ui Component #6

Get the code for 13,400+ components

Material_Ui Component #7

Get the code for 13,400+ components

Material_Ui Component #8

Get the code for 13,400+ components

Material_Ui Component #9

Get the code for 13,400+ components

Material_Ui Component #10

Get the code for 13,400+ components

Material_Ui Component #11

Get the code for 13,400+ components

Material_Ui Component #12

Get the code for 13,400+ components

Material_Ui Component #13

Get the code for 13,400+ components

Material_Ui Component #14

Get the code for 13,400+ components

Material_Ui Component #15

Get the code for 13,400+ components

Material_Ui Component #16

Get the code for 13,400+ components

Material_Ui Component #17

Get the code for 13,400+ components

Material_Ui Component #18

Get the code for 13,400+ components

Material_Ui Component #19

Get the code for 13,400+ components

Material_Ui Component #20

Get the code for 13,400+ components

Material-Ui Components by Shuffle

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support