React MUI Playground

Save

Publish

App.jsx

index.jsx

import React from 'react'
import Card from '@mui/material/Card'
import CardActions from '@mui/material/CardActions'
import CardContent from '@mui/material/CardContent'
import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'
export default function BasicCard() {
  const clickHandler = () => console.log('hello world')
  return (
    <Card sx={{ minWidth: 275 }}>
      <CardContent>
        <Typography sx={{ mb: 1.5 }} color='text.secondary'>
          Hello MUI
        </Typography>
        <Typography variant='body2'>
          Try edit me, to see magic happen
        </Typography>
      </CardContent>
      <CardActions>
        <Button size='small' onClick={clickHandler}>

Console

Web View

Claude Haiku 4.5

Claude Sonnet 4.5

Claude Opus 4.5

Gemini 3 Pro (Preview)

GPT-5.1 Codex

GPT-5.1 Codex Mini

GPT-5.1

Grok 4.1 Fast Reasoning

Grok 4.1 Fast Non-Reasoning

Grok Code Fast 1

OpenAI o3

Gemini Flash (Latest)