src/App.tsx
Ready
localhost:5173
Mantine 9ReadyTSXLn 1, Col 1
Online Mantine playground with React, TypeScript, themed components, style props, required core styles, and instant live preview.
Online Mantine playground with React, TypeScript, themed components, style props, required core styles, and instant live preview.
Runtime: v9.5.1
The starter follows Mantine's provider setup and imports the required core stylesheet once at the application root. The browser preview uses locally hosted Mantine JavaScript and CSS, while the download pins matching core and hooks packages in a Vite project.
Press Enter to evaluate, ↑ and ↓ to browse command history, and Ctrl/⌘ + L to clear the console.
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { createTheme, MantineProvider } from '@mantine/core'
import '@mantine/core/styles.css'
import App from './App'
import './styles.css'
const theme = createTheme({
primaryColor: 'blue',
defaultRadius: 'md',
fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif',
})
createRoot(document.getElementById('root')!).render(
<StrictMode>
<MantineProvider theme={theme} defaultColorScheme="light">
<App />
</MantineProvider>
</StrictMode>,
)
import { useState } from 'react'
import { Badge, Container, Stack, Text, Title } from '@mantine/core'
import { FocusCard } from './components/FocusCard'
export default function App() {
const [completed, setCompleted] = useState(1)
const advance = () => {
setCompleted((value) => (value === 3 ? 0 : value + 1))
}
return (
<main className="app-shell">
<Container size="sm" py={64}>
<Stack gap="xl">
<div>
<Badge variant="light" size="lg">Mantine 9 · React 19</Badge>
<Title order={1} mt="sm">Make space for deep work</Title>
<Text c="dimmed" size="lg" mt="xs">
A focused component example built with Mantine primitives and theme tokens.
</Text>
</div>
<FocusCard completed={completed} onAdvance={advance} />
</Stack>
</Container>
</main>
)
}