CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 4.25.8"/><meta property="description" content="This doc describes the `jotai/babel` bundle." data-gatsby-head="true"/><meta property="og:locale" content="en" data-gatsby-head="true"/><meta property="og:site_name" content="Jotai" data-gatsby-head="true"/><meta property="og:title" content="Babel — Jotai, primitive and flexible state management for React" data-gatsby-head="true"/><meta property="og:description" content="This doc describes the `jotai/babel` bundle." data-gatsby-head="true"/><meta property="og:type" content="website" data-gatsby-head="true"/><meta property="og:image" content="https://cdn.candycode.com/jotai/jotai-opengraph-v2.png" data-gatsby-head="true"/><meta property="og:image:url" content="https://cdn.candycode.com/jotai/jotai-opengraph-v2.png" data-gatsby-head="true"/><meta property="og:image:secure_url" content="https://cdn.candycode.com/jotai/jotai-opengraph-v2.png" data-gatsby-head="true"/><meta property="og:image:width" content="1200" data-gatsby-head="true"/><meta property="og:image:height" content="630" data-gatsby-head="true"/><meta property="og:url" content="https://jotai.org/docs/tools/babel" data-gatsby-head="true"/><meta property="twitter:card" content="summary_large_image" data-gatsby-head="true"/><style data-href="/styles.8716260080cd77cca2e2.css" data-identity="gatsby-global-css">@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=block);@import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=block); /* ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com */*,:after,:before{border:0 solid #e5e5e5;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif;font-variation-settings:normal;line-height:1.5;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:Fira Code,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#a3a3a3}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],input:where(:not([type])),select,textarea{--tw-shadow:0 0 #0000;-webkit-appearance:none;appearance:none;background-color:#fff;border-color:#737373;border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}[multiple]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,[type=week]:focus,input:where(:not([type])):focus,select:focus,textarea:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:#2563eb;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000;outline-offset:2px}input::placeholder,textarea::placeholder{color:#737373;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-bottom:0;padding-top:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{--tw-shadow:0 0 #0000;-webkit-appearance:none;appearance:none;background-color:#fff;background-origin:border-box;border-color:#737373;border-width:1px;color:#2563eb;display:inline-block;flex-shrink:0;height:1rem;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;vertical-align:middle;width:1rem}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000;outline-offset:2px}[type=checkbox]:checked,[type=radio]:checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")}@media (forced-colors:active){[type=checkbox]:checked{-webkit-appearance:auto;appearance:auto}}[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}@media (forced-colors:active){[type=radio]:checked{-webkit-appearance:auto;appearance:auto}}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=checkbox]:indeterminate,[type=radio]:checked:focus,[type=radio]:checked:hover{background-color:currentColor;border-color:#0000}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:100% 100%}@media (forced-colors:active){[type=checkbox]:indeterminate{-webkit-appearance:auto;appearance:auto}}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{background-color:currentColor;border-color:#0000}[type=file]{background:unset;border-color:inherit;border-radius:0;border-width:0;font-size:unset;line-height:inherit;padding:0}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }code[class*=language-],pre[class*=language-]{word-wrap:normal;--tw-text-opacity:1;--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);border-radius:.375rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:rgb(228 240 251/var(--tw-text-opacity));font-size:.9em;-webkit-hyphens:none;hyphens:none;line-height:1.5;overflow-wrap:normal;tab-size:2;text-align:left;word-break:normal;word-spacing:normal}code[class*=language-]:is(.dark *),pre[class*=language-]:is(.dark *){--tw-shadow:0 0 #0000!important;--tw-shadow-colored:0 0 #0000!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}@media (min-width:640px){code[class*=language-],pre[class*=language-]{border-radius:.5rem}}pre[class*=language-]{margin-bottom:1rem;margin-top:1rem;overflow-x:auto;padding:1.5rem;white-space:pre}@media (min-width:640px){pre[class*=language-]{padding:2rem}}:not(pre)>code[class*=language-],pre[class*=language-]{--tw-bg-opacity:1;background-color:rgb(37 43 55/var(--tw-bg-opacity))}.dark :not(pre)>code[class*=language-],.dark pre[class*=language-]{--tw-bg-opacity:1;background-color:rgb(19 22 28/var(--tw-bg-opacity))}:not(pre)>code[class*=language-]{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);border-radius:.375rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);padding:.75rem;white-space:normal}:not(pre)>code[class*=language-]:is(.dark *){--tw-shadow:0 0 #0000!important;--tw-shadow-colored:0 0 #0000!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.token.cdata,.token.comment,.token.doctype,.token.prolog{--tw-text-opacity:1;color:rgb(166 172 205/var(--tw-text-opacity))}.token.punctuation{--tw-text-opacity:1;color:rgb(228 240 251/var(--tw-text-opacity))}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{--tw-text-opacity:1;color:rgb(228 240 251/var(--tw-text-opacity))}.token.attr-value,.token.boolean,.token.builtin,.token.char,.token.inserted,.token.number,.token.selector,.token.string{--tw-text-opacity:1;color:rgb(93 228 199/var(--tw-text-opacity))}.language-css .token.string,.style .token.string,.token.attr-name,.token.entity,.token.operator,.token.url,.token.variable{--tw-text-opacity:1;color:rgb(173 215 255/var(--tw-text-opacity))}.token.atrule,.token.class-name,.token.function{--tw-text-opacity:1;color:rgb(93 228 199/var(--tw-text-opacity))}.token.keyword{--tw-text-opacity:1;color:rgb(173 215 255/var(--tw-text-opacity))}.token.important,.token.regex{--tw-text-opacity:1;color:rgb(255 250 194/var(--tw-text-opacity))}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}html{overflow:visible!important;padding-right:0!important}body{-webkit-tap-highlight-color:transparent;background-color:rgb(0 0 0/var(--tw-bg-opacity));font-family:Inter,sans-serif;line-height:1;overflow-x:clip;overflow-y:scroll;overscroll-behavior:none;text-rendering:optimizeLegibility}#___gatsby,body{--tw-bg-opacity:1}#___gatsby{--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));color:rgb(0 0 0/var(--tw-text-opacity))}#___gatsby:is(.dark *){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(12 12 12/var(--tw-bg-opacity));color:rgb(250 250 250/var(--tw-text-opacity))}#___gatsby>div{animation:fadeIn .5s cubic-bezier(.4,0,.2,1);animation-delay:.7s;animation-fill-mode:forwards!important;animation-iteration-count:1;opacity:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}code,code span,pre,pre span{font-family:Fira Code,monospace!important}::selection{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}:is(.dark *)::selection{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity));color:rgb(12 12 12/var(--tw-text-opacity))}a,button{transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}:focus{outline:0!important}a,button,input,select,textarea{position:relative;z-index:0}a:focus,button:focus,input:focus,select:focus,textarea:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity));z-index:10}a:focus:is(.dark *),button:focus:is(.dark *),input:focus:is(.dark *),select:focus:is(.dark *),textarea:focus:is(.dark *){--tw-ring-opacity:1!important;--tw-ring-color:rgb(15 118 110/var(--tw-ring-opacity))!important}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}svg:not([fill]){fill:currentColor}::-webkit-scrollbar{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));height:100%;width:1rem}:is(.dark *)::-webkit-scrollbar{--tw-bg-opacity:1;background-color:rgb(12 12 12/var(--tw-bg-opacity))}body.dark::-webkit-scrollbar{--tw-bg-opacity:1;background-color:rgb(12 12 12/var(--tw-bg-opacity))}::-webkit-scrollbar-track{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}:is(.dark *)::-webkit-scrollbar-track{--tw-bg-opacity:1;background-color:rgb(12 12 12/var(--tw-bg-opacity))}body.dark::-webkit-scrollbar-track{--tw-bg-opacity:1;background-color:rgb(12 12 12/var(--tw-bg-opacity))}::-webkit-scrollbar-thumb{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(188 188 188/var(--tw-bg-opacity));border-color:rgb(255 255 255/var(--tw-border-opacity));border-radius:1rem;border-style:solid;border-width:4px}:is(.dark *)::-webkit-scrollbar-thumb{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity));border-color:rgb(12 12 12/var(--tw-border-opacity))}body.dark::-webkit-scrollbar-thumb{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity));border-color:rgb(12 12 12/var(--tw-border-opacity))}::-webkit-scrollbar-button{display:none}.prose h1,.prose h2,.prose h3,.prose h4,.prose h5{scroll-margin-top:3rem}.prose h1{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity));font-size:2.25rem;font-weight:800;letter-spacing:-.025em;line-height:1.25}.prose h1:is(.dark *){--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity))}@media (min-width:1024px){.prose h1{font-size:4.5rem;letter-spacing:-.05em}}.prose h2{--tw-text-opacity:1;color:rgb(188 188 188/var(--tw-text-opacity));font-size:1.5rem;font-weight:700;line-height:1.25}.prose h2:is(.dark *){--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}@media (min-width:1024px){.prose h2{font-size:1.875rem}}.prose .tabs h2{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.prose .tabs h2:is(.dark *){--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}.prose h2 a code{--tw-text-opacity:1!important;color:rgb(0 0 0/var(--tw-text-opacity))!important;padding:.25rem .5rem}.prose h2 a code:is(.dark *){--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity))!important}.prose h2 a code{font-size:.7em}.prose *+h2{margin-top:3rem}@media (min-width:1024px){.prose *+h2{margin-top:4rem}}.prose h3{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity));font-size:1.125rem;font-weight:600;line-height:1.25;margin-top:1.5rem}.prose h3:is(.dark *){--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity))}@media (min-width:1024px){.prose h3{font-size:1.25rem;margin-top:2rem}}.prose h3 a code{--tw-text-opacity:1!important;color:rgb(0 0 0/var(--tw-text-opacity))!important;padding:.25rem .5rem}.prose h3 a code:is(.dark *){--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity))!important}.prose h3 a code{font-size:.7em}.prose h4{--tw-text-opacity:1;color:rgb(82 82 82/var(--tw-text-opacity));font-size:1rem;font-weight:600;line-height:1.25;margin-top:2rem}.prose h4:is(.dark *){--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}@media (min-width:1024px){.prose h4{font-size:1.125rem}}.prose h4 a code{--tw-text-opacity:1!important;color:rgb(0 0 0/var(--tw-text-opacity))!important;padding:.25rem .5rem}.prose h4 a code:is(.dark *){--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity))!important}.prose h4 a code{font-size:.7em}.prose h1+h2{margin-top:3rem!important}.prose h2+h3,.prose h3+h4{margin-top:.5rem}.prose h1 a,.prose h2 a,.prose h3 a,.prose h4 a,.prose h5 a{all:inherit;cursor:pointer;display:inline}.prose ol,.prose ul{margin-bottom:.5rem;margin-top:.5rem}.prose ol>:not([hidden])~:not([hidden]),.prose ul>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.prose ol,.prose ul{--tw-text-opacity:1;color:rgb(82 82 82/var(--tw-text-opacity));font-size:.875rem;font-weight:400;line-height:1.5;padding-left:1.25rem}.prose ol:is(.dark *),.prose ul:is(.dark *){--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}@media (min-width:640px){.prose ol,.prose ul{font-size:1rem}}@media (min-width:1024px){.prose ol,.prose ul{font-size:1.125rem}}.prose ol{list-style-type:decimal}.prose ul{list-style-type:disc}.prose ul ::marker{color:#a3a3a3}.prose ul::marker{color:#a3a3a3}.prose ul :is(.dark *)::marker{color:#525252}.prose ul:is(.dark *)::marker{color:#525252}.prose li{padding-left:.25rem}.prose p{--tw-text-opacity:1;color:rgb(82 82 82/var(--tw-text-opacity));font-size:.875rem;line-height:1.5;margin-top:.25rem}.prose p:is(.dark *){--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}@media (min-width:640px){.prose p{font-size:1rem}}@media (min-width:1024px){.prose p{font-size:1.125rem}}.prose p+p{margin-top:.5rem}.prose h1+p{margin-top:2rem}.prose a{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity));text-decoration-line:underline}.prose a:is(.dark *){--tw-text-opacity:1;color:rgb(45 212 191/var(--tw-text-opacity))}.dark .prose h1 a,.dark .prose h2 a,.dark .prose h3 a,.dark .prose h4 a,.dark .prose h5 a{color:inherit}.prose a code{--tw-text-opacity:1!important;color:rgb(37 99 235/var(--tw-text-opacity))!important}.prose a code:is(.dark *){--tw-text-opacity:1!important;color:rgb(45 212 191/var(--tw-text-opacity))!important}.prose blockquote{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity));border-color:rgb(229 229 229/var(--tw-border-opacity));border-radius:.375rem;border-width:1px;margin-bottom:1rem;margin-top:1rem;padding:.5rem 1rem}.prose blockquote:is(.dark *){--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity));border-color:rgb(38 38 38/var(--tw-border-opacity))}@media (min-width:640px){.prose blockquote{border-radius:.5rem}}.prose blockquote a{--tw-text-opacity:1;color:rgb(23 23 23/var(--tw-text-opacity))}.prose blockquote a:is(.dark *){--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity))}.prose blockquote p{--tw-text-opacity:1;color:rgb(23 23 23/var(--tw-text-opacity))}.prose blockquote p:is(.dark *){--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity))}.prose blockquote a code{--tw-text-opacity:1!important;color:rgb(30 58 138/var(--tw-text-opacity))!important}.prose hr{--tw-bg-opacity:1;background-color:rgb(212 212 212/var(--tw-bg-opacity));border-style:none;height:1px;margin-bottom:2rem;margin-top:2rem;width:100%}.prose hr:is(.dark *){--tw-bg-opacity:1;background-color:rgb(64 64 64/var(--tw-bg-opacity))}.form-input,.form-multiselect,.form-select,.form-textarea{--tw-shadow:0 0 #0000;-webkit-appearance:none;appearance:none;background-color:#fff;border-color:#737373;border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}.form-input:focus,.form-multiselect:focus,.form-select:focus,.form-textarea:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:#2563eb;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000;outline-offset:2px}.form-input::placeholder,.form-textarea::placeholder{color:#737373;opacity:1}.form-input::-webkit-datetime-edit-fields-wrapper{padding:0}.form-input::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}.form-input::-webkit-datetime-edit{display:inline-flex}.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-year-field{padding-bottom:0;padding-top:0}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-bottom-3{bottom:-.75rem}.-left-0{left:0}.-left-0\.5{left:-.125rem}.-left-3{left:-.75rem}.-right-2{right:-.5rem}.-top-px{top:-1px}.bottom-0{bottom:0}.bottom-8{bottom:2rem}.left-0{left:0}.left-8{left:2rem}.right-0{right:0}.right-4{right:1rem}.right-8{right:2rem}.top-0{top:0}.top-px{top:1px}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[1000\]{z-index:1000}.z-\[1001\]{z-index:1001}.m-4{margin:1rem}.-mx-3{margin-left:-.75rem;margin-right:-.75rem}.mx-auto{margin-left:auto;margin-right:auto}.my-8{margin-bottom:2rem;margin-top:2rem}.\!mb-8{margin-bottom:2rem!important}.-mt-1{margin-top:-.25rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-1{margin-top:.25rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.contents{display:contents}.\!hidden{display:none!important}.hidden{display:none}.aspect-\[16\/9\]{aspect-ratio:16/9}.aspect-\[21\/9\]{aspect-ratio:21/9}.aspect-\[24\/9\]{aspect-ratio:24/9}.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.h-10{height:2.5rem}.h-28{height:7rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\[400px\]{height:400px}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[400px\]{max-height:400px}.max-h-full{max-height:100%}.max-h-screen{max-height:100vh}.min-h-full{min-height:100%}.w-1\/3{width:33.333333%}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-2\/3{width:66.666667%}.w-28{width:7rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-\[4rem\]{width:4rem}.w-full{width:100%}.min-w-full{min-width:100%}.max-w-3xl{max-width:48rem}.max-w-\[12rem\]{max-width:12rem}.max-w-\[1920px\]{max-width:1920px}.max-w-\[215px\]{max-width:215px}.max-w-full{max-width:100%}.max-w-xs{max-width:20rem}.flex-shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x:0px}.translate-x-1\/2{--tw-translate-x:50%}.translate-x-1\/2,.translate-x-5{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-5{--tw-translate-x:1.25rem}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.75rem*var(--tw-space-x-reverse))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1.5rem*var(--tw-space-x-reverse))}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(2rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(2rem*var(--tw-space-x-reverse))}.space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0px*var(--tw-space-y-reverse));margin-top:calc(0px*(1 - var(--tw-space-y-reverse)))}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.125rem*var(--tw-space-y-reverse));margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(3rem*var(--tw-space-y-reverse));margin-top:calc(3rem*(1 - var(--tw-space-y-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2rem*var(--tw-space-y-reverse));margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-y-scroll{overflow-y:scroll}.\!overscroll-none{overscroll-behavior:none!important}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.text-pretty{text-wrap:pretty}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-b-lg{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.\!border-none{border-style:none!important}.\!border-blue-200{--tw-border-opacity:1!important;border-color:rgb(191 219 254/var(--tw-border-opacity))!important}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 229 229/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(212 212 212/var(--tw-border-opacity))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(64 64 64/var(--tw-border-opacity))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(38 38 38/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-black\/50{background-color:#00000080}.bg-black\/75{background-color:#000000bf}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 229 229/var(--tw-bg-opacity))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(212 212 212/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(64 64 64/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.fill-current{fill:currentColor}.object-contain{object-fit:contain}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-bottom:0;padding-top:0}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-8{padding-bottom:2rem;padding-top:2rem}.pb-0{padding-bottom:0}.pb-16{padding-bottom:4rem}.pb-\[3px\]{padding-bottom:3px}.pl-8{padding-left:2rem}.pr-8{padding-right:2rem}.pt-4{padding-top:1rem}.pt-\[4px\]{padding-top:4px}.text-center{text-align:center}.font-mono{font-family:Fira Code,monospace}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-sm{font-size:.875rem}.text-xl{font-size:1.25rem}.text-xs{font-size:.75rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.ordinal{--tw-ordinal:ordinal}.ordinal,.slashed-zero{font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.slashed-zero{--tw-slashed-zero:slashed-zero}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.\!text-black{--tw-text-opacity:1!important;color:rgb(0 0 0/var(--tw-text-opacity))!important}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-gray-100{--tw-text-opacity:1;color:rgb(245 245 245/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity))}.text-gray-350{--tw-text-opacity:1;color:rgb(188 188 188/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(38 38 38/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(23 23 23/var(--tw-text-opacity))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.\!no-underline{text-decoration-line:none!important}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:left-0:after{content:var(--tw-content);left:0}.after\:top-1\/2:after{content:var(--tw-content);top:50%}.after\:-ml-6:after{content:var(--tw-content);margin-left:-1.5rem}.after\:-mt-4:after{content:var(--tw-content);margin-top:-1rem}.after\:h-0:after{content:var(--tw-content);height:0}.after\:w-0:after{content:var(--tw-content);width:0}.after\:border-b-\[16px\]:after{border-bottom-width:16px;content:var(--tw-content)}.after\:border-l-0:after{border-left-width:0;content:var(--tw-content)}.after\:border-r-\[24px\]:after{border-right-width:24px;content:var(--tw-content)}.after\:border-t-\[16px\]:after{border-top-width:16px;content:var(--tw-content)}.after\:border-solid:after{border-style:solid;content:var(--tw-content)}.after\:border-transparent:after{border-color:#0000;content:var(--tw-content)}.after\:border-r-\[\#f5f5f5\]:after{--tw-border-opacity:1;border-right-color:rgb(245 245 245/var(--tw-border-opacity));content:var(--tw-content)}.focus-within\:ring:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-within\:ring-blue-400:focus-within{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity))}@media (hover:hover) and (pointer:fine){.hover\:\!border-blue-200:hover{--tw-border-opacity:1!important;border-color:rgb(191 219 254/var(--tw-border-opacity))!important}.hover\:border-blue-200:hover{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity))}.hover\:\!bg-black:hover{--tw-bg-opacity:1!important;background-color:rgb(0 0 0/var(--tw-bg-opacity))!important}.hover\:bg-blue-100:hover{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}}.focus\:border-gray-300:focus{--tw-border-opacity:1;border-color:rgb(212 212 212/var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus,.focus\:ring:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:\!ring-transparent:focus{--tw-ring-color:#0000!important}.focus\:ring-blue-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity))}.focus\:ring-offset-4:focus{--tw-ring-offset-width:4px}@media (hover:hover) and (pointer:fine){.group:hover .group-hover\:underline{text-decoration-line:underline}.group:hover .group-hover\:opacity-100{opacity:1}}.dark\:\!border-none:is(.dark *){border-style:none!important}.dark\:\!border-transparent:is(.dark *){border-color:#0000!important}.dark\:\!border-white:is(.dark *){--tw-border-opacity:1!important;border-color:rgb(255 255 255/var(--tw-border-opacity))!important}.dark\:border-gray-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(38 38 38/var(--tw-border-opacity))}.dark\:\!bg-black:is(.dark *){--tw-bg-opacity:1!important;background-color:rgb(0 0 0/var(--tw-bg-opacity))!important}.dark\:\!bg-gray-950:is(.dark *){--tw-bg-opacity:1!important;background-color:rgb(12 12 12/var(--tw-bg-opacity))!important}.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.dark\:bg-gray-200:is(.dark *){--tw-bg-opacity:1;background-color:rgb(229 229 229/var(--tw-bg-opacity))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(64 64 64/var(--tw-bg-opacity))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity))}.dark\:bg-gray-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity))}.dark\:bg-gray-950:is(.dark *){--tw-bg-opacity:1;background-color:rgb(12 12 12/var(--tw-bg-opacity))}.dark\:bg-white:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.dark\:\!text-black:is(.dark *){--tw-text-opacity:1!important;color:rgb(0 0 0/var(--tw-text-opacity))!important}.dark\:\!text-gray-300:is(.dark *){--tw-text-opacity:1!important;color:rgb(212 212 212/var(--tw-text-opacity))!important}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity))}.dark\:text-gray-50:is(.dark *){--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.dark\:\!shadow-none:is(.dark *){--tw-shadow:0 0 #0000!important;--tw-shadow-colored:0 0 #0000!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.dark\:invert:is(.dark *){--tw-invert:invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.after\:dark\:\!border-r-\[\#171717\]:is(.dark *):after{--tw-border-opacity:1!important;border-right-color:rgb(23 23 23/var(--tw-border-opacity))!important;content:var(--tw-content)}.dark\:focus-within\:ring-teal-700:focus-within:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(15 118 110/var(--tw-ring-opacity))}@media (hover:hover) and (pointer:fine){.dark\:hover\:\!border-teal-800:hover:is(.dark *){--tw-border-opacity:1!important;border-color:rgb(17 94 89/var(--tw-border-opacity))!important}.dark\:hover\:\!bg-teal-950:hover:is(.dark *){--tw-bg-opacity:1!important;background-color:rgb(10 39 37/var(--tw-bg-opacity))!important}.dark\:hover\:bg-teal-950:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(10 39 37/var(--tw-bg-opacity))}.dark\:hover\:bg-white:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.dark\:hover\:\!text-black:hover:is(.dark *){--tw-text-opacity:1!important;color:rgb(0 0 0/var(--tw-text-opacity))!important}.dark\:hover\:text-black:hover:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.dark\:hover\:text-white:hover:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.group:hover .dark\:group-hover\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}}@media (min-width:640px){.sm\:bottom-16{bottom:4rem}.sm\:left-auto{left:auto}.sm\:right-16{right:4rem}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(2rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(2rem*var(--tw-space-x-reverse))}.sm\:rounded-lg{border-radius:.5rem}.sm\:rounded-md{border-radius:.375rem}.sm\:p-12{padding:3rem}.sm\:p-4{padding:1rem}.sm\:p-6{padding:1.5rem}.sm\:p-8{padding:2rem}.sm\:px-16{padding-left:4rem;padding-right:4rem}.sm\:pb-0{padding-bottom:0}.sm\:text-base{font-size:1rem}.sm\:text-sm{font-size:.875rem}}@media (min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:text-base{font-size:1rem}.md\:text-lg{font-size:1.125rem}.md\:text-sm{font-size:.875rem}}@media (min-width:1024px){.lg\:fixed{position:fixed}.lg\:-bottom-6{bottom:-1.5rem}.lg\:-right-4{right:-1rem}.lg\:bottom-auto{bottom:auto}.lg\:top-16{top:4rem}.lg\:mx-auto{margin-left:auto;margin-right:auto}.lg\:my-0{margin-bottom:0}.lg\:mt-0,.lg\:my-0{margin-top:0}.lg\:mt-24{margin-top:6rem}.lg\:mt-8{margin-top:2rem}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:h-\[4\.5rem\]{height:4.5rem}.lg\:min-h-screen{min-height:100vh}.lg\:w-1\/4{width:25%}.lg\:w-3\/4{width:75%}.lg\:w-\[4\.5rem\]{width:4.5rem}.lg\:w-auto{width:auto}.lg\:w-full{width:100%}.lg\:max-w-5xl{max-width:64rem}.lg\:max-w-\[16rem\]{max-width:16rem}.lg\:max-w-\[1920px\]{max-width:1920px}.lg\:max-w-\[288px\]{max-width:288px}.lg\:flex-shrink{flex-shrink:1}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:flex-col{flex-direction:column}.lg\:justify-center{justify-content:center}.lg\:gap-8{gap:2rem}.lg\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.lg\:space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(2rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(2rem*var(--tw-space-x-reverse))}.lg\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0px*var(--tw-space-y-reverse));margin-top:calc(0px*(1 - var(--tw-space-y-reverse)))}.lg\:space-y-24>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(6rem*var(--tw-space-y-reverse));margin-top:calc(6rem*(1 - var(--tw-space-y-reverse)))}.lg\:\!overflow-y-auto{overflow-y:auto!important}.lg\:whitespace-normal{white-space:normal}.lg\:p-16{padding:4rem}.lg\:p-8{padding:2rem}.lg\:px-0{padding-left:0;padding-right:0}.lg\:px-2{padding-left:.5rem;padding-right:.5rem}.lg\:pb-4{padding-bottom:1rem}.lg\:pt-8{padding-top:2rem}.lg\:text-3xl{font-size:1.875rem}.lg\:text-4xl{font-size:2.25rem}.lg\:text-7xl{font-size:4.5rem}.lg\:text-\[2rem\]{font-size:2rem}.lg\:text-base{font-size:1rem}.lg\:text-lg{font-size:1.125rem}.lg\:leading-normal{line-height:1.5}.lg\:tracking-tighter{letter-spacing:-.05em}.lg\:text-gray-300{--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity))}}@media (min-width:1280px){.xl\:\!flex{display:flex!important}.xl\:hidden{display:none}.xl\:max-w-\[384px\]{max-width:384px}.xl\:p-16{padding:4rem}}@media (min-width:1536px){.\32xl\:-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.\32xl\:mb-16{margin-bottom:4rem}.\32xl\:mt-6{margin-top:1.5rem}.\32xl\:block{display:block}.\32xl\:inline-flex{display:inline-flex}.\32xl\:max-w-\[18rem\]{max-width:18rem}.\32xl\:max-w-\[448px\]{max-width:448px}.\32xl\:space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1.5rem*var(--tw-space-x-reverse))}.\32xl\:p-32{padding:8rem}.\32xl\:text-base{font-size:1rem}.\32xl\:text-xl{font-size:1.25rem}}</style><title data-gatsby-head="true">Babel — Jotai, primitive and flexible state management for React</title><link rel="icon" type="image/svg+xml" href="/favicon.svg" data-gatsby-head="true"/><link rel="canonical" href="https://jotai.org/docs/tools/babel" data-gatsby-head="true"/><link rel="dns-prefetch" href="appid-dsn.algolia.net" data-gatsby-head="true"/><link rel="preconnect" href="https://98qz5x9lgr-dsn.algolia.net" crossorigin="true" data-gatsby-head="true"/><link rel="preconnect" href="https://cdn.candycode.com" crossorigin="true" data-gatsby-head="true"/><link rel="preconnect" href="https://storage.googleapis.com" crossorigin="true" data-gatsby-head="true"/><link rel="sitemap" type="application/xml" href="/sitemap/sitemap-index.xml"/><link rel="preconnect" href="https://www.googletagmanager.com"/><link rel="dns-prefetch" href="https://www.googletagmanager.com"/></head><body><script>(function() { var storageKey = 'darkMode'; var classNameDark = 'dark'; var classNameLight = 'light'; function setClassOnDocumentBody(darkMode) { document.body.classList.add(darkMode ? classNameDark : classNameLight); document.body.classList.remove(darkMode ? classNameLight : classNameDark); } var localStorageTheme = null; try { localStorageTheme = localStorage.getItem(storageKey); } catch (err) {} var localStorageExists = localStorageTheme !== null; if (localStorageExists) { localStorageTheme = JSON.parse(localStorageTheme); } if (localStorageExists) { setClassOnDocumentBody(localStorageTheme); } else { var isDarkMode = document.body.classList.contains(classNameDark); localStorage.setItem(storageKey, JSON.stringify(isDarkMode)); } })();</script><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="relative flex flex-col lg:mx-auto lg:max-w-[1920px] lg:w-full lg:flex-row lg:justify-center lg:min-h-screen"><aside class="scrollbar sticky top-0 hidden h-full max-h-screen min-h-full w-full flex-shrink-0 flex-col justify-between overflow-y-scroll overscroll-none p-8 lg:flex lg:max-w-[288px] xl:max-w-[384px] xl:p-16 2xl:max-w-[448px]"><div class="flex-grow"><div><h1><a aria-current="page" class="inline-block rounded-lg focus:ring-offset-4" href="/"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 289.19 99.77" class="text-black dark:text-white w-full max-w-[12rem] lg:max-w-[16rem] 2xl:max-w-[18rem]"><title>Jotai</title><path d="M42.36,5.32H61.82V70.23a29.46,29.46,0,0,1-4,15.61A27.19,27.19,0,0,1,46.64,96.07a36.26,36.26,0,0,1-16.59,3.61,37.56,37.56,0,0,1-15.25-3A24.3,24.3,0,0,1,4,87.59Q0,81.5,0,72.23H19.59c.06,3.69,1.13,6.57,3.21,8.61a11.21,11.21,0,0,0,8.25,3.07q11.22,0,11.31-13.68Z" fill="currentColor"></path><path d="M105,99.77q-10.59,0-18.29-4.52A30.54,30.54,0,0,1,74.82,82.61a40.52,40.52,0,0,1-4.18-18.84,40.75,40.75,0,0,1,4.18-18.93A30.6,30.6,0,0,1,86.71,32.2,35.52,35.52,0,0,1,105,27.68a35.58,35.58,0,0,1,18.3,4.52,30.57,30.57,0,0,1,11.88,12.64,40.76,40.76,0,0,1,4.19,18.93,40.52,40.52,0,0,1-4.19,18.84A30.51,30.51,0,0,1,123.3,95.25Q115.59,99.78,105,99.77ZM127.14,5.32v10.5H82.87V5.32Zm-22,79.45a12,12,0,0,0,10.89-6q3.7-6,3.7-15.13T116,48.48a12,12,0,0,0-10.89-6,12.15,12.15,0,0,0-11,6q-3.73,6-3.73,15.16t3.73,15.13A12.16,12.16,0,0,0,105.09,84.77Z" fill="currentColor"></path><path d="M186.3,28.59V43.14H173.16V77q0,4,1.82,5.4a7.5,7.5,0,0,0,4.73,1.41,14.72,14.72,0,0,0,2.72-.25l2.09-.38,3,14.41c-1,.3-2.33.66-4.09,1.06a34.13,34.13,0,0,1-6.41.75q-10.55.47-16.93-4.56T153.8,79.5V43.14h-9.55V28.59h9.55V11.86h19.36V28.59Z" fill="currentColor"></path><path d="M216,99.73q-10,0-16.59-5.23t-6.59-15.59q0-7.81,3.68-12.27a21.19,21.19,0,0,1,9.66-6.53A54.78,54.78,0,0,1,219,57.41a98.57,98.57,0,0,0,13-1.91q3.92-1,3.91-4.36v-.28a8.42,8.42,0,0,0-2.7-6.68q-2.72-2.35-7.66-2.36a13.77,13.77,0,0,0-8.32,2.27,10.7,10.7,0,0,0-4.09,5.77l-17.91-1.45a23.88,23.88,0,0,1,9.93-15.14q7.94-5.58,20.48-5.59a42.24,42.24,0,0,1,14.54,2.46,24.19,24.19,0,0,1,10.94,7.66q4.16,5.21,4.16,13.52V98.41H236.92V88.73h-.54a20.18,20.18,0,0,1-7.62,7.93Q223.69,99.73,216,99.73Zm5.54-13.37A15,15,0,0,0,232,82.66a11.94,11.94,0,0,0,4.09-9.2V66.05a11.38,11.38,0,0,1-3.52,1.36c-1.6.39-3.29.73-5.1,1s-3.41.54-4.84.75a19.19,19.19,0,0,0-8.2,2.87,7.06,7.06,0,0,0-3.11,6.22,6.94,6.94,0,0,0,2.88,6A12.43,12.43,0,0,0,221.51,86.36Z" fill="currentColor"></path><path d="M278.69,19.59a10.41,10.41,0,0,1-7.37-2.89,9.14,9.14,0,0,1-3.09-6.93,9.1,9.1,0,0,1,3.09-6.91,11,11,0,0,1,14.78,0,9.1,9.1,0,0,1,3.09,6.91,9.14,9.14,0,0,1-3.09,6.93A10.45,10.45,0,0,1,278.69,19.59ZM269,98.41V28.59h19.36V98.41Z" fill="currentColor"></path></svg></a><span class="sr-only">Jotai</span></h1><div class="mt-2 space-x-6 text-gray-400 lg:space-x-4 2xl:mt-6 2xl:space-x-6 flex items-center"><div class="text-lg 2xl:text-xl whitespace-nowrap">状態</div><div class="text-sm leading-snug 2xl:text-base">Primitive and flexible state management for React</div></div></div><div class="mt-8 flex flex-col space-y-4"><button type="button" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-4 rounded-md px-6 py-3 text-base shadow-md sm:rounded-lg border-gray-800 bg-gray-900 text-gray-300 cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="flex-shrink-0 fill-current object-contain transition ease-in-out duration-300 h-6 w-6 text-gray-300"><path d="M 19 3 C 13.488281 3 9 7.488281 9 13 C 9 15.394531 9.839844 17.589844 11.25 19.3125 L 3.28125 27.28125 L 4.71875 28.71875 L 12.6875 20.75 C 14.410156 22.160156 16.605469 23 19 23 C 24.511719 23 29 18.511719 29 13 C 29 7.488281 24.511719 3 19 3 Z M 19 5 C 23.429688 5 27 8.570313 27 13 C 27 17.429688 23.429688 21 19 21 C 14.570313 21 11 17.429688 11 13 C 11 8.570313 14.570313 5 19 5 Z"></path></svg><span>Search...</span></button><a class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-4 rounded-md px-6 py-3 text-base shadow-md sm:rounded-lg border-gray-200 bg-gray-100 text-black hover:bg-blue-100 dark:border-gray-800 dark:bg-gray-900 hover:border-blue-200 dark:hover:bg-white dark:text-gray-300 dark:hover:text-black cursor-pointer" href="/docs"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="flex-shrink-0 fill-current object-contain transition ease-in-out duration-300 h-6 w-6 text-gray-700 dark:text-gray-300 dark:group-hover:text-black"><path d="M 9 4 C 7.355469 4 6 5.355469 6 7 L 6 25 C 6 26.644531 7.355469 28 9 28 L 26 28 L 26 4 Z M 9 6 L 24 6 L 24 22 L 9 22 C 8.648438 22 8.316406 22.074219 8 22.1875 L 8 7 C 8 6.433594 8.433594 6 9 6 Z M 11 9 L 11 11 L 22 11 L 22 9 Z M 9 24 L 24 24 L 24 26 L 9 26 C 8.433594 26 8 25.566406 8 25 C 8 24.433594 8.433594 24 9 24 Z"></path></svg><span>Documentation</span></a><a href="https://tutorial.jotai.org" target="_blank" rel="noreferrer" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-4 rounded-md px-6 py-3 text-base shadow-md sm:rounded-lg border-gray-200 bg-gray-100 text-black hover:bg-blue-100 dark:border-gray-800 dark:bg-gray-900 hover:border-blue-200 dark:hover:bg-white dark:text-gray-300 dark:hover:text-black cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="flex-shrink-0 fill-current object-contain transition ease-in-out duration-300 h-6 w-6 text-gray-700 dark:text-gray-300 dark:group-hover:text-black"><path d="M 4 6 L 4 8 L 26 8 L 26 24 L 12 24 L 12 26 L 30 26 L 30 24 L 28 24 L 28 6 L 4 6 z M 8.0019531 9 C 5.8032706 9 4 10.802666 4 13 C 4 15.198683 5.8040743 17 8.0019531 17 C 10.197134 17 12 15.198683 12 13 C 12 10.802666 10.19794 9 8.0019531 9 z M 14 10 L 14 12 L 19 12 L 19 10 L 14 10 z M 21 10 L 21 12 L 24 12 L 24 10 L 21 10 z M 8.0019531 11 C 9.1159662 11 10 11.883334 10 13 C 10 14.119317 9.1167719 15 8.0019531 15 C 6.881832 15 6 14.119317 6 13 C 6 11.883334 6.8826357 11 8.0019531 11 z M 14 14 L 14 16 L 24 16 L 24 14 L 14 14 z M 4 18 L 4 26 L 6 26 L 6 20 L 9 20 L 9 26 L 11 26 L 11 20.658203 L 13.064453 21.75 C 13.648752 22.060158 14.351587 22.058921 14.935547 21.75 L 14.935547 21.751953 L 18.466797 19.884766 L 17.533203 18.115234 L 14.001953 19.982422 L 10.90625 18.347656 C 10.475078 18.120046 9.9935054 18 9.5039062 18 L 4 18 z"></path></svg><span>Tutorial</span></a><button type="button" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-4 rounded-md px-6 py-3 text-base shadow-md sm:rounded-lg border-gray-200 bg-gray-100 text-black hover:bg-blue-100 dark:border-gray-800 dark:bg-gray-900 hover:border-blue-200 dark:hover:bg-white dark:text-gray-300 dark:hover:text-black cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="flex-shrink-0 fill-current object-contain transition ease-in-out duration-300 h-6 w-6 text-gray-700 dark:text-gray-300 dark:group-hover:text-black"><path d="M 16 4 C 9.382813 4 4 9.382813 4 16 C 4 22.617188 9.382813 28 16 28 C 22.617188 28 28 22.617188 28 16 C 28 9.382813 22.617188 4 16 4 Z M 16 6 C 21.535156 6 26 10.464844 26 16 C 26 21.535156 21.535156 26 16 26 C 10.464844 26 6 21.535156 6 16 C 6 10.464844 10.464844 6 16 6 Z M 16 10 C 13.800781 10 12 11.800781 12 14 L 14 14 C 14 12.882813 14.882813 12 16 12 C 17.117188 12 18 12.882813 18 14 C 18 14.765625 17.507813 15.445313 16.78125 15.6875 L 16.375 15.8125 C 15.558594 16.082031 15 16.863281 15 17.71875 L 15 19 L 17 19 L 17 17.71875 L 17.40625 17.59375 C 18.945313 17.082031 20 15.621094 20 14 C 20 11.800781 18.199219 10 16 10 Z M 15 20 L 15 22 L 17 22 L 17 20 Z"></path></svg><span>Support</span></button><a href="https://github.com/pmndrs/jotai" target="_blank" rel="noreferrer" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-4 rounded-md px-6 py-3 text-base shadow-md sm:rounded-lg border-gray-200 bg-gray-100 text-black hover:bg-blue-100 dark:border-gray-800 dark:bg-gray-900 hover:border-blue-200 dark:hover:bg-white dark:text-gray-300 dark:hover:text-black cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="flex-shrink-0 fill-current object-contain transition ease-in-out duration-300 h-6 w-6 text-gray-700 dark:text-gray-300 dark:group-hover:text-black"><path fill-rule="evenodd" d="M 16 4 C 9.371094 4 4 9.371094 4 16 C 4 21.300781 7.4375 25.800781 12.207031 27.386719 C 12.808594 27.496094 13.027344 27.128906 13.027344 26.808594 C 13.027344 26.523438 13.015625 25.769531 13.011719 24.769531 C 9.671875 25.492188 8.96875 23.160156 8.96875 23.160156 C 8.421875 21.773438 7.636719 21.402344 7.636719 21.402344 C 6.546875 20.660156 7.71875 20.675781 7.71875 20.675781 C 8.921875 20.761719 9.554688 21.910156 9.554688 21.910156 C 10.625 23.746094 12.363281 23.214844 13.046875 22.910156 C 13.15625 22.132813 13.46875 21.605469 13.808594 21.304688 C 11.144531 21.003906 8.34375 19.972656 8.34375 15.375 C 8.34375 14.0625 8.8125 12.992188 9.578125 12.152344 C 9.457031 11.851563 9.042969 10.628906 9.695313 8.976563 C 9.695313 8.976563 10.703125 8.65625 12.996094 10.207031 C 13.953125 9.941406 14.980469 9.808594 16 9.804688 C 17.019531 9.808594 18.046875 9.941406 19.003906 10.207031 C 21.296875 8.65625 22.300781 8.976563 22.300781 8.976563 C 22.957031 10.628906 22.546875 11.851563 22.421875 12.152344 C 23.191406 12.992188 23.652344 14.0625 23.652344 15.375 C 23.652344 19.984375 20.847656 20.996094 18.175781 21.296875 C 18.605469 21.664063 18.988281 22.398438 18.988281 23.515625 C 18.988281 25.121094 18.976563 26.414063 18.976563 26.808594 C 18.976563 27.128906 19.191406 27.503906 19.800781 27.386719 C 24.566406 25.796875 28 21.300781 28 16 C 28 9.371094 22.628906 4 16 4 Z"></path></svg><span>Repository</span></a><a href="https://www.npmjs.com/package/jotai" target="_blank" rel="noreferrer" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-4 rounded-md px-6 py-3 text-base shadow-md sm:rounded-lg border-gray-200 bg-gray-100 text-black hover:bg-blue-100 dark:border-gray-800 dark:bg-gray-900 hover:border-blue-200 dark:hover:bg-white dark:text-gray-300 dark:hover:text-black cursor-pointer hidden 2xl:inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="flex-shrink-0 fill-current object-contain transition ease-in-out duration-300 h-6 w-6 text-gray-700 dark:text-gray-300 dark:group-hover:text-black"><path d="M 0 10 L 0 21 L 9 21 L 9 23 L 16 23 L 16 21 L 32 21 L 32 10 L 0 10 z M 1.7773438 11.777344 L 8.8886719 11.777344 L 8.890625 11.777344 L 8.890625 19.445312 L 7.1113281 19.445312 L 7.1113281 13.556641 L 5.3339844 13.556641 L 5.3339844 19.445312 L 1.7773438 19.445312 L 1.7773438 11.777344 z M 10.667969 11.777344 L 17.777344 11.777344 L 17.779297 11.777344 L 17.779297 19.443359 L 14.222656 19.443359 L 14.222656 21.222656 L 10.667969 21.222656 L 10.667969 11.777344 z M 19.556641 11.777344 L 30.222656 11.777344 L 30.224609 11.777344 L 30.224609 19.445312 L 28.445312 19.445312 L 28.445312 13.556641 L 26.667969 13.556641 L 26.667969 19.445312 L 24.890625 19.445312 L 24.890625 13.556641 L 23.111328 13.556641 L 23.111328 19.445312 L 19.556641 19.445312 L 19.556641 11.777344 z M 14.222656 13.556641 L 14.222656 17.667969 L 16 17.667969 L 16 13.556641 L 14.222656 13.556641 z"></path></svg><span>Package</span></a><a href="https://discord.gg/poimandres" target="_blank" rel="noreferrer" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-4 rounded-md px-6 py-3 text-base shadow-md sm:rounded-lg border-gray-200 bg-gray-100 text-black hover:bg-blue-100 dark:border-gray-800 dark:bg-gray-900 hover:border-blue-200 dark:hover:bg-white dark:text-gray-300 dark:hover:text-black cursor-pointer hidden 2xl:inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="flex-shrink-0 fill-current object-contain transition ease-in-out duration-300 h-6 w-6 text-gray-700 dark:text-gray-300 dark:group-hover:text-black"><path d="M 12.65625 4.90625 L 11.875 5 C 11.875 5 8.371094 5.382813 5.8125 7.4375 L 5.78125 7.4375 L 5.75 7.46875 C 5.175781 7.996094 4.925781 8.644531 4.53125 9.59375 C 4.136719 10.542969 3.714844 11.753906 3.34375 13.09375 C 2.601563 15.777344 2 19.027344 2 22 L 2 22.25 L 2.125 22.5 C 3.050781 24.125 4.695313 25.160156 6.21875 25.875 C 7.742188 26.589844 9.058594 26.96875 9.96875 27 L 10.5625 27.03125 L 10.875 26.5 L 11.96875 24.5625 C 13.128906 24.824219 14.464844 25 16 25 C 17.535156 25 18.871094 24.824219 20.03125 24.5625 L 21.125 26.5 L 21.4375 27.03125 L 22.03125 27 C 22.941406 26.96875 24.257813 26.589844 25.78125 25.875 C 27.304688 25.160156 28.949219 24.125 29.875 22.5 L 30 22.25 L 30 22 C 30 19.027344 29.398438 15.777344 28.65625 13.09375 C 28.285156 11.753906 27.863281 10.542969 27.46875 9.59375 C 27.074219 8.644531 26.824219 7.996094 26.25 7.46875 L 26.21875 7.4375 L 26.1875 7.4375 C 23.628906 5.382813 20.125 5 20.125 5 L 19.34375 4.90625 L 19.0625 5.625 C 19.0625 5.625 18.773438 6.355469 18.59375 7.1875 C 17.460938 7.035156 16.535156 7 16 7 C 15.464844 7 14.539063 7.035156 13.40625 7.1875 C 13.226563 6.355469 12.9375 5.625 12.9375 5.625 Z M 11.28125 7.1875 C 11.324219 7.328125 11.367188 7.449219 11.40625 7.5625 C 10.113281 7.882813 8.734375 8.371094 7.46875 9.15625 L 8.53125 10.84375 C 11.125 9.234375 14.851563 9 16 9 C 17.148438 9 20.875 9.234375 23.46875 10.84375 L 24.53125 9.15625 C 23.265625 8.371094 21.886719 7.882813 20.59375 7.5625 C 20.632813 7.449219 20.675781 7.328125 20.71875 7.1875 C 21.652344 7.375 23.433594 7.804688 24.90625 8.96875 C 24.898438 8.972656 25.28125 9.550781 25.625 10.375 C 25.976563 11.222656 26.367188 12.351563 26.71875 13.625 C 27.394531 16.066406 27.925781 19.039063 27.96875 21.65625 C 27.339844 22.617188 26.171875 23.484375 24.9375 24.0625 C 23.859375 24.566406 23.007813 24.75 22.5 24.84375 L 22 24 C 22.296875 23.890625 22.589844 23.769531 22.84375 23.65625 C 24.382813 22.980469 25.21875 22.25 25.21875 22.25 L 23.90625 20.75 C 23.90625 20.75 23.34375 21.265625 22.03125 21.84375 C 20.71875 22.421875 18.714844 23 16 23 C 13.285156 23 11.28125 22.421875 9.96875 21.84375 C 8.65625 21.265625 8.09375 20.75 8.09375 20.75 L 6.78125 22.25 C 6.78125 22.25 7.617188 22.980469 9.15625 23.65625 C 9.410156 23.769531 9.703125 23.890625 10 24 L 9.5 24.84375 C 8.992188 24.75 8.140625 24.566406 7.0625 24.0625 C 5.828125 23.484375 4.660156 22.617188 4.03125 21.65625 C 4.074219 19.039063 4.605469 16.066406 5.28125 13.625 C 5.632813 12.351563 6.023438 11.222656 6.375 10.375 C 6.71875 9.550781 7.101563 8.972656 7.09375 8.96875 C 8.566406 7.804688 10.347656 7.375 11.28125 7.1875 Z M 12.5 14 C 11.726563 14 11.042969 14.441406 10.625 15 C 10.207031 15.558594 10 16.246094 10 17 C 10 17.753906 10.207031 18.441406 10.625 19 C 11.042969 19.558594 11.726563 20 12.5 20 C 13.273438 20 13.957031 19.558594 14.375 19 C 14.792969 18.441406 15 17.753906 15 17 C 15 16.246094 14.792969 15.558594 14.375 15 C 13.957031 14.441406 13.273438 14 12.5 14 Z M 19.5 14 C 18.726563 14 18.042969 14.441406 17.625 15 C 17.207031 15.558594 17 16.246094 17 17 C 17 17.753906 17.207031 18.441406 17.625 19 C 18.042969 19.558594 18.726563 20 19.5 20 C 20.273438 20 20.957031 19.558594 21.375 19 C 21.792969 18.441406 22 17.753906 22 17 C 22 16.246094 21.792969 15.558594 21.375 15 C 20.957031 14.441406 20.273438 14 19.5 14 Z M 12.5 16 C 12.554688 16 12.625 16.019531 12.75 16.1875 C 12.875 16.355469 13 16.648438 13 17 C 13 17.351563 12.875 17.644531 12.75 17.8125 C 12.625 17.980469 12.554688 18 12.5 18 C 12.445313 18 12.375 17.980469 12.25 17.8125 C 12.125 17.644531 12 17.351563 12 17 C 12 16.648438 12.125 16.355469 12.25 16.1875 C 12.375 16.019531 12.445313 16 12.5 16 Z M 19.5 16 C 19.554688 16 19.625 16.019531 19.75 16.1875 C 19.875 16.355469 20 16.648438 20 17 C 20 17.351563 19.875 17.644531 19.75 17.8125 C 19.625 17.980469 19.554688 18 19.5 18 C 19.445313 18 19.375 17.980469 19.25 17.8125 C 19.125 17.644531 19 17.351563 19 17 C 19 16.648438 19.125 16.355469 19.25 16.1875 C 19.375 16.019531 19.445313 16 19.5 16 Z"></path></svg><span>Community</span></a><a href="https://twitter.com/jotaijs" target="_blank" rel="noreferrer" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-4 rounded-md px-6 py-3 text-base shadow-md sm:rounded-lg border-gray-200 bg-gray-100 text-black hover:bg-blue-100 dark:border-gray-800 dark:bg-gray-900 hover:border-blue-200 dark:hover:bg-white dark:text-gray-300 dark:hover:text-black cursor-pointer hidden 2xl:inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" class="flex-shrink-0 fill-current object-contain transition ease-in-out duration-300 h-6 w-6 text-gray-700 dark:text-gray-300 dark:group-hover:text-black"><path d="M26.37,26l-8.795-12.822l0.015,0.012L25.52,4h-2.65l-6.46,7.48L11.28,4H4.33l8.211,11.971L12.54,15.97L3.88,26h2.65 l7.182-8.322L19.42,26H26.37z M10.23,6l12.34,18h-2.1L8.12,6H10.23z"></path></svg><span>Updates</span></a></div></div><div class="mt-6 inline-flex flex-col space-y-1.5 text-center"><a href="https://twitter.com/dai_shi" target="_blank" rel="noreferrer" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-2 rounded px-3 py-1.5 text-xs shadow-sm sm:rounded-md border-gray-800 bg-gray-900 text-gray-300 cursor-pointer inline-flex items-center justify-center" title="Daishi Kato" style="width:150px"><span>library by <span class="font-semibold">Daishi Kato</span></span></a><a href="https://jessiewaters.com" target="_blank" rel="noreferrer" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-2 rounded px-3 py-1.5 text-xs shadow-sm sm:rounded-md border-gray-800 bg-gray-900 text-gray-300 cursor-pointer inline-flex items-center justify-center" title="Jessie Waters" style="width:150px"><span>art by <span class="font-semibold">Jessie Waters</span></span></a><a href="https://candycode.com/" target="_blank" rel="noreferrer" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-2 rounded px-3 py-1.5 text-xs shadow-sm sm:rounded-md border-gray-800 bg-gray-900 text-gray-300 cursor-pointer inline-flex items-center justify-center" title="candycode, an alternative graphic design and web development agency based in San Diego" style="width:150px;height:28px"><span><div class="inline-flex items-center space-x-1"><span class="whitespace-nowrap">site by</span><img src="https://storage.googleapis.com/candycode/candycode.svg" alt="candycode alternative graphic design web development agency San Diego" style="position:relative;bottom:-0.5px;height:15px"/></div></span></a></div></aside><main class="p-6 sm:p-8 lg:mt-8 lg:max-w-5xl lg:flex-shrink xl:p-16 grow"><div class="prose"><div class="mb-4 lg:hidden"><div><h1><a aria-current="page" class="inline-block rounded-lg focus:ring-offset-4" href="/"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 289.19 99.77" class="text-black dark:text-white w-[4rem]"><title>Jotai</title><path d="M42.36,5.32H61.82V70.23a29.46,29.46,0,0,1-4,15.61A27.19,27.19,0,0,1,46.64,96.07a36.26,36.26,0,0,1-16.59,3.61,37.56,37.56,0,0,1-15.25-3A24.3,24.3,0,0,1,4,87.59Q0,81.5,0,72.23H19.59c.06,3.69,1.13,6.57,3.21,8.61a11.21,11.21,0,0,0,8.25,3.07q11.22,0,11.31-13.68Z" fill="currentColor"></path><path d="M105,99.77q-10.59,0-18.29-4.52A30.54,30.54,0,0,1,74.82,82.61a40.52,40.52,0,0,1-4.18-18.84,40.75,40.75,0,0,1,4.18-18.93A30.6,30.6,0,0,1,86.71,32.2,35.52,35.52,0,0,1,105,27.68a35.58,35.58,0,0,1,18.3,4.52,30.57,30.57,0,0,1,11.88,12.64,40.76,40.76,0,0,1,4.19,18.93,40.52,40.52,0,0,1-4.19,18.84A30.51,30.51,0,0,1,123.3,95.25Q115.59,99.78,105,99.77ZM127.14,5.32v10.5H82.87V5.32Zm-22,79.45a12,12,0,0,0,10.89-6q3.7-6,3.7-15.13T116,48.48a12,12,0,0,0-10.89-6,12.15,12.15,0,0,0-11,6q-3.73,6-3.73,15.16t3.73,15.13A12.16,12.16,0,0,0,105.09,84.77Z" fill="currentColor"></path><path d="M186.3,28.59V43.14H173.16V77q0,4,1.82,5.4a7.5,7.5,0,0,0,4.73,1.41,14.72,14.72,0,0,0,2.72-.25l2.09-.38,3,14.41c-1,.3-2.33.66-4.09,1.06a34.13,34.13,0,0,1-6.41.75q-10.55.47-16.93-4.56T153.8,79.5V43.14h-9.55V28.59h9.55V11.86h19.36V28.59Z" fill="currentColor"></path><path d="M216,99.73q-10,0-16.59-5.23t-6.59-15.59q0-7.81,3.68-12.27a21.19,21.19,0,0,1,9.66-6.53A54.78,54.78,0,0,1,219,57.41a98.57,98.57,0,0,0,13-1.91q3.92-1,3.91-4.36v-.28a8.42,8.42,0,0,0-2.7-6.68q-2.72-2.35-7.66-2.36a13.77,13.77,0,0,0-8.32,2.27,10.7,10.7,0,0,0-4.09,5.77l-17.91-1.45a23.88,23.88,0,0,1,9.93-15.14q7.94-5.58,20.48-5.59a42.24,42.24,0,0,1,14.54,2.46,24.19,24.19,0,0,1,10.94,7.66q4.16,5.21,4.16,13.52V98.41H236.92V88.73h-.54a20.18,20.18,0,0,1-7.62,7.93Q223.69,99.73,216,99.73Zm5.54-13.37A15,15,0,0,0,232,82.66a11.94,11.94,0,0,0,4.09-9.2V66.05a11.38,11.38,0,0,1-3.52,1.36c-1.6.39-3.29.73-5.1,1s-3.41.54-4.84.75a19.19,19.19,0,0,0-8.2,2.87,7.06,7.06,0,0,0-3.11,6.22,6.94,6.94,0,0,0,2.88,6A12.43,12.43,0,0,0,221.51,86.36Z" fill="currentColor"></path><path d="M278.69,19.59a10.41,10.41,0,0,1-7.37-2.89,9.14,9.14,0,0,1-3.09-6.93,9.1,9.1,0,0,1,3.09-6.91,11,11,0,0,1,14.78,0,9.1,9.1,0,0,1,3.09,6.91,9.14,9.14,0,0,1-3.09,6.93A10.45,10.45,0,0,1,278.69,19.59ZM269,98.41V28.59h19.36V98.41Z" fill="currentColor"></path></svg></a><span class="sr-only">Jotai</span></h1><div class="mt-1 space-x-2 text-gray-350 dark:text-gray-500 flex items-center"><div class="text-xs whitespace-nowrap">状態</div><div class="text-xs leading-tight">Primitive and flexible state management for React</div></div></div></div><h1 class="-mt-1">Babel</h1><div class="text-pretty"><h2 id="babel-plugin-react-refresh"><a href="#babel-plugin-react-refresh">babel/plugin-react-refresh</a></h2><p>This plugin adds support for React Refresh for Jotai atoms. This makes sure that state isn't reset, when developing using React Refresh.</p><h3 id="usage"><a href="#usage">Usage</a></h3><p>With a <code class="relative -top-px rounded px-1 py-0.5 text-sm lg:text-base bg-gray-100 text-black dark:bg-gray-800 dark:text-gray-300">babel</code> configuration file:</p><pre><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token punctuation">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token string-property property">"plugins"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token string">"jotai/babel/plugin-react-refresh"</span><span class="token punctuation">]</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token punctuation">}</span></div></pre></pre><p>The plugin recognizes a predefined list of atom function names (e.g. 'atom', 'atomFamily', 'atomWithDefault'). If you’re using custom atom function names, you can explicitly supply them to ensure they are recognized.</p><p>Here’s how you can configure it in your Babel setup:</p><pre><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token punctuation">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token string-property property">"plugins"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation">[</span><span class="token string">"jotai/babel/plugin-react-refresh"</span><span class="token punctuation">,</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain"> </span><span class="token string-property property">"customAtomNames"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token string">"customAtom"</span><span class="token punctuation">]</span><span class="token plain"> </span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation">]</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token punctuation">}</span></div></pre></pre><p>Examples can be found below.</p><h2 id="babel-plugin-debug-label"><a href="#babel-plugin-debug-label">babel/plugin-debug-label</a></h2><p>Jotai is based on object references and not keys (like Recoil). This means there's no identifier for atoms. To identify atoms, it's possible to add a <code class="relative -top-px rounded px-1 py-0.5 text-sm lg:text-base bg-gray-100 text-black dark:bg-gray-800 dark:text-gray-300">debugLabel</code> to an atom, which can be found in React devtools.</p><p>However, this can quickly become cumbersome to add a <code class="relative -top-px rounded px-1 py-0.5 text-sm lg:text-base bg-gray-100 text-black dark:bg-gray-800 dark:text-gray-300">debugLabel</code> to every atom.</p><p>This <code class="relative -top-px rounded px-1 py-0.5 text-sm lg:text-base bg-gray-100 text-black dark:bg-gray-800 dark:text-gray-300">babel</code> plugin adds a <code class="relative -top-px rounded px-1 py-0.5 text-sm lg:text-base bg-gray-100 text-black dark:bg-gray-800 dark:text-gray-300">debugLabel</code> to every atom, based on its identifier.</p><p>The plugin transforms this code:</p><pre><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token keyword module">export</span><span class="token plain"> </span><span class="token keyword">const</span><span class="token plain"> countAtom </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function">atom</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></div></pre></pre><p>Into:</p><pre><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token keyword module">export</span><span class="token plain"> </span><span class="token keyword">const</span><span class="token plain"> countAtom </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function">atom</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token plain"></span></div><div class="token-line"><span class="token plain">countAtom</span><span class="token punctuation">.</span><span class="token property-access">debugLabel</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token string">'countAtom'</span></div></pre></pre><p>Default exports are also handled, based on the file naming:</p><pre><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token comment">// countAtom.ts</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token keyword module">export</span><span class="token plain"> </span><span class="token keyword module">default</span><span class="token plain"> </span><span class="token function">atom</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></div></pre></pre><p>Which transform into:</p><pre><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token comment">// countAtom.ts</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token keyword">const</span><span class="token plain"> countAtom </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function">atom</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token plain"></span></div><div class="token-line"><span class="token plain">countAtom</span><span class="token punctuation">.</span><span class="token property-access">debugLabel</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token string">'countAtom'</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token keyword module">export</span><span class="token plain"> </span><span class="token keyword module">default</span><span class="token plain"> countAtom</span></div></pre></pre><h3 id="usage"><a href="#usage">Usage</a></h3><p>It is recommended to disable this plugin for production builds to avoid unnecessary overhead. You can conditionally include it in your Babel configuration based on the environment.</p><p>With a <code class="relative -top-px rounded px-1 py-0.5 text-sm lg:text-base bg-gray-100 text-black dark:bg-gray-800 dark:text-gray-300">babel</code> configuration file:</p><pre><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token punctuation">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token string-property property">"plugins"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token string">"jotai/babel/plugin-debug-label"</span><span class="token punctuation">]</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token punctuation">}</span></div></pre></pre><p>The plugin recognizes a predefined list of atom function names (e.g. 'atom', 'atomFamily', 'atomWithDefault'). If you’re using custom atom function names, you can explicitly supply them to ensure they are recognized.</p><p>Here’s how you can configure it in your Babel setup:</p><pre><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token punctuation">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token string-property property">"plugins"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation">[</span><span class="token string">"jotai/babel/plugin-debug-label"</span><span class="token punctuation">,</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain"> </span><span class="token string-property property">"customAtomNames"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token string">"customAtom"</span><span class="token punctuation">]</span><span class="token plain"> </span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation">]</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token punctuation">}</span></div></pre></pre><p>Examples can be found below.</p><h2 id="babel-preset"><a href="#babel-preset">babel/preset</a></h2><p>Jotai ships with a <code class="relative -top-px rounded px-1 py-0.5 text-sm lg:text-base bg-gray-100 text-black dark:bg-gray-800 dark:text-gray-300">babel preset</code> containing the plugins created for Jotai.</p><h3 id="usage"><a href="#usage">Usage</a></h3><p>With a <code class="relative -top-px rounded px-1 py-0.5 text-sm lg:text-base bg-gray-100 text-black dark:bg-gray-800 dark:text-gray-300">babel</code> configuration file:</p><pre><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token punctuation">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token string-property property">"presets"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token string">"jotai/babel/preset"</span><span class="token punctuation">]</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token punctuation">}</span></div></pre></pre><p>You can also supply your atom names to the preset:</p><pre><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token punctuation">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token string-property property">"presets"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">"jotai/babel/preset"</span><span class="token punctuation">,</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain"> </span><span class="token string-property property">"customAtomNames"</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token string">"customAtom"</span><span class="token punctuation">]</span><span class="token plain"> </span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token punctuation">}</span></div></pre></pre><h3 id="examples"><a href="#examples">Examples</a></h3><h4 id="next-js"><a href="#next-js">Next.js</a></h4><div class="mb-8 overflow-hidden rounded-md border-b border-gray-200 shadow-lg dark:border-gray-800 dark:!shadow-none sm:rounded-lg"><iframe title="o2di2" class="h-[400px] w-full" src="https://codesandbox.io/embed/o2di2?codemirror=1&fontsize=14&hidenavigation=1&theme=light&hidedevtools=1" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" loading="lazy"></iframe></div><h4 id="parcel"><a href="#parcel">Parcel</a></h4><div class="mb-8 overflow-hidden rounded-md border-b border-gray-200 shadow-lg dark:border-gray-800 dark:!shadow-none sm:rounded-lg"><iframe title="bgf3b" class="h-[400px] w-full" src="https://codesandbox.io/embed/bgf3b?codemirror=1&fontsize=14&hidenavigation=1&theme=light&hidedevtools=1" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></div><footer class="mt-8 inline-flex flex-col space-y-2 lg:hidden" style="margin-bottom:79px"><a href="https://twitter.com/dai_shi" target="_blank" rel="noreferrer" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-2 rounded px-3 py-1.5 text-xs shadow-sm sm:rounded-md border-gray-800 bg-gray-900 text-gray-300 cursor-pointer inline-flex items-center justify-center" title="Daishi Kato" style="width:150px"><span>library by <span class="font-semibold">Daishi Kato</span></span></a><a href="https://jessiewaters.com" target="_blank" rel="noreferrer" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-2 rounded px-3 py-1.5 text-xs shadow-sm sm:rounded-md border-gray-800 bg-gray-900 text-gray-300 cursor-pointer inline-flex items-center justify-center" title="Jessie Waters" style="width:150px"><span>art by <span class="font-semibold">Jessie Waters</span></span></a><a href="https://candycode.com/" target="_blank" rel="noreferrer" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-2 rounded px-3 py-1.5 text-xs shadow-sm sm:rounded-md border-gray-800 bg-gray-900 text-gray-300 cursor-pointer inline-flex items-center justify-center" title="candycode, an alternative graphic design and web development agency based in San Diego" style="width:150px;height:28px"><span><div class="inline-flex items-center space-x-1"><span class="whitespace-nowrap">site by</span><img src="https://storage.googleapis.com/candycode/candycode.svg" alt="candycode alternative graphic design web development agency San Diego" style="position:relative;bottom:-0.5px;height:15px"/></div></span></a></footer></main><div class="fixed left-0 bottom-0 right-0 lg:hidden"><div class="flex w-full justify-center space-x-4 border-t border-gray-700 bg-gray-900 p-4 dark:border-gray-800"><a href="https://github.com/pmndrs/jotai" target="_blank" rel="noreferrer" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-2 rounded px-3 py-1.5 text-xs shadow-sm sm:rounded-md border-gray-800 bg-gray-900 text-gray-300 cursor-pointer font-bold uppercase tracking-wider"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="flex-shrink-0 fill-current object-contain transition ease-in-out duration-300 h-4 w-4 text-gray-300"><path fill-rule="evenodd" d="M 16 4 C 9.371094 4 4 9.371094 4 16 C 4 21.300781 7.4375 25.800781 12.207031 27.386719 C 12.808594 27.496094 13.027344 27.128906 13.027344 26.808594 C 13.027344 26.523438 13.015625 25.769531 13.011719 24.769531 C 9.671875 25.492188 8.96875 23.160156 8.96875 23.160156 C 8.421875 21.773438 7.636719 21.402344 7.636719 21.402344 C 6.546875 20.660156 7.71875 20.675781 7.71875 20.675781 C 8.921875 20.761719 9.554688 21.910156 9.554688 21.910156 C 10.625 23.746094 12.363281 23.214844 13.046875 22.910156 C 13.15625 22.132813 13.46875 21.605469 13.808594 21.304688 C 11.144531 21.003906 8.34375 19.972656 8.34375 15.375 C 8.34375 14.0625 8.8125 12.992188 9.578125 12.152344 C 9.457031 11.851563 9.042969 10.628906 9.695313 8.976563 C 9.695313 8.976563 10.703125 8.65625 12.996094 10.207031 C 13.953125 9.941406 14.980469 9.808594 16 9.804688 C 17.019531 9.808594 18.046875 9.941406 19.003906 10.207031 C 21.296875 8.65625 22.300781 8.976563 22.300781 8.976563 C 22.957031 10.628906 22.546875 11.851563 22.421875 12.152344 C 23.191406 12.992188 23.652344 14.0625 23.652344 15.375 C 23.652344 19.984375 20.847656 20.996094 18.175781 21.296875 C 18.605469 21.664063 18.988281 22.398438 18.988281 23.515625 C 18.988281 25.121094 18.976563 26.414063 18.976563 26.808594 C 18.976563 27.128906 19.191406 27.503906 19.800781 27.386719 C 24.566406 25.796875 28 21.300781 28 16 C 28 9.371094 22.628906 4 16 4 Z"></path></svg><span>GitHub</span></a><a href="https://www.npmjs.com/package/jotai" target="_blank" rel="noreferrer" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-2 rounded px-3 py-1.5 text-xs shadow-sm sm:rounded-md border-gray-800 bg-gray-900 text-gray-300 cursor-pointer font-bold uppercase tracking-wider"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="flex-shrink-0 fill-current object-contain transition ease-in-out duration-300 h-4 w-4 text-gray-300"><path d="M 0 10 L 0 21 L 9 21 L 9 23 L 16 23 L 16 21 L 32 21 L 32 10 L 0 10 z M 1.7773438 11.777344 L 8.8886719 11.777344 L 8.890625 11.777344 L 8.890625 19.445312 L 7.1113281 19.445312 L 7.1113281 13.556641 L 5.3339844 13.556641 L 5.3339844 19.445312 L 1.7773438 19.445312 L 1.7773438 11.777344 z M 10.667969 11.777344 L 17.777344 11.777344 L 17.779297 11.777344 L 17.779297 19.443359 L 14.222656 19.443359 L 14.222656 21.222656 L 10.667969 21.222656 L 10.667969 11.777344 z M 19.556641 11.777344 L 30.222656 11.777344 L 30.224609 11.777344 L 30.224609 19.445312 L 28.445312 19.445312 L 28.445312 13.556641 L 26.667969 13.556641 L 26.667969 19.445312 L 24.890625 19.445312 L 24.890625 13.556641 L 23.111328 13.556641 L 23.111328 19.445312 L 19.556641 19.445312 L 19.556641 11.777344 z M 14.222656 13.556641 L 14.222656 17.667969 L 16 17.667969 L 16 13.556641 L 14.222656 13.556641 z"></path></svg><span>npm</span></a><button type="button" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-2 rounded px-3 py-1.5 text-xs shadow-sm sm:rounded-md border-gray-800 bg-gray-900 text-gray-300 cursor-pointer font-bold uppercase tracking-wider"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="flex-shrink-0 fill-current object-contain transition ease-in-out duration-300 h-4 w-4 text-gray-300"><path d="M 9 4 C 7.355469 4 6 5.355469 6 7 L 6 25 C 6 26.644531 7.355469 28 9 28 L 26 28 L 26 4 Z M 9 6 L 24 6 L 24 22 L 9 22 C 8.648438 22 8.316406 22.074219 8 22.1875 L 8 7 C 8 6.433594 8.433594 6 9 6 Z M 11 9 L 11 11 L 22 11 L 22 9 Z M 9 24 L 24 24 L 24 26 L 9 26 C 8.433594 26 8 25.566406 8 25 C 8 24.433594 8.433594 24 9 24 Z"></path></svg><span>Docs</span></button></div><div class="h-4 w-full bg-black"></div></div></div><div hidden="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></div><div hidden="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></div><div class="opacity-0 invisible fixed inset-0 z-50 flex h-screen max-h-screen items-end bg-black/75 p-4 sm:p-6 lg:p-8"><div class="max-h-full h-full w-full overflow-y-scroll !overscroll-none rounded-lg border border-gray-300 bg-white p-8 shadow-2xl dark:border-gray-800 dark:bg-gray-950 dark:!shadow-none lg:!overflow-y-auto lg:p-16"><div class="px-3 pb-16 sm:pb-0 max-w-[1920px] mx-auto"><div class="-mx-3 mb-6 lg:hidden"><button type="button" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-4 rounded-md px-6 py-3 text-base shadow-md sm:rounded-lg border-gray-800 bg-gray-900 text-gray-300 cursor-pointer w-full"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="flex-shrink-0 fill-current object-contain transition ease-in-out duration-300 h-6 w-6 text-gray-300"><path d="M 19 3 C 13.488281 3 9 7.488281 9 13 C 9 15.394531 9.839844 17.589844 11.25 19.3125 L 3.28125 27.28125 L 4.71875 28.71875 L 12.6875 20.75 C 14.410156 22.160156 16.605469 23 19 23 C 24.511719 23 29 18.511719 29 13 C 29 7.488281 24.511719 3 19 3 Z M 19 5 C 23.429688 5 27 8.570313 27 13 C 27 17.429688 23.429688 21 19 21 C 14.570313 21 11 17.429688 11 13 C 11 8.570313 14.570313 5 19 5 Z"></path></svg><span>Search...</span></button></div><h2 class="hidden 2xl:block mb-8 2xl:mb-16 text-4xl font-extrabold leading-tight tracking-tight text-black dark:text-gray-50 lg:text-7xl lg:tracking-tighter">Jotai docs</h2><div class="my-8 space-y-8 lg:my-0 lg:space-y-0 lg:grid lg:grid-cols-5 lg:gap-8"><section class="contents lg:flex lg:flex-col lg:gap-8"><div><div class="relative -left-0.5 flex items-center gap-1 mt-8 lg:mt-0"><span class="text-base font-bold uppercase tracking-widest text-gray-350 dark:text-white">core</span><span class="relative top-px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="h-auto w-4 text-gray-350"><path d="M 6.90625 6.59375 L 6.1875 7.28125 L 2.28125 11.1875 L 1.59375 11.90625 L 16 26.3125 L 30.40625 11.90625 L 29.71875 11.1875 L 25.8125 7.28125 L 25.09375 6.59375 L 16 15.6875 Z M 6.875 9.4375 L 15.28125 17.8125 L 16 18.5 L 16.71875 17.8125 L 25.125 9.4375 L 27.5625 11.875 L 16 23.46875 L 4.4375 11.875 Z"></path></svg></span></div><ul class="space-y-0.5 mt-2"><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/core/atom">atom</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/core/use-atom">useAtom</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/core/store">Store</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/core/provider">Provider</a></li></ul></div><div><div class="relative -left-0.5 flex items-center gap-1 mt-8 lg:mt-0"><span class="text-base font-bold uppercase tracking-widest text-gray-350 dark:text-white">utilities</span><span class="relative top-px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="h-auto w-4 text-gray-350"><path d="M 6.90625 6.59375 L 6.1875 7.28125 L 2.28125 11.1875 L 1.59375 11.90625 L 16 26.3125 L 30.40625 11.90625 L 29.71875 11.1875 L 25.8125 7.28125 L 25.09375 6.59375 L 16 15.6875 Z M 6.875 9.4375 L 15.28125 17.8125 L 16 18.5 L 16.71875 17.8125 L 25.125 9.4375 L 27.5625 11.875 L 16 23.46875 L 4.4375 11.875 Z"></path></svg></span></div><ul class="space-y-0.5 mt-2"><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/utilities/storage">Storage</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/utilities/ssr">SSR</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/utilities/async">Async</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/utilities/lazy">Lazy</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/utilities/resettable">Resettable</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/utilities/family">Family</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/utilities/callback">Callback</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/utilities/reducer">Reducer</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/utilities/select">Select</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/utilities/split">Split</a></li></ul></div></section><section class="contents lg:flex lg:flex-col lg:gap-8"><div><div class="relative -left-0.5 flex items-center gap-1 mt-8 lg:mt-0"><span class="text-base font-bold uppercase tracking-widest text-gray-350 dark:text-white">extensions</span><span class="relative top-px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="h-auto w-4 text-gray-350"><path d="M 6.90625 6.59375 L 6.1875 7.28125 L 2.28125 11.1875 L 1.59375 11.90625 L 16 26.3125 L 30.40625 11.90625 L 29.71875 11.1875 L 25.8125 7.28125 L 25.09375 6.59375 L 16 15.6875 Z M 6.875 9.4375 L 15.28125 17.8125 L 16 18.5 L 16.71875 17.8125 L 25.125 9.4375 L 27.5625 11.875 L 16 23.46875 L 4.4375 11.875 Z"></path></svg></span></div><ul class="space-y-0.5 mt-2"><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/extensions/trpc">tRPC</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/extensions/query">Query</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/extensions/urql">URQL</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/extensions/effect">Effect</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/extensions/immer">Immer</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/extensions/xstate">XState</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/extensions/location">Location</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/extensions/cache">Cache</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/extensions/scope">Scope</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/extensions/optics">Optics</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/extensions/redux">Redux</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/extensions/relay">Relay</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/extensions/valtio">Valtio</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/extensions/zustand">Zustand</a></li></ul></div><div><div class="relative -left-0.5 flex items-center gap-1 mt-8 lg:mt-0"><span class="text-base font-bold uppercase tracking-widest text-gray-350 dark:text-white">third party</span><span class="relative top-px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="h-auto w-4 text-gray-350"><path d="M 6.90625 6.59375 L 6.1875 7.28125 L 2.28125 11.1875 L 1.59375 11.90625 L 16 26.3125 L 30.40625 11.90625 L 29.71875 11.1875 L 25.8125 7.28125 L 25.09375 6.59375 L 16 15.6875 Z M 6.875 9.4375 L 15.28125 17.8125 L 16 18.5 L 16.71875 17.8125 L 25.125 9.4375 L 27.5625 11.875 L 16 23.46875 L 4.4375 11.875 Z"></path></svg></span></div><ul class="space-y-0.5 mt-2"><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/third-party/history">History</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/third-party/derive">Derive</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/third-party/bunja">Bunja</a></li></ul></div></section><section class="contents lg:flex lg:flex-col lg:gap-8"><div><div class="relative -left-0.5 flex items-center gap-1 mt-8 lg:mt-0"><span class="text-base font-bold uppercase tracking-widest text-gray-350 dark:text-white">tools</span><span class="relative top-px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="h-auto w-4 text-gray-350"><path d="M 6.90625 6.59375 L 6.1875 7.28125 L 2.28125 11.1875 L 1.59375 11.90625 L 16 26.3125 L 30.40625 11.90625 L 29.71875 11.1875 L 25.8125 7.28125 L 25.09375 6.59375 L 16 15.6875 Z M 6.875 9.4375 L 15.28125 17.8125 L 16 18.5 L 16.71875 17.8125 L 25.125 9.4375 L 27.5625 11.875 L 16 23.46875 L 4.4375 11.875 Z"></path></svg></span></div><ul class="space-y-0.5 mt-2"><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/tools/swc">SWC</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/tools/babel">Babel</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/tools/devtools">Devtools</a></li></ul></div><div><div class="relative -left-0.5 flex items-center gap-1 mt-8 lg:mt-0"><span class="text-base font-bold uppercase tracking-widest text-gray-350 dark:text-white">basics</span><span class="relative top-px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="h-auto w-4 text-gray-350"><path d="M 6.90625 6.59375 L 6.1875 7.28125 L 2.28125 11.1875 L 1.59375 11.90625 L 16 26.3125 L 30.40625 11.90625 L 29.71875 11.1875 L 25.8125 7.28125 L 25.09375 6.59375 L 16 15.6875 Z M 6.875 9.4375 L 15.28125 17.8125 L 16 18.5 L 16.71875 17.8125 L 25.125 9.4375 L 27.5625 11.875 L 16 23.46875 L 4.4375 11.875 Z"></path></svg></span></div><ul class="space-y-0.5 mt-2"><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/basics/concepts">Concepts</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/basics/comparison">Comparison</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/basics/showcase">Showcase</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/basics/functional-programming-and-jotai">Functional programming and Jotai</a></li></ul></div></section><div><div class="relative -left-0.5 flex items-center gap-1 mt-8 lg:mt-0"><span class="text-base font-bold uppercase tracking-widest text-gray-350 dark:text-white">guides</span><span class="relative top-px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="h-auto w-4 text-gray-350"><path d="M 6.90625 6.59375 L 6.1875 7.28125 L 2.28125 11.1875 L 1.59375 11.90625 L 16 26.3125 L 30.40625 11.90625 L 29.71875 11.1875 L 25.8125 7.28125 L 25.09375 6.59375 L 16 15.6875 Z M 6.875 9.4375 L 15.28125 17.8125 L 16 18.5 L 16.71875 17.8125 L 25.125 9.4375 L 27.5625 11.875 L 16 23.46875 L 4.4375 11.875 Z"></path></svg></span></div><ul class="space-y-0.5 mt-2"><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/migrating-to-v2-api">v2 API migration</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/typescript">TypeScript</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/nextjs">Next.js</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/waku">Waku</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/remix">Remix</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/react-native">React Native</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/debugging">Debugging</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/performance">Performance</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/testing">Testing</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/core-internals">Core internals</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/composing-atoms">Composing atoms</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/atoms-in-atom">Atoms in atom</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/initialize-atom-on-render">Initializing state on render</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/persistence">Persistence</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/using-store-outside-react">Using store outside React</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/async">Async</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/resettable">Resettable</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/guides/vite">Vite</a></li></ul></div><div><div class="relative -left-0.5 flex items-center gap-1 mt-8 lg:mt-0"><span class="text-base font-bold uppercase tracking-widest text-gray-350 dark:text-white">recipes</span><span class="relative top-px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="h-auto w-4 text-gray-350"><path d="M 6.90625 6.59375 L 6.1875 7.28125 L 2.28125 11.1875 L 1.59375 11.90625 L 16 26.3125 L 30.40625 11.90625 L 29.71875 11.1875 L 25.8125 7.28125 L 25.09375 6.59375 L 16 15.6875 Z M 6.875 9.4375 L 15.28125 17.8125 L 16 18.5 L 16.71875 17.8125 L 25.125 9.4375 L 27.5625 11.875 L 16 23.46875 L 4.4375 11.875 Z"></path></svg></span></div><ul class="space-y-0.5 mt-2"><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/recipes/large-objects">Large objects</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/recipes/custom-useatom-hooks">Custom useAtom hooks</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/recipes/use-atom-effect">useAtomEffect</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/recipes/atom-with-toggle">atomWithToggle</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/recipes/atom-with-compare">atomWithCompare</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/recipes/atom-with-toggle-and-storage">atomWithToggleAndStorage</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/recipes/atom-with-refresh">atomWithRefresh</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/recipes/atom-with-refresh-and-default">atomWithRefreshAndDefault</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/recipes/atom-with-listeners">atomWithListeners</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/recipes/atom-with-broadcast">atomWithBroadcast</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/recipes/atom-with-debounce">atomWithDebounce</a></li><li><a class="relative -left-3 inline-block whitespace-nowrap rounded border dark:!border-none border-transparent px-2 py-1 text-base text-black hover:!border-blue-200 hover:bg-blue-100 dark:text-gray-300 dark:hover:!text-black dark:hover:bg-white lg:whitespace-normal" href="/docs/recipes/use-reducer-atom">useReducerAtom</a></li></ul></div></div></div><div class="z-70 fixed left-8 right-8 bottom-8 sm:left-auto sm:right-16 sm:bottom-16 lg:bottom-auto lg:top-16"><button type="button" class="inline-flex select-none items-center border dark:!shadow-none dark:!border-transparent group space-x-4 rounded-md px-6 py-3 text-base shadow-md sm:rounded-lg border-gray-800 bg-gray-900 text-gray-300 cursor-pointer w-full font-bold uppercase tracking-wider lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="flex-shrink-0 fill-current object-contain transition ease-in-out duration-300 h-6 w-6 text-gray-300"><path d="M 16 3 C 8.832031 3 3 8.832031 3 16 C 3 23.167969 8.832031 29 16 29 C 23.167969 29 29 23.167969 29 16 C 29 8.832031 23.167969 3 16 3 Z M 16 5 C 22.085938 5 27 9.914063 27 16 C 27 22.085938 22.085938 27 16 27 C 9.914063 27 5 22.085938 5 16 C 5 9.914063 9.914063 5 16 5 Z M 12.21875 10.78125 L 10.78125 12.21875 L 14.5625 16 L 10.78125 19.78125 L 12.21875 21.21875 L 16 17.4375 L 19.78125 21.21875 L 21.21875 19.78125 L 17.4375 16 L 21.21875 12.21875 L 19.78125 10.78125 L 16 14.5625 Z"></path></svg><span>Close</span></button><button class="hidden lg:block" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-8 h-8 text-gray-700 dark:text-gray-300 dark:group-hover:text-black' : 'text-gray-300 flex-shrink-0 fill-current object-contain transition ease-in-out duration-300"><path d="M 16 3 C 8.832031 3 3 8.832031 3 16 C 3 23.167969 8.832031 29 16 29 C 23.167969 29 29 23.167969 29 16 C 29 8.832031 23.167969 3 16 3 Z M 16 5 C 22.085938 5 27 9.914063 27 16 C 27 22.085938 22.085938 27 16 27 C 9.914063 27 5 22.085938 5 16 C 5 9.914063 9.914063 5 16 5 Z M 12.21875 10.78125 L 10.78125 12.21875 L 14.5625 16 L 10.78125 19.78125 L 12.21875 21.21875 L 16 17.4375 L 19.78125 21.21875 L 21.21875 19.78125 L 17.4375 16 L 21.21875 12.21875 L 19.78125 10.78125 L 16 14.5625 Z"></path></svg></button></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-WWJ8XD0QP0"></script><script> function gaOptout(){document.cookie=disableStr+'=true; expires=Thu, 31 Dec 2099 23:59:59 UTC;path=/',window[disableStr]=!0}var gaProperty='G-WWJ8XD0QP0',disableStr='ga-disable-'+gaProperty;document.cookie.indexOf(disableStr+'=true')>-1&&(window[disableStr]=!0); if(!(navigator.doNotTrack == "1" || window.doNotTrack == "1")) { window.dataLayer = window.dataLayer || []; function gtag(){window.dataLayer && window.dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-WWJ8XD0QP0', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false}); } </script><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/docs/tools/babel";window.___webpackCompilationHash="ab312c53d28da8cb1d53";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-6cf8792d3fd1b18eec99.js"],"component---src-pages-404-js":["/component---src-pages-404-js-d948df6ffc2a2bd814b0.js"],"component---src-pages-docs-mdx-slug-js":["/component---src-pages-docs-mdx-slug-js-e52fced22fcbe36f6ba1.js"],"component---src-pages-index-js":["/component---src-pages-index-js-3dccc4da54986e095ec5.js"]};/*]]>*/</script><script src="/app-6cf8792d3fd1b18eec99.js" async=""></script><script src="/framework-0feea0ca81b9371e8a43.js" async=""></script><script src="/webpack-runtime-ec9882af4d487d7a91cd.js" async=""></script></body></html>