Quick Start

Build your first Material UI component in under 5 minutes. This tutorial walks you through creating a simple user profile card.

Prerequisites

Before you begin, make sure you have:

A React project set up (Create React App, Vite, or Next.js)
Material UI installed (see Installation)
Basic knowledge of React and JSX

Step 1: Create Your First Component

Import Material UI Components

Create a new file ProfileCard.tsx and import the components you’ll need:

ProfileCard.tsx

import * as React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';

These imports give you access to Material UI’s Card, Button, Typography, and layout components.

Build the Component Structure

Create a profile card component with an avatar, name, description, and actions:

ProfileCard.tsx

export default function ProfileCard() {
  return (
    <Card sx={{ maxWidth: 345, margin: 2 }}>
      <CardContent>
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            mb: 2,
          }}
        >
          <Avatar
            sx={{ width: 80, height: 80, mb: 2, bgcolor: 'primary.main' }}
          >
            MU
          </Avatar>
          <Typography variant="h5" component="div">
            Material UI User
          </Typography>
          <Typography sx={{ color: 'text.secondary', mt: 1 }}>
            React Developer
          </Typography>
        </Box>
        <Typography variant="body2">
          Building beautiful, accessible user interfaces with Material UI
          and React. Passionate about creating great user experiences.
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small" variant="contained">
          Follow
        </Button>
        <Button size="small" variant="outlined">
          Message
        </Button>
      </CardActions>
    </Card>
  );
}

The sx prop provides powerful inline styling with theme access.

Use the Component

Import and use your new component in your app:

App.tsx

import ProfileCard from './ProfileCard';

function App() {
  return (
    <div>
      <ProfileCard />
    </div>
  );
}

export default App;

Step 2: Add Interactivity

Let’s make the buttons functional by adding state and event handlers:

ProfileCard.tsx

import * as React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Snackbar from '@mui/material/Snackbar';
import Alert from '@mui/material/Alert';

export default function ProfileCard() {
  const [following, setFollowing] = React.useState(false);
  const [showMessage, setShowMessage] = React.useState(false);

  const handleFollow = () => {
    setFollowing(!following);
  };

  const handleMessage = () => {
    setShowMessage(true);
  };

  const handleCloseMessage = () => {
    setShowMessage(false);
  };

  return (
    <>
      <Card sx={{ maxWidth: 345, margin: 2 }}>
        <CardContent>
          <Box
            sx={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              mb: 2,
            }}
          >
            <Avatar
              sx={{ width: 80, height: 80, mb: 2, bgcolor: 'primary.main' }}
            >
              MU
            </Avatar>
            <Typography variant="h5" component="div">
              Material UI User
            </Typography>
            <Typography sx={{ color: 'text.secondary', mt: 1 }}>
              React Developer
            </Typography>
          </Box>
          <Typography variant="body2">
            Building beautiful, accessible user interfaces with Material UI
            and React. Passionate about creating great user experiences.
          </Typography>
        </CardContent>
        <CardActions>
          <Button 
            size="small" 
            variant="contained"
            onClick={handleFollow}
          >
            {following ? 'Unfollow' : 'Follow'}
          </Button>
          <Button 
            size="small" 
            variant="outlined"
            onClick={handleMessage}
          >
            Message
          </Button>
        </CardActions>
      </Card>
      
      <Snackbar
        open={showMessage}
        autoHideDuration={3000}
        onClose={handleCloseMessage}
      >
        <Alert severity="success" onClose={handleCloseMessage}>
          Message sent successfully!
        </Alert>
      </Snackbar>
    </>
  );
}

Step 3: Customize with Theme

Material UI components use the theme for consistent styling. Customize colors, spacing, and more:

main.tsx

import * as React from 'react';
import ReactDOM from 'react-dom/client';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import App from './App';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
  typography: {
    fontFamily: 'Roboto, Arial, sans-serif',
  },
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

The CssBaseline component normalizes styles across browsers and applies Material Design baseline styles.

Understanding Key Props

Button Props

Buttons support multiple variants, colors, and sizes from the source code:

import Button from '@mui/material/Button';

// Variants: text, outlined, contained
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="text">Text</Button>

