src/App.tsx
Ready
localhost:5173
Chakra UI 3ReadyTSXLn 1, Col 1
Online Chakra UI playground with React, TypeScript, accessible components, style props, compound components, and instant live preview.
Online Chakra UI playground with React, TypeScript, accessible components, style props, compound components, and instant live preview.
Runtime: v3.36.1
The starter follows Chakra UI v3's system-based provider API and compound component patterns. The browser preview uses a locally hosted Chakra UI and Emotion bundle, while the download pins the matching npm dependencies in a runnable 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 { ChakraProvider, defaultSystem } from '@chakra-ui/react'
import App from './App'
import './styles.css'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<ChakraProvider value={defaultSystem}>
<App />
</ChakraProvider>
</StrictMode>,
)
import { Box, Container, HStack, Text, VStack } from '@chakra-ui/react'
import { useState } from 'react'
import { ReleaseCard } from './components/ReleaseCard'
export default function App() {
const [completed, setCompleted] = useState(2)
const [reminders, setReminders] = useState(true)
return (
<Box
as="main"
minH="100vh"
bg="gray.50"
backgroundImage="radial-gradient(circle at 15% 0%, rgba(49, 151, 149, 0.16), transparent 26rem)"
py={{ base: '10', md: '16' }}
>
<Container maxW="xl">
<VStack align="stretch" gap="6">
<HStack justify="space-between" align="start" gap="4">
<Box>
<Text color="teal.600" fontWeight="bold" letterSpacing="wide" fontSize="sm">
CHAKRA UI · REACT 19
</Text>
<Text as="h1" fontSize={{ base: '3xl', md: '4xl' }} fontWeight="bold" letterSpacing="tight">
Release checklist
</Text>
</Box>
<Box bg="teal.500" color="white" borderRadius="xl" px="3" py="2" fontWeight="bold">
3.36
</Box>
</HStack>
<ReleaseCard
completed={completed}
reminders={reminders}
onComplete={() => setCompleted((value) => Math.min(value + 1, 4))}
onRemindersChange={setReminders}
/>
</VStack>
</Container>
</Box>
)
}