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 #141

Material-UI

Artemis Dashboard

import React from "react";
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.success[50],
            borderLeft: 4,
            borderColor: theme.palette.success[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.success[800],
        }
    }

    const content = {
        'GridItem1-1': <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM14.2 8.3L9.4 13.1C9 13.5 8.4 13.5 8 13.1L5.8 10.9C5.4 10.5 5.4 9.9 5.8 9.5C6.2 9.1 6.8 9.1 7.2 9.5L8.7 11L12.8 6.9C13.2 6.5 13.8 6.5 14.2 6.9C14.6 7.3 14.6 7.9 14.2 8.3Z" fill="#17BB84"/></svg>,
        'Typography1-1': 'Banner example',
        'Link1-1': <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.93329 6.00008L11.1333 1.80008C11.4 1.53341 11.4 1.13341 11.1333 0.866748C10.8666 0.600081 10.4666 0.600081 10.2 0.866748L5.99996 5.06675L1.79996 0.866748C1.53329 0.600081 1.13329 0.600081 0.866626 0.866748C0.599959 1.13341 0.599959 1.53341 0.866626 1.80008L5.06663 6.00008L0.866626 10.2001C0.733293 10.3334 0.666626 10.4667 0.666626 10.6667C0.666626 11.0667 0.933293 11.3334 1.33329 11.3334C1.53329 11.3334 1.66663 11.2667 1.79996 11.1334L5.99996 6.93341L10.2 11.1334C10.3333 11.2667 10.4666 11.3334 10.6666 11.3334C10.8666 11.3334 11 11.2667 11.1333 11.1334C11.4 10.8667 11.4 10.4667 11.1333 10.2001L6.93329 6.00008Z" fill="#094B35"/></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 #142

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.grey[50],
            borderLeft: 4,
            borderColor: theme.palette.grey[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.grey[800],
        }
    }

    const content = {
        'GridItem1-1': <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C7.6 2 4 5.6 4 10C4 15.4 11 21.5 11.3 21.8C11.7 22.1 12.2 22.1 12.6 21.8C13 21.5 20 15.4 20 10C20 5.6 16.4 2 12 2ZM12 14C9.8 14 8 12.2 8 10C8 7.8 9.8 6 12 6C14.2 6 16 7.8 16 10C16 12.2 14.2 14 12 14Z" fill="#67798E"/></svg>,
        '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="#293039"/></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 #143

Material-UI

Artemis Dashboard

import { Grid, Box, Typography, 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]
        },
        unit: {
            color: theme.palette.grey[800]
        }
    }

    const content = {
        'Image1-1': 'mui-artemis-assets/stat-tiles/comment-message-secondary.svg',

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 #144

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 = {
        'GridItem1-1': <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM12 17C11.4 17 11 16.6 11 16C11 15.4 11.4 15 12 15C12.6 15 13 15.4 13 16C13 16.6 12.6 17 12 17ZM13 12C13 12.6 12.6 13 12 13C11.4 13 11 12.6 11 12V8C11 7.4 11.4 7 12 7C12.6 7 13 7.4 13 8V12Z" fill="#E85444"/></svg>,
        '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 #145

Material-UI

Artemis Dashboard

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

const Navbar = (props) => {
    const [value, setValue] = useState(0);

    const handleChange = (event, newValue) => {
      setValue(newValue);
    };
    
    const styles = {
        section: {
            px: theme.spacing(3),
            py: theme.spacing(2.8),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white,
            [theme.breakpoints.up('md')]: {
                py: theme.spacing(0)
            },
            boxShadow: theme.shadows[1]
        },
        tab: {
            fontSize: theme.spacing(1.75),

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 #146

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.primary[50],
            borderLeft: 4,
            borderColor: theme.palette.primary[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`,
        },
        header: {
            color: theme.palette.primary[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.primary[700],
        }
    }

    const content = {
        'Typography1-1': 'Banner example',

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 #147

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.grey[50],
            borderLeft: 4,
            borderColor: theme.palette.grey[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`,
        },
        header: {
            color: theme.palette.grey[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.grey[700],
        }
    }

    const content = {
        'Typography1-1': 'Banner example',

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 #148

Material-UI

Artemis Dashboard

import React from "react";
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.success[50],
            borderLeft: 4,
            borderColor: theme.palette.success[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`,
        },
        header: {
            color: theme.palette.success[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.success[700],
        }
    }

    const 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 #149

Material-UI

Artemis Dashboard

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

const Navbar = (props) => {
    const styles = {
        section: {
            px: theme.spacing(3),
            py: theme.spacing(2.3),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white,
            boxShadow: theme.shadows[1]
        },
        hoverIcons: {
            color: theme.palette.grey[200],
            '&:hover': {
                color: theme.palette.grey[300]
            }
        },
        name: {
            color: theme.palette.grey[800],
        },
        job: {
            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 #150

Material-UI

Artemis Dashboard

import React from "react";
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.warning[50],
            borderLeft: 4,
            borderColor: theme.palette.warning[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`,
        },
        header: {
            color: theme.palette.warning[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.warning[700],
        }
    }

    const 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 #151

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`,
        },
        header: {
            color: theme.palette.error[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.error[700],
        }
    }
    
    const content = {
        'Typography1-1': 'Banner example',

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 #152

Material-UI

Artemis Dashboard

import React from "react";
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.success[50],
            borderLeft: 4,
            borderColor: theme.palette.success[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.success[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.success[700],
        }
    }

    const 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 #153

Material-UI

Artemis Dashboard

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

const Navbar = (props) => {
    const styles = {
        section: {
            px: theme.spacing(3),
            py: theme.spacing(2.3),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white,
            boxShadow: theme.shadows[1]
        },
        hoverIcons: {
            color: theme.palette.grey[200],
            '&:hover': {
                color: theme.palette.grey[300]
            }
        },
        name: {
            color: theme.palette.grey[800],
        },
        job: {
            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 #154

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.primary[50],
            borderLeft: 4,
            borderColor: theme.palette.primary[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.primary[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.primary[700],
        }
    }

    const content = {
        'GridItem1-1': <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM13 16C13 16.6 12.6 17 12 17C11.4 17 11 16.6 11 16V12C11 11.4 11.4 11 12 11C12.6 11 13 11.4 13 12V16ZM12 9C11.4 9 11 8.6 11 8C11 7.4 11.4 7 12 7C12.6 7 13 7.4 13 8C13 8.6 12.6 9 12 9Z" fill="#382CDD"/></svg>,

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 #155

Material-UI

Artemis Dashboard

import React from "react";
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.warning[50],
            borderLeft: 4,
            borderColor: theme.palette.warning[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.warning[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.warning[700],
        }
    }

    const 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 #156

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`
        },
        header: {
            color: theme.palette.error[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.error[700],
        }
    }

    const content = {
        'GridItem1-1': <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM12 17C11.4 17 11 16.6 11 16C11 15.4 11.4 15 12 15C12.6 15 13 15.4 13 16C13 16.6 12.6 17 12 17ZM13 12C13 12.6 12.6 13 12 13C11.4 13 11 12.6 11 12V8C11 7.4 11.4 7 12 7C12.6 7 13 7.4 13 8V12Z" fill="#E85444"/></svg>,

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 #157

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.grey[50],
            borderLeft: 4,
            borderColor: theme.palette.grey[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        header: {
            color: theme.palette.grey[800],
            mb: theme.spacing(1)
        },
        text: {
            color: theme.palette.grey[700],
        }
    }

    const content = {
        'GridItem1-1': <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C7.6 2 4 5.6 4 10C4 15.4 11 21.5 11.3 21.8C11.7 22.1 12.2 22.1 12.6 21.8C13 21.5 20 15.4 20 10C20 5.6 16.4 2 12 2ZM12 14C9.8 14 8 12.2 8 10C8 7.8 9.8 6 12 6C14.2 6 16 7.8 16 10C16 12.2 14.2 14 12 14Z" fill="#67798E"/></svg>,

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 #158

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.grey[50],
            borderLeft: 4, 
            borderTop: 2, 
            borderBottom: 2, 
            borderRight: 2,
            borderColor: theme.palette.grey[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.grey[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="#293039"/></svg>,

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 #159

Material-UI

Artemis Dashboard

import React from "react";
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.grey[50],
            borderLeft: 4, 
            borderTop: 2, 
            borderBottom: 2, 
            borderRight: 2,
            borderColor: theme.palette.warning[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.warning[800],
        }
    }

    const content = {
        'Typography1-1': 'Banner example',

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 #160

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.grey[50],
            borderLeft: 4, 
            borderTop: 2, 
            borderBottom: 2, 
            borderRight: 2,
            borderColor: theme.palette.primary[500],
            borderRadius: `0 ${theme.spacing(1)} ${theme.spacing(1)} 0`
        },
        text: {
            color: theme.palette.primary[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.93334 8.00008L13.1333 3.80008C13.4 3.53341 13.4 3.13341 13.1333 2.86675C12.8667 2.60008 12.4667 2.60008 12.2 2.86675L8 7.06675L3.8 2.86675C3.53334 2.60008 3.13334 2.60008 2.86667 2.86675C2.60001 3.13341 2.60001 3.53341 2.86667 3.80008L7.06667 8.00008L2.86667 12.2001C2.73334 12.3334 2.66667 12.4667 2.66667 12.6667C2.66667 13.0667 2.93334 13.3334 3.33334 13.3334C3.53334 13.3334 3.66667 13.2667 3.8 13.1334L8 8.93341L12.2 13.1334C12.3333 13.2667 12.4667 13.3334 12.6667 13.3334C12.8667 13.3334 13 13.2667 13.1333 13.1334C13.4 12.8667 13.4 12.4667 13.1333 12.2001L8.93334 8.00008Z" fill="#161258"/></svg>,

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

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 #141

Get the code for 13,400+ components

Material_Ui Component #142

Get the code for 13,400+ components

Material_Ui Component #143

Get the code for 13,400+ components

Material_Ui Component #144

Get the code for 13,400+ components

Material_Ui Component #145

Get the code for 13,400+ components

Material_Ui Component #146

Get the code for 13,400+ components

Material_Ui Component #147

Get the code for 13,400+ components

Material_Ui Component #148

Get the code for 13,400+ components

Material_Ui Component #149

Get the code for 13,400+ components

Material_Ui Component #150

Get the code for 13,400+ components

Material_Ui Component #151

Get the code for 13,400+ components

Material_Ui Component #152

Get the code for 13,400+ components

Material_Ui Component #153

Get the code for 13,400+ components

Material_Ui Component #154

Get the code for 13,400+ components

Material_Ui Component #155

Get the code for 13,400+ components

Material_Ui Component #156

Get the code for 13,400+ components

Material_Ui Component #157

Get the code for 13,400+ components

Material_Ui Component #158

Get the code for 13,400+ components

Material_Ui Component #159

Get the code for 13,400+ components

Material_Ui Component #160

Get the code for 13,400+ components

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