Learn MATERIAL-UI with Real Code Examples

import React, { useState } from 'react';
import { Button, Typography, Box, ThemeProvider, createTheme } from '@mui/material';

const Counter = () => {
    const [count, setCount] = useState(0);
    const [isDark, setIsDark] = useState(false);
    const toggleTheme = () => setIsDark(!isDark);

    return (
        <ThemeProvider theme={createTheme({ palette: { mode: isDark ? 'dark' : 'light' } })}>
        <Box sx={{ textAlign: 'center', mt: 5 }}>
        <Typography variant='h4'>Counter: {count}</Typography>
        <Box sx={{ mt: 2 }}>
        <Button variant='contained' color='primary' onClick={() => setCount(count + 1)}>+</Button>
        <Button variant='contained' color='error' onClick={() => setCount(count - 1)}>-</Button>
        <Button variant='contained' color='secondary' onClick={() => setCount(0)}>Reset</Button>
        </Box>
        <Button sx={{ mt: 2 }} variant='contained' color='warning' onClick={toggleTheme}>Switch Theme</Button>
        </Box>
        </ThemeProvider>
    );
};

export default Counter;

Demonstrates a simple counter layout using Material-UI components and React for interactivity.

import React from 'react';
import { AppBar, Toolbar, Typography, Button, Box } from '@mui/material';

const Navbar = () => (
    <AppBar position='static'>
        <Toolbar>
        <Typography variant='h6' sx={{ flexGrow: 1 }}>Logo</Typography>
        <Button color='inherit'>Home</Button>
        <Button color='inherit'>About</Button>
        <Button color='inherit'>Contact</Button>
        </Toolbar>
    </AppBar>
);

export default Navbar;

Shows a responsive AppBar with navigation buttons using Material-UI.

import React from 'react';
import { Card, CardContent, CardActions, Typography, Button } from '@mui/material';

const SimpleCard = () => (
    <Card sx={{ maxWidth: 345, m: 2 }}>
        <CardContent>
        <Typography variant='h5'>Card Title</Typography>
        <Typography variant='body2'>This is a simple Material-UI card example.</Typography>
        </CardContent>
        <CardActions>
        <Button size='small'>Learn More</Button>
        </CardActions>
    </Card>
);

export default SimpleCard;

Demonstrates a simple card component with content and actions using Material-UI.

import React, { useState } from 'react';
import { Button, Dialog, DialogTitle, DialogContent, DialogActions, Typography } from '@mui/material';

const ModalExample = () => {
    const [open, setOpen] = useState(false);
    return (
        <>
        <Button variant='contained' onClick={() => setOpen(true)}>Open Modal</Button>
        <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>Modal Title</DialogTitle>
        <DialogContent>
        <Typography>This is a simple Material-UI modal dialog.</Typography>
        </DialogContent>
        <DialogActions>
        <Button onClick={() => setOpen(false)}>Close</Button>
        </DialogActions>
        </Dialog>
        </>
    );
};

export default ModalExample;

Shows a modal dialog that opens and closes using Material-UI.

import React, { useState } from 'react';
import { Tabs, Tab, Box, Typography } from '@mui/material';

const TabsExample = () => {
    const [value, setValue] = useState(0);
    return (
        <Box sx={{ width: '100%' }}>
        <Tabs value={value} onChange={(e, val) => setValue(val)} centered>
        <Tab label='Tab 1' />
        <Tab label='Tab 2' />
        <Tab label='Tab 3' />
        </Tabs>
        <Box sx={{ mt: 2 }}>
        <Typography>{['Content 1','Content 2','Content 3'][value]}</Typography>
        </Box>
        </Box>
    );
};

export default TabsExample;

Demonstrates tab navigation using Material-UI Tabs component.