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="Jotai takes a bottom-up approach to global React state management with an atomic model inspired by Recoil. One can build state by combining atoms and renders are optimized based on atom dependency. This solves the extra re-render issue of React context and eliminates the need for memoization." 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="Jotai, primitive and flexible state management for React" data-gatsby-head="true"/><meta property="og:description" content="Jotai takes a bottom-up approach to global React state management with an atomic model inspired by Recoil. One can build state by combining atoms and renders are optimized based on atom dependency. This solves the extra re-render issue of React context and eliminates the need for memoization." 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" 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">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" 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"><header><div class="max-w-xs lg:hidden"><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 items-center space-x-4 sm:space-x-8 sm:px-16 lg:mt-0 lg:px-0"><div class="relative w-1/3 max-w-[215px] lg:w-1/4"><img src="https://cdn.candycode.com/jotai/jotai-mascot.png" title="Atomikku, the Jotai mascot" alt="Atomikku, the Jotai mascot"/><div class="absolute -right-2 -bottom-3 z-20 inline-flex h-10 w-10 items-center justify-center rounded-full bg-black text-lg font-black text-white shadow-md dark:bg-white dark:text-black dark:!shadow-none lg:-right-4 lg:-bottom-6 lg:h-[4.5rem] lg:w-[4.5rem] lg:text-[2rem]">v2</div></div><div class="relative w-2/3 space-y-4 rounded-xl bg-gray-100 p-4 text-sm leading-snug text-gray-800 dark:bg-gray-900 dark:text-gray-300 sm:text-base md:text-lg lg:w-3/4 lg:p-8 lg:leading-normal after:absolute after:left-0 after:top-1/2 after:w-0 after:h-0 after:-ml-6 after:-mt-4 after:border-solid after:border-transparent after:border-t-[16px] after:border-r-[24px] after:border-b-[16px] after:border-l-0 after:border-r-[#f5f5f5] after:dark:!border-r-[#171717]"><div>Welcome to Jotai v2!</div><div>Fully compatible with React 18 and the upcoming <code class="relative -top-px rounded px-1 py-0.5 text-sm lg:text-base bg-gray-200 text-black dark:bg-gray-700 dark:text-gray-200">use</code> hook. Now with a store interface that can be used outside of React.</div><div>Enjoy the new “Getting started” experience below!</div></div></div></header><div class="mt-12 space-y-12 lg:mt-24 lg:space-y-24 text-pretty"><div class="space-y-4"><div class="text-4xl font-bold tracking-tight text-black dark:text-gray-50 lg:text-7xl lg:text-gray-300">Introduction</div><p>Jotai takes an atomic approach to global React state management.</p><p>Build state by combining atoms and renders are automatically optimized based on atom dependency. This solves the extra re-render issue of React context, eliminates the need for memoization, and provides a similar developer experience to signals while maintaining a declarative programming model.</p><p>It scales from a simple <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">useState</code> replacement to an enterprise TypeScript application with complex requirements. Plus there are plenty of utilities and extensions to help you along the way!</p><p>Jotai is trusted in production at innovative companies like these.</p><div class="mx-auto grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6 2xl:-mx-6"><a href="https://about.meta.com/" target="_blank" rel="noreferrer" class="group relative flex aspect-video items-center justify-center rounded-lg bg-gray-100 px-6 transition duration-300 ease-in-out hover:!bg-black dark:bg-gray-900"><img src="https://cdn.candycode.com/jotai/logos/meta-current.svg" alt="" class="w-full opacity-50 transition duration-300 ease-in-out dark:invert"/><div class="absolute inset-0 flex h-full w-full items-center justify-center px-6 opacity-0 transition duration-300 ease-in-out group-hover:opacity-100 text-white"><img src="https://cdn.candycode.com/jotai/logos/meta-color.svg" alt="" class="w-full" aria-hidden="true"/></div></a><a href="https://candycode.com/" target="_blank" rel="noreferrer" class="group relative flex aspect-video items-center justify-center rounded-lg bg-gray-100 px-6 transition duration-300 ease-in-out hover:!bg-black dark:bg-gray-900"><img src="https://cdn.candycode.com/jotai/logos/candycode-current.svg" alt="candycode alternative graphic design web development agency" class="aspect-[16/9] w-full opacity-50 transition duration-300 ease-in-out dark:invert"/><div class="absolute inset-0 flex h-full w-full items-center justify-center px-6 opacity-0 transition duration-300 ease-in-out group-hover:opacity-100 text-white"><img src="https://cdn.candycode.com/jotai/logos/candycode-color.svg" alt="" class="aspect-[16/9] w-full" aria-hidden="true"/></div></a><a href="https://www.adobe.com/" target="_blank" rel="noreferrer" class="group relative flex aspect-video items-center justify-center rounded-lg bg-gray-100 px-6 transition duration-300 ease-in-out hover:!bg-black dark:bg-gray-900"><img src="https://cdn.candycode.com/jotai/logos/adobe-current.svg" alt="Adobe" class="w-full px-1 opacity-50 transition duration-300 ease-in-out dark:invert lg:px-2"/><div class="absolute inset-0 flex h-full w-full items-center justify-center px-6 opacity-0 transition duration-300 ease-in-out group-hover:opacity-100 text-white"><img src="https://cdn.candycode.com/jotai/logos/adobe-color.svg" alt="" class="w-full px-1 lg:px-2" aria-hidden="true"/></div></a><a href="https://ping.gg" target="_blank" rel="noreferrer" class="group relative flex aspect-video items-center justify-center rounded-lg bg-gray-100 px-6 transition duration-300 ease-in-out hover:!bg-black dark:bg-gray-900"><img src="https://cdn.candycode.com/jotai/logos/ping-current.svg" alt="Ping Labs" class="aspect-[24/9] w-full opacity-50 transition duration-300 ease-in-out dark:invert"/><div class="absolute inset-0 flex h-full w-full items-center justify-center px-6 opacity-0 transition duration-300 ease-in-out group-hover:opacity-100 text-white"><img src="https://cdn.candycode.com/jotai/logos/ping-color.svg" alt="" class="aspect-[24/9] w-full" aria-hidden="true"/></div></a><a href="https://www.tiktok.com/" target="_blank" rel="noreferrer" class="group relative flex aspect-video items-center justify-center rounded-lg bg-gray-100 px-6 transition duration-300 ease-in-out hover:!bg-black dark:bg-gray-900"><img src="https://cdn.candycode.com/jotai/logos/tiktok-current.svg" alt="TokTok" class="w-full px-1 opacity-50 transition duration-300 ease-in-out dark:invert lg:px-2"/><div class="absolute inset-0 flex h-full w-full items-center justify-center px-6 opacity-0 transition duration-300 ease-in-out group-hover:opacity-100 text-white"><img src="https://cdn.candycode.com/jotai/logos/tiktok-color.svg" alt="" class="w-full px-1 lg:px-2" aria-hidden="true"/></div></a><a href="https://uniswap.org/" target="_blank" rel="noreferrer" class="group relative flex aspect-video items-center justify-center rounded-lg bg-gray-100 px-6 transition duration-300 ease-in-out hover:!bg-black dark:bg-gray-900"><img src="https://cdn.candycode.com/jotai/logos/uniswap-current.svg" alt="Uniswap" class="aspect-[16/9] w-full opacity-50 transition duration-300 ease-in-out dark:invert"/><div class="absolute inset-0 flex h-full w-full items-center justify-center px-6 opacity-0 transition duration-300 ease-in-out group-hover:opacity-100 text-white"><img src="https://cdn.candycode.com/jotai/logos/uniswap-color.svg" alt="" class="aspect-[16/9] w-full" aria-hidden="true"/></div></a></div></div><div class="space-y-4"><div class="text-4xl font-bold tracking-tight text-black dark:text-gray-50 lg:text-7xl lg:text-gray-300">Getting started</div><p class="!mb-8">This walks you through the process of creating a simple Jotai application. It starts with installation, then explores the basics of the core API, and ends with server-side rendering in a React framework.</p><div class="space-y-12"><div><section><h2>Installation</h2><p>First add Jotai as a dependency to your React project.</p><pre class="prism-code language-bash notranslate"><div class="token-line"><span class="token comment"># npm</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token function">npm</span><span class="token plain"> </span><span class="token function">install</span><span class="token plain"> jotai</span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"></span><span class="token comment"># yarn</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token function">yarn</span><span class="token plain"> </span><span class="token function">add</span><span class="token plain"> jotai</span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"></span><span class="token comment"># pnpm</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token function">pnpm</span><span class="token plain"> </span><span class="token function">add</span><span class="token plain"> jotai</span></div></pre></section></div><div><section><h2>Create atoms</h2><p>First create primitive and derived atoms to build state.</p><h3>Primitive atoms</h3><p>A primitive atom can be any type: booleans, numbers, strings, objects, arrays, sets, maps, and so on.</p><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> atom </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'jotai'</span><span class="token plain"></span></div><div class="token-line"><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"> </span></div><div class="token-line"><span class="token plain"></span><span class="token keyword">const</span><span class="token plain"> countryAtom </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 string">'Japan'</span><span class="token punctuation">)</span><span class="token plain"></span></div><div class="token-line"><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"> citiesAtom </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 punctuation">[</span><span class="token string">'Tokyo'</span><span class="token punctuation">,</span><span class="token plain"> </span><span class="token string">'Kyoto'</span><span class="token punctuation">,</span><span class="token plain"> </span><span class="token string">'Osaka'</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></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">const</span><span class="token plain"> animeAtom </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 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 literal-property property">title</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'Ghost in the Shell'</span><span class="token punctuation">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token literal-property property">year</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1995</span><span class="token punctuation">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token literal-property property">watched</span><span class="token operator">:</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token plain"></span></div><div class="token-line"><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 literal-property property">title</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'Serial Experiments Lain'</span><span class="token punctuation">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token literal-property property">year</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">1998</span><span class="token punctuation">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token literal-property property">watched</span><span class="token operator">:</span><span class="token plain"> </span><span class="token boolean">false</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><span class="token punctuation">)</span></div></pre><h3>Derived atoms</h3><p>A derived atom can read from other atoms before returning its own value.</p><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token keyword">const</span><span class="token plain"> progressAtom </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 punctuation">(</span><span class="token parameter keyword">get</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow 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 keyword">const</span><span class="token plain"> anime </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function">get</span><span class="token punctuation">(</span><span class="token plain">animeAtom</span><span class="token punctuation">)</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token keyword control-flow">return</span><span class="token plain"> anime</span><span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> item</span><span class="token punctuation">.</span><span class="token property-access">watched</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">length</span><span class="token plain"> </span><span class="token operator">/</span><span class="token plain"> anime</span><span class="token punctuation">.</span><span class="token property-access">length</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token punctuation">}</span><span class="token punctuation">)</span></div></pre></section></div><div><section><h2>Use atoms</h2><p>Then use atoms within React components to read or write state.</p><h3>Read and write from same component</h3><p>When atoms are both read and written within the same component, use the combined <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">useAtom</code> hook for simplicity.</p><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> useAtom </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'jotai'</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"></span><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> animeAtom </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'./atoms'</span><span class="token plain"></span></div><div class="token-line"><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"> </span><span class="token function-variable function maybe-class-name">AnimeApp</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow 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 keyword">const</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token plain">anime</span><span class="token punctuation">,</span><span class="token plain"> setAnime</span><span class="token punctuation">]</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function">useAtom</span><span class="token punctuation">(</span><span class="token plain">animeAtom</span><span class="token punctuation">)</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"> </span><span class="token keyword control-flow">return</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 tag punctuation"><</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"><</span><span class="token tag">ul</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token plain">anime</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow 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 tag punctuation"><</span><span class="token tag">li</span><span class="token tag"> </span><span class="token tag attr-name">key</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript">item</span><span class="token tag script language-javascript punctuation">.</span><span class="token tag script language-javascript property-access">title</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag punctuation">></span><span class="token punctuation">{</span><span class="token plain">item</span><span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span><span class="token tag punctuation"></</span><span class="token tag">li</span><span class="token tag 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 punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"></</span><span class="token tag">ul</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"><</span><span class="token tag">button</span><span class="token tag"> </span><span class="token tag attr-name">onClick</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript punctuation">(</span><span class="token tag script language-javascript punctuation">)</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript arrow operator">=></span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript function">setAnime</span><span class="token tag script language-javascript punctuation">(</span><span class="token tag script language-javascript punctuation">(</span><span class="token tag script language-javascript parameter">anime</span><span class="token tag script language-javascript punctuation">)</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript arrow operator">=></span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript punctuation">[</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript spread operator">...</span><span class="token tag script language-javascript">anime</span><span class="token tag script language-javascript punctuation">,</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript literal-property property">title</span><span class="token tag script language-javascript operator">:</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript string">'Cowboy Bebop'</span><span class="token tag script language-javascript punctuation">,</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript literal-property property">year</span><span class="token tag script language-javascript operator">:</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript number">1998</span><span class="token tag script language-javascript punctuation">,</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript literal-property property">watched</span><span class="token tag script language-javascript operator">:</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript boolean">false</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript punctuation">}</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript punctuation">]</span><span class="token tag script language-javascript punctuation">)</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript punctuation">}</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> Add Cowboy Bebop</span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"></</span><span class="token tag">button</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"></</span><span class="token tag 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><h3>Read and write from separate components</h3><p>When atom values are only read or written, use the separate <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">useAtomValue</code> and <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">useSetAtom</code> hooks to optimize re-renders.</p><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> useAtomValue</span><span class="token imports punctuation">,</span><span class="token imports"> useSetAtom </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'jotai'</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"></span><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> animeAtom </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'./atoms'</span><span class="token plain"></span></div><div class="token-line"><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"> </span><span class="token function-variable function maybe-class-name">AnimeList</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow 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 keyword">const</span><span class="token plain"> anime </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function">useAtomValue</span><span class="token punctuation">(</span><span class="token plain">animeAtom</span><span class="token punctuation">)</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"> </span><span class="token keyword control-flow">return</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 tag punctuation"><</span><span class="token tag">ul</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token plain">anime</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow 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 tag punctuation"><</span><span class="token tag">li</span><span class="token tag"> </span><span class="token tag attr-name">key</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript">item</span><span class="token tag script language-javascript punctuation">.</span><span class="token tag script language-javascript property-access">title</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag punctuation">></span><span class="token punctuation">{</span><span class="token plain">item</span><span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span><span class="token tag punctuation"></</span><span class="token tag">li</span><span class="token tag 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 punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"></</span><span class="token tag">ul</span><span class="token tag 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><span class="token plain"></span></div><div class="token-line"><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"> </span><span class="token function-variable function maybe-class-name">AddAnime</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow 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 keyword">const</span><span class="token plain"> setAnime </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function">useSetAtom</span><span class="token punctuation">(</span><span class="token plain">animeAtom</span><span class="token punctuation">)</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"> </span><span class="token keyword control-flow">return</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 tag punctuation"><</span><span class="token tag">button</span><span class="token tag"> </span><span class="token tag attr-name">onClick</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript punctuation">(</span><span class="token tag script language-javascript punctuation">)</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript arrow operator">=></span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript function">setAnime</span><span class="token tag script language-javascript punctuation">(</span><span class="token tag script language-javascript punctuation">(</span><span class="token tag script language-javascript parameter">anime</span><span class="token tag script language-javascript punctuation">)</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript arrow operator">=></span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript punctuation">[</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript spread operator">...</span><span class="token tag script language-javascript">anime</span><span class="token tag script language-javascript punctuation">,</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript literal-property property">title</span><span class="token tag script language-javascript operator">:</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript string">'Cowboy Bebop'</span><span class="token tag script language-javascript punctuation">,</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript literal-property property">year</span><span class="token tag script language-javascript operator">:</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript number">1998</span><span class="token tag script language-javascript punctuation">,</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript literal-property property">watched</span><span class="token tag script language-javascript operator">:</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript boolean">false</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript punctuation">}</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript punctuation">]</span><span class="token tag script language-javascript punctuation">)</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript punctuation">}</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> Add Cowboy Bebop</span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"></</span><span class="token tag">button</span><span class="token tag 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><span class="token plain"></span></div><div class="token-line"><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"> </span><span class="token function-variable function maybe-class-name">ProgressTracker</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow 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 keyword">const</span><span class="token plain"> progress </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function">useAtomValue</span><span class="token punctuation">(</span><span class="token plain">progressAtom</span><span class="token punctuation">)</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"> </span><span class="token keyword control-flow">return</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 tag punctuation"><</span><span class="token tag">div</span><span class="token tag punctuation">></span><span class="token punctuation">{</span><span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">trunc</span><span class="token punctuation">(</span><span class="token plain">progress </span><span class="token operator">*</span><span class="token plain"> </span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">% watched</span><span class="token tag punctuation"></</span><span class="token tag">div</span><span class="token tag 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><span class="token plain"></span></div><div class="token-line"><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"> </span><span class="token function-variable function maybe-class-name">AnimeApp</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow 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 keyword control-flow">return</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 tag punctuation"><</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"><</span><span class="token tag class-name">AnimeList</span><span class="token tag"> </span><span class="token tag punctuation">/></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"><</span><span class="token tag class-name">AddAnime</span><span class="token tag"> </span><span class="token tag punctuation">/></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"><</span><span class="token tag class-name">ProgressTracker</span><span class="token tag"> </span><span class="token tag punctuation">/></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"></</span><span class="token tag 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></section></div><div><section><h2>Server-side rendering</h2><p>If server-side rendering with a framework such as <a href="https://nextjs.org" target="_blank" rel="noreferrer">Next.js</a> or <a href="https://waku.gg" target="_blank" rel="noreferrer">Waku</a>, make sure to add a Jotai Provider component at the root.</p><h3>Next.js (app directory)</h3><p>Create the provider in a separate client component. Then import the provider into the root <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">layout.js</code> server component.</p><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token comment">// ./components/providers.js</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token string">'use client'</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"></span><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Provider</span><span class="token imports"> </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'jotai'</span><span class="token plain"></span></div><div class="token-line"><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">const</span><span class="token plain"> </span><span class="token function-variable function maybe-class-name">Providers</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token parameter punctuation">{</span><span class="token parameter"> children </span><span class="token parameter punctuation">}</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow 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 keyword control-flow">return</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 tag punctuation"><</span><span class="token tag class-name">Provider</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token plain">children</span><span class="token punctuation">}</span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"></</span><span class="token tag class-name">Provider</span><span class="token tag 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><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"></span><span class="token comment">// ./app/layout.js</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Providers</span><span class="token imports"> </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'../components/providers'</span><span class="token plain"></span></div><div class="token-line"><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 keyword">function</span><span class="token plain"> </span><span class="token function maybe-class-name">RootLayout</span><span class="token punctuation">(</span><span class="token parameter punctuation">{</span><span class="token parameter"> children </span><span class="token parameter punctuation">}</span><span class="token punctuation">)</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 keyword control-flow">return</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 tag punctuation"><</span><span class="token tag">html</span><span class="token tag"> </span><span class="token tag attr-name">lang</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">en</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"><</span><span class="token tag">body</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"><</span><span class="token tag class-name">Providers</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token plain">children</span><span class="token punctuation">}</span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"></</span><span class="token tag class-name">Providers</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"></</span><span class="token tag">body</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"></</span><span class="token tag">html</span><span class="token tag 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><h3>Next.js (pages directory)</h3><p>Create the provider in <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">_app.js</code>.</p><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token comment">// ./pages/_app.js</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Provider</span><span class="token imports"> </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'jotai'</span><span class="token plain"></span></div><div class="token-line"><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 keyword">function</span><span class="token plain"> </span><span class="token function maybe-class-name">App</span><span class="token punctuation">(</span><span class="token parameter punctuation">{</span><span class="token parameter"> </span><span class="token parameter maybe-class-name">Component</span><span class="token parameter punctuation">,</span><span class="token parameter"> pageProps </span><span class="token parameter punctuation">}</span><span class="token punctuation">)</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 keyword control-flow">return</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 tag punctuation"><</span><span class="token tag class-name">Provider</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"><</span><span class="token tag class-name">Component</span><span class="token tag"> </span><span class="token tag spread punctuation">{</span><span class="token tag spread operator">...</span><span class="token tag spread">pageProps</span><span class="token tag spread punctuation">}</span><span class="token tag"> </span><span class="token tag punctuation">/></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"></</span><span class="token tag class-name">Provider</span><span class="token tag 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><h3>Waku</h3><p>Create the provider in a separate client component. Then import the provider into the root layout.</p><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token comment">// ./src/components/providers.js</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token string">'use client'</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"></span><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Provider</span><span class="token imports"> </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'jotai'</span><span class="token plain"></span></div><div class="token-line"><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">const</span><span class="token plain"> </span><span class="token function-variable function maybe-class-name">Providers</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token parameter punctuation">{</span><span class="token parameter"> children </span><span class="token parameter punctuation">}</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow 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 keyword control-flow">return</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 tag punctuation"><</span><span class="token tag class-name">Provider</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token plain">children</span><span class="token punctuation">}</span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"></</span><span class="token tag class-name">Provider</span><span class="token tag 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><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"></span><span class="token comment">// ./src/pages/_layout.js</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Providers</span><span class="token imports"> </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'../components/providers'</span><span class="token plain"></span></div><div class="token-line"><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 keyword">async</span><span class="token plain"> </span><span class="token keyword">function</span><span class="token plain"> </span><span class="token function maybe-class-name">RootLayout</span><span class="token punctuation">(</span><span class="token parameter punctuation">{</span><span class="token parameter"> children </span><span class="token parameter punctuation">}</span><span class="token punctuation">)</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 keyword control-flow">return</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 tag punctuation"><</span><span class="token tag class-name">Providers</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token plain">children</span><span class="token punctuation">}</span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"></</span><span class="token tag class-name">Providers</span><span class="token tag 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></section></div></div></div><div class="space-y-4"><div class="text-4xl font-bold tracking-tight text-black dark:text-gray-50 lg:text-7xl lg:text-gray-300">API overview</div><div class="space-y-12"><div><section><h2>Core</h2><p>Jotai has a very minimal API and is TypeScript oriented. It is as simple to use as React’s integrated <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">useState</code> hook, but all state is globally accessible, derived state is easy to implement, and unnecessary re-renders are automatically eliminated.</p><div class="py-8 text-sm"><div class="flex items-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-lg focus-within:ring focus-within:ring-blue-400 dark:border-gray-800 dark:bg-gray-950 dark:focus-within:ring-teal-700"><input class="w-full bg-transparent focus:!ring-transparent !border-none" value="hello"/><span class="flex-shrink-0 font-bold">HELLO</span></div></div><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> atom</span><span class="token imports punctuation">,</span><span class="token imports"> useAtom </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'jotai'</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"></span><span class="token comment">// Create your atoms and derivatives</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"> textAtom </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 string">'hello'</span><span class="token punctuation">)</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"> uppercaseAtom </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 plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation">(</span><span class="token parameter keyword">get</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> </span><span class="token function">get</span><span class="token punctuation">(</span><span class="token plain">textAtom</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toUpperCase</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></div><div class="token-line"><span class="token plain"></span><span class="token comment">// Use them anywhere in your app</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"> </span><span class="token function-variable function maybe-class-name">Input</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow 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 keyword">const</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token plain">text</span><span class="token punctuation">,</span><span class="token plain"> setText</span><span class="token punctuation">]</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function">useAtom</span><span class="token punctuation">(</span><span class="token plain">textAtom</span><span class="token punctuation">)</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"> </span><span class="token function-variable function">handleChange</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> </span><span class="token function">setText</span><span class="token punctuation">(</span><span class="token plain">e</span><span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token keyword control-flow">return</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 tag punctuation"><</span><span class="token tag">input</span><span class="token tag"> </span><span class="token tag attr-name">value</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript">text</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag"> </span><span class="token tag attr-name">onChange</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript">handleChange</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag"> </span><span class="token tag 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><span class="token plain"></span></div><div class="token-line"><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"> </span><span class="token function-variable function maybe-class-name">Uppercase</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow 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 keyword">const</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token plain">uppercase</span><span class="token punctuation">]</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function">useAtom</span><span class="token punctuation">(</span><span class="token plain">uppercaseAtom</span><span class="token punctuation">)</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token keyword control-flow">return</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 tag punctuation"><</span><span class="token tag">div</span><span class="token tag punctuation">></span><span class="token plain-text">Uppercase: </span><span class="token punctuation">{</span><span class="token plain">uppercase</span><span class="token punctuation">}</span><span class="token tag punctuation"></</span><span class="token tag">div</span><span class="token tag 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><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"></span><span class="token comment">// Now you have the components</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"> </span><span class="token function-variable function maybe-class-name">App</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow 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 keyword control-flow">return</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 tag punctuation"><</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"><</span><span class="token tag class-name">Input</span><span class="token tag"> </span><span class="token tag punctuation">/></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"><</span><span class="token tag class-name">Uppercase</span><span class="token tag"> </span><span class="token tag punctuation">/></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"></</span><span class="token tag 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></section></div><div><section><h2>Utilities</h2><p>The Jotai package also includes 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">jotai/utils</code> bundle. These extra functions add support for persisting an atom in localStorage, hydrating an atom during server-side rendering, creating atoms with Redux-like reducers and action types, and much more.</p><div class="py-8"></div><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> useAtom </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'jotai'</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> atomWithStorage </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'jotai/utils'</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"></span><span class="token comment">// Set the string key and the initial value</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"> darkModeAtom </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function">atomWithStorage</span><span class="token punctuation">(</span><span class="token string">'darkMode'</span><span class="token punctuation">,</span><span class="token plain"> </span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token plain"></span></div><div class="token-line"><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"> </span><span class="token function-variable function maybe-class-name">Page</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow 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 comment">// Consume persisted state like any other atom</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"> </span><span class="token punctuation">[</span><span class="token plain">darkMode</span><span class="token punctuation">,</span><span class="token plain"> setDarkMode</span><span class="token punctuation">]</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function">useAtom</span><span class="token punctuation">(</span><span class="token plain">darkModeAtom</span><span class="token punctuation">)</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"> </span><span class="token function-variable function">toggleDarkMode</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> </span><span class="token function">setDarkMode</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token plain">darkMode</span><span class="token punctuation">)</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token keyword control-flow">return</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 tag punctuation"><</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"><</span><span class="token tag">h1</span><span class="token tag punctuation">></span><span class="token plain-text">Welcome to </span><span class="token punctuation">{</span><span class="token plain">darkMode </span><span class="token operator">?</span><span class="token plain"> </span><span class="token string">'dark'</span><span class="token plain"> </span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'light'</span><span class="token punctuation">}</span><span class="token plain-text"> mode!</span><span class="token tag punctuation"></</span><span class="token tag">h1</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"><</span><span class="token tag">button</span><span class="token tag"> </span><span class="token tag attr-name">onClick</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript">toggleDarkMode</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag punctuation">></span><span class="token plain-text">toggle theme</span><span class="token tag punctuation"></</span><span class="token tag">button</span><span class="token tag punctuation">></span><span class="token plain-text"></span></div><div class="token-line"><span class="token plain-text"> </span><span class="token tag punctuation"></</span><span class="token tag 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></section></div><div><section><h2>Extensions</h2><p>There are also separate packages for each official extension: tRPC, Immer, Query, XState, URQL, Optics, Relay, location, molecules, cache, and more.</p><p>Some extensions provide new atom types with alternate write functions such as <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">atomWithImmer</code> (Immer) or <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">atomWithMachine</code> (XState).</p><p>Others provide new atom types with two-way data binding such as <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">atomWithLocation</code> or <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">atomWithHash</code>.</p><div class="flex items-center space-x-8 pt-4 lg:pt-8 lg:pb-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-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 focus:ring"><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 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 15 10 L 15 15 L 10 15 L 10 17 L 15 17 L 15 22 L 17 22 L 17 17 L 22 17 L 22 15 L 17 15 L 17 10 Z"></path></svg><span>Increment</span></button><span class="text-3xl font-bold ordinal slashed-zero tabular-nums">0</span></div><pre class="prism-code language-jsx notranslate"><div class="token-line"><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> useAtom </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'jotai'</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token keyword module">import</span><span class="token plain"> </span><span class="token imports punctuation">{</span><span class="token imports"> atomWithImmer </span><span class="token imports punctuation">}</span><span class="token plain"> </span><span class="token keyword module">from</span><span class="token plain"> </span><span class="token string">'jotai-immer'</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"></span><span class="token comment">// Create a new atom with an immer-based write function</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">atomWithImmer</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"> </span></div><div class="token-line"><span class="token plain"></span><span class="token keyword">const</span><span class="token plain"> </span><span class="token function-variable function maybe-class-name">Counter</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow 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 keyword">const</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token plain">count</span><span class="token punctuation">]</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function">useAtom</span><span class="token punctuation">(</span><span class="token plain">countAtom</span><span class="token punctuation">)</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token keyword control-flow">return</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 tag punctuation"><</span><span class="token tag">div</span><span class="token tag punctuation">></span><span class="token plain-text">count: </span><span class="token punctuation">{</span><span class="token plain">count</span><span class="token punctuation">}</span><span class="token tag punctuation"></</span><span class="token tag">div</span><span class="token tag 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><span class="token plain"></span></div><div class="token-line"><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"> </span><span class="token function-variable function maybe-class-name">Controls</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow 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 comment">// setCount === update: (draft: Draft<Value>) => void</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"> </span><span class="token punctuation">[</span><span class="token punctuation">,</span><span class="token plain"> setCount</span><span class="token punctuation">]</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token function">useAtom</span><span class="token punctuation">(</span><span class="token plain">countAtom</span><span class="token punctuation">)</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"> </span><span class="token function-variable function">increment</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> </span><span class="token function">setCount</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">c</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token plain">c </span><span class="token operator">=</span><span class="token plain"> c </span><span class="token operator">+</span><span class="token plain"> </span><span class="token number">1</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 keyword control-flow">return</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 tag punctuation"><</span><span class="token tag">button</span><span class="token tag"> </span><span class="token tag attr-name">onClick</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript">increment</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag punctuation">></span><span class="token plain-text">+1</span><span class="token tag punctuation"></</span><span class="token tag">button</span><span class="token tag 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></section></div></div></div><div class="space-y-4"><div class="text-4xl font-bold tracking-tight text-black dark:text-gray-50 lg:text-7xl lg:text-gray-300">Learn more</div><p>Check out the free Egghead course by Daishi, the creator of Jotai.</p><a href="https://egghead.io/courses/manage-application-state-with-jotai-atoms-2c3a29f0" target="_blank" rel="noreferrer" class="mt-4 block"><img src="https://cdn.candycode.com/jotai/jotai-course-banner.jpg" class="block rounded-md shadow-lg dark:!shadow-none sm:rounded-lg" alt="Jotai course" title="Jotai course"/></a></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="/";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>