craft_kit_mui_react_quickstart_with_theme_provider_setup.ts

1import React from 'react';
2import { createRoot } from 'react-dom/client';
3import { ThemeProvider, createTheme } from '@mui/material/styles';
4import { CraftKitProvider, Button, TextField } from 'craft-kit-mui';
5
6const theme = createTheme({
7  palette: {
8    primary: {
9      main: '#1976d2',
10    },
11  },
12});
13
14const App: React.FC = () => {
15  return (
16    <ThemeProvider theme={theme}>
17      <CraftKitProvider>
18        <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
19          <h1>Craft-Kit-MUI Quickstart</h1>
20          
21          <TextField 
22            label="Enter Name" 
23            variant="outlined" 
24            fullWidth 
25          />
26          
27          <Button 
28            variant="contained" 
29            color="primary" 
30            onClick={() => alert('Hello from Craft-Kit-MUI!')}
31          >
32            Submit
33          </Button>
34        </div>
35      </CraftKitProvider>
36    </ThemeProvider>
37  );
38};
39
40const container = document.getElementById('root');
41if (container) {
42  const root = createRoot(container);
43  root.render(<App />);
44}