단일 HTML 파일의 차크라 UI

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chakra UI in one HTML file</title>
<!-- Map package names to pinned jsDelivr ESM bundles -->
<script type="importmap">
{
  "imports": {
    "react": "https://cdn.jsdelivr.net/npm/react@19.2.8/+esm",
    "react-dom/client": "https://cdn.jsdelivr.net/npm/react-dom@19.2.8/client/+esm",
    "@chakra-ui/react": "https://cdn.jsdelivr.net/npm/@chakra-ui/react@3.37.0/+esm",
    "https://cdn.jsdelivr.net/npm/react@19.0.0/+esm": "https://cdn.jsdelivr.net/npm/react@19.2.8/+esm"
  }
}
</script>
</head>
<body>
<div id="root"><p style="font-family: system-ui, sans-serif; padding: 24px; margin: 0;">Loading Chakra UI...</p></div>

<script type="module">
  import { createElement as h, useState } from 'react';
  import { createRoot } from 'react-dom/client';
  import { ChakraProvider, defaultSystem, Box, Heading, Text, Button } from '@chakra-ui/react';

  function App() {
    const [count, setCount] = useState(0);
    // h(Component, props, ...children) is what JSX compiles to
    return h(Box, { p: 6, maxW: 'sm' },
      h(Heading, { size: 'xl', mb: 2 }, 'Hello from Chakra UI'),
      h(Text, { color: 'fg.muted', mb: 4 }, 'One HTML file, no build step.'),
      h(Button, { colorPalette: 'teal', onClick: () => setCount(count + 1) }, 'Clicked ' + count + ' times')
    );
  }

  // Every Chakra component must sit inside ChakraProvider
  createRoot(document.getElementById('root')).render(
    h(ChakraProvider, { value: defaultSystem }, h(App))
  );
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chakra UI variants, palettes and dark mode</title>
<script type="importmap">
{
  "imports": {
    "react": "https://cdn.jsdelivr.net/npm/react@19.2.8/+esm",
    "react-dom/client": "https://cdn.jsdelivr.net/npm/react-dom@19.2.8/client/+esm",
    "@chakra-ui/react": "https://cdn.jsdelivr.net/npm/@chakra-ui/react@3.37.0/+esm",
    "https://cdn.jsdelivr.net/npm/react@19.0.0/+esm": "https://cdn.jsdelivr.net/npm/react@19.2.8/+esm"
  }
}
</script>
</head>
<body>
<div id="root"><p style="font-family: system-ui, sans-serif; padding: 24px; margin: 0;">Loading Chakra UI...</p></div>

<script type="module">
  import { createElement as h, useState } from 'react';
  import { createRoot } from 'react-dom/client';
  import { ChakraProvider, defaultSystem, Box, Stack, HStack, Button, Text } from '@chakra-ui/react';

  const palettes = ['teal', 'blue', 'purple', 'red'];
  const variants = ['solid', 'subtle', 'outline', 'ghost'];

  function App() {
    const [palette, setPalette] = useState('teal');
    const [dark, setDark] = useState(false);

    function toggleDark() {
      // Chakra's dark styles apply under a .dark class on a parent
      document.documentElement.classList.toggle('dark', !dark);
      setDark(!dark);
    }

    return h(Box, { p: 5, bg: 'bg', color: 'fg', minH: '100vh' },
      h(Stack, { gap: 4 },
        h(Text, { fontWeight: 'semibold' }, 'colorPalette'),
        h(HStack, { wrap: 'wrap' }, palettes.map((p) =>
          h(Button, { key: p, size: 'sm', variant: p === palette ? 'solid' : 'outline',
            onClick: () => setPalette(p) }, p))),
        h(Text, { fontWeight: 'semibold' }, 'variant'),
        // colorPalette on a parent is inherited by the buttons inside
        h(HStack, { wrap: 'wrap', colorPalette: palette }, variants.map((v) =>
          h(Button, { key: v, variant: v }, v))),
        h(Button, { alignSelf: 'start', variant: 'surface', onClick: toggleDark },
          dark ? 'Light mode' : 'Dark mode')
      )
    );
  }

  createRoot(document.getElementById('root')).render(
    h(ChakraProvider, { value: defaultSystem }, h(App))
  );
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chakra UI sign-up card</title>
<script type="importmap">
{
  "imports": {
    "react": "https://cdn.jsdelivr.net/npm/react@19.2.8/+esm",
    "react-dom/client": "https://cdn.jsdelivr.net/npm/react-dom@19.2.8/client/+esm",
    "@chakra-ui/react": "https://cdn.jsdelivr.net/npm/@chakra-ui/react@3.37.0/+esm",
    "https://cdn.jsdelivr.net/npm/react@19.0.0/+esm": "https://cdn.jsdelivr.net/npm/react@19.2.8/+esm"
  }
}
</script>
</head>
<body>
<div id="root"><p style="font-family: system-ui, sans-serif; padding: 24px; margin: 0;">Loading Chakra UI...</p></div>

<script type="module">
  import { createElement as h, useState } from 'react';
  import { createRoot } from 'react-dom/client';
  import { ChakraProvider, defaultSystem, Box, Card, Field, Input, Button, Stack, Text } from '@chakra-ui/react';

  function App() {
    const [errors, setErrors] = useState({});
    const [sent, setSent] = useState(null);

    function onSubmit(e) {
      e.preventDefault();  // handle it in the page, send nothing
      const data = Object.fromEntries(new FormData(e.target));
      const next = {};
      if (!data.name.trim()) next.name = 'Enter your name.';
      if (!/^\S+@\S+\.\S+$/.test(data.email)) next.email = 'Enter a valid email.';
      setErrors(next);
      setSent(Object.keys(next).length ? null : data);
    }

    // Field.Root gets invalid; Field.ErrorText only shows when it is set
    const field = (name, label, type) =>
      h(Field.Root, { invalid: !!errors[name] },
        h(Field.Label, null, label),
        h(Input, { name, type, placeholder: label }),
        h(Field.ErrorText, null, errors[name]));

    return h(Box, { p: 4, bg: 'bg.muted', minH: '100vh' },
      h(Card.Root, { maxW: 'sm', mx: 'auto' },
        h(Card.Header, null,
          h(Card.Title, null, 'Join the beta'),
          h(Card.Description, null, 'Two fields, checked in the page.')),
        h(Card.Body, null,
          h('form', { id: 'signup', onSubmit, noValidate: true },
            h(Stack, { gap: 4 }, field('name', 'Name', 'text'), field('email', 'Email', 'email')))),
        h(Card.Footer, { flexDirection: 'column', alignItems: 'stretch', gap: 3 },
          h(Button, { type: 'submit', form: 'signup', colorPalette: 'teal' }, 'Sign up'),
          sent && h(Text, { id: 'result', color: 'green.fg', fontSize: 'sm' },
            'Thanks, ' + sent.name + '. We would write to ' + sent.email + '.'))
      )
    );
  }

  createRoot(document.getElementById('root')).render(
    h(ChakraProvider, { value: defaultSystem }, h(App))
  );
</script>
</body>
</html>