// Colors: primary, secondary, success, error, info, warning
<Button color="primary">Primary</Button>
<Button color="error">Error</Button>

// Sizes: small, medium, large  
<Button size="small">Small</Button>
<Button size="large">Large</Button>

// With icons
import SendIcon from '@mui/icons-material/Send';
<Button variant="contained" endIcon={<SendIcon />}>
  Send
</Button>

// Loading state
<Button loading>Loading</Button>

// Full width
<Button fullWidth>Full Width</Button>

TextField Props

Text fields are versatile input components with extensive customization:

import TextField from '@mui/material/TextField';

// Variants: outlined, filled, standard
<TextField label="Name" variant="outlined" />
<TextField label="Email" variant="filled" />
<TextField label="Message" variant="standard" />

// Types
<TextField type="email" label="Email" />
<TextField type="password" label="Password" />
<TextField type="number" label="Age" />

// Multiline
<TextField
  label="Description"
  multiline
  rows={4}
  placeholder="Enter description..."
/>

// With helper text and validation
<TextField
  label="Email"
  error
  helperText="Please enter a valid email"
/>

// Sizes
<TextField size="small" label="Small" />
<TextField size="medium" label="Medium" />

Card Props

Cards are surfaces for displaying content and actions:

import Card from '@mui/material/Card';

// Raised elevation
<Card raised>
  <CardContent>Elevated card</CardContent>
</Card>

// Custom styling with sx prop
<Card
  sx={{
    maxWidth: 345,
    borderRadius: 2,
    boxShadow: 3,
  }}
>
  <CardContent>Custom styled card</CardContent>
</Card>

Common Patterns

Responsive Layout with Grid

import Grid from '@mui/material/Grid2';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';

function ResponsiveCards() {
  return (
    <Grid container spacing={2}>
      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
        <Card>
          <CardContent>
            <Typography variant="h5">Card 1</Typography>
          </CardContent>
        </Card>
      </Grid>
      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
        <Card>
          <CardContent>
            <Typography variant="h5">Card 2</Typography>
          </CardContent>
        </Card>
      </Grid>
      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
        <Card>
          <CardContent>
            <Typography variant="h5">Card 3</Typography>
          </CardContent>
        </Card>
      </Grid>
    </Grid>
  );
}

Form with Validation

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

function ContactForm() {
  const [email, setEmail] = React.useState('');
  const [error, setError] = React.useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    setError(!isValid);
    
    if (isValid) {
      console.log('Form submitted:', email);
    }
  };

  return (
    <Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
      <TextField
        fullWidth
        label="Email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        error={error}
        helperText={error ? 'Please enter a valid email' : ''}
        sx={{ mb: 2 }}
      />
      <Button type="submit" variant="contained" fullWidth>
        Submit
      </Button>
    </Box>
  );
}

Next Steps

Usage Patterns

Learn essential patterns and best practices for Material UI

Component API

Explore the complete API documentation for all components

Templates

Browse production-ready templates to kickstart your project

Theming

Deep dive into customizing Material UI’s theme system

Getting Started

Customization

Guides

Quick Start

Quick Start

Prerequisites

Step 1: Create Your First Component

Step 2: Add Interactivity

Step 3: Customize with Theme

Understanding Key Props

Button Props

TextField Props

Card Props

Common Patterns

Responsive Layout with Grid

Form with Validation

Next Steps

Usage Patterns

Component API

Templates

Theming

Build docs developers (and LLMs) love

Getting Started

Customization

Guides

​Quick Start

​Prerequisites

​Step 1: Create Your First Component

​Step 2: Add Interactivity

​Step 3: Customize with Theme

​Understanding Key Props

​Button Props

​TextField Props

​Card Props

​Common Patterns

​Responsive Layout with Grid

​Form with Validation

​Next Steps

Usage Patterns

Component API

Templates

Theming

Build docs developers (and LLMs) love

Quick Start

Prerequisites

Step 1: Create Your First Component

Step 2: Add Interactivity

Step 3: Customize with Theme

Understanding Key Props

Button Props

TextField Props

Card Props

Common Patterns

Responsive Layout with Grid

Form with Validation

Next Steps