{"version":1,"pages":[{"id":"-L_3P322RwKZSYEurYHa","title":"Atomico","pathname":"/doc","siteSpaceId":"sitesp_cKR1R","icon":"hand-wave","description":"A micro library inspired by React Hooks, designed and optimized for the creation of webcomponents."},{"id":"-MkzOrHnRpCS63QOI7og","title":"Getting started with Atomico","pathname":"/doc/getting-started-with-atomico","siteSpaceId":"sitesp_cKR1R","icon":"rocket-launch","description":"This guide will know the essentials to start developing webcomponents with Atomico"},{"id":"QFHZ3CclZipAoFtdyAEn","title":"Getting started with Atomico for React users","pathname":"/doc/getting-started-with-atomico-for-react-users","siteSpaceId":"sitesp_cKR1R","icon":"atom","description":"Hi, I'm Atomico js and I bring you the React syntax for webcomponents, I think you and I get along very well 😊."},{"id":"rYcaOb0zpOAtBtpHUCL8","title":"What can you do with Atomico?","pathname":"/doc/what-can-you-do-with-atomico","siteSpaceId":"sitesp_cKR1R","icon":"lightbulb-exclamation-on","description":"With Atomico you can do this and more"},{"id":"Z3ONxFLj4hND9vRGID69","title":"You can create amazing webcomponents","pathname":"/doc/what-can-you-do-with-atomico/you-can-create-amazing-webcomponents","siteSpaceId":"sitesp_cKR1R","description":"Atomico makes it easy to build components with less code, better readability, and better reusability.","breadcrumbs":[{"label":"What can you do with Atomico?","icon":"lightbulb-exclamation-on"}]},{"id":"r6w3A37Xbhr3t6LrmOE1","title":"You can create design systems","pathname":"/doc/what-can-you-do-with-atomico/you-can-create-design-systems","siteSpaceId":"sitesp_cKR1R","description":"Today Atomico is used in the development of design systems for various industries such as Banking, Pledge Systems, Insurance, Clinical, Government and more.","breadcrumbs":[{"label":"What can you do with Atomico?","icon":"lightbulb-exclamation-on"}]},{"id":"tK2qBtr9ysMBSKS9OHgT","title":"You can create websites","pathname":"/doc/what-can-you-do-with-atomico/you-can-create-websites","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"What can you do with Atomico?","icon":"lightbulb-exclamation-on"}]},{"id":"NhsTBSceApl7pMzd9HsL","title":"You can create mobile applications","pathname":"/doc/what-can-you-do-with-atomico/you-can-create-mobile-applications","siteSpaceId":"sitesp_cKR1R","description":"working on this documentation...","breadcrumbs":[{"label":"What can you do with Atomico?","icon":"lightbulb-exclamation-on"}]},{"id":"MV79gSbczgW2edWBFvEU","title":"You can create web applications","pathname":"/doc/what-can-you-do-with-atomico/you-can-create-web-applications","siteSpaceId":"sitesp_cKR1R","description":"working on this documentation...","breadcrumbs":[{"label":"What can you do with Atomico?","icon":"lightbulb-exclamation-on"}]},{"id":"-MTZ5fCGbEnPvhLpx02m","title":"Props(Properties)","pathname":"/doc/api/props","siteSpaceId":"sitesp_cKR1R","icon":"dna","description":"The props in Atomico are the way to associate the webcomponent properties and reactive attributes that trigger the logic or interface of the webcomponent.","breadcrumbs":[{"label":"API"}]},{"id":"uE69hyaYyOtErdMI9DFI","title":"Value cycle as prop","pathname":"/doc/api/props/value-cycle-as-prop","siteSpaceId":"sitesp_cKR1R","description":"Atomico has a really efficient and simple type validation method, the type validation works in the following way:","breadcrumbs":[{"label":"API"},{"label":"Props(Properties)","icon":"dna"}]},{"id":"-MTZ5fCQIT8XbLyYSQDR","title":"VirtualDOM","pathname":"/doc/api/virtualdom","siteSpaceId":"sitesp_cKR1R","icon":"puzzle-piece","description":"Atomico's virtualDOM is designed to enhance the use of webcomponents.","breadcrumbs":[{"label":"API"}]},{"id":"-McNIAUTh1BF_57fwsA7","title":"Advanced","pathname":"/doc/api/virtualdom/advanced","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"API"},{"label":"VirtualDOM","icon":"puzzle-piece"}]},{"id":"-MTZ5fCH4ksfSNAIzbT2","title":"Hooks","pathname":"/doc/api/hooks","siteSpaceId":"sitesp_cKR1R","icon":"fishing-rod","description":"Improves the experience of reusing logic between webcomponents based on Atomico","breadcrumbs":[{"label":"API"}]},{"id":"-MTZ5fCIiAlTPnkvYfJ3","title":"useProp","pathname":"/doc/api/hooks/useprop","siteSpaceId":"sitesp_cKR1R","description":"Reactivity in the scope of the webcomponent without the use of context(this)","breadcrumbs":[{"label":"API"},{"label":"Hooks","icon":"fishing-rod"}]},{"id":"-MTZ5fCJKRlRS1Bpi_BT","title":"useEvent","pathname":"/doc/api/hooks/useevent","siteSpaceId":"sitesp_cKR1R","description":"Dispatch events from the webcomponent without referencing the context(this)","breadcrumbs":[{"label":"API"},{"label":"Hooks","icon":"fishing-rod"}]},{"id":"-MTZ5fCNTweVKk9M8jgz","title":"useRef","pathname":"/doc/api/hooks/useref","siteSpaceId":"sitesp_cKR1R","description":"Create a persistent object between renders to capture from a node from VirtualDOM","breadcrumbs":[{"label":"API"},{"label":"Hooks","icon":"fishing-rod"}]},{"id":"-MTZ5fCKEQHcP2tIHATI","title":"useHost","pathname":"/doc/api/hooks/usehost","siteSpaceId":"sitesp_cKR1R","description":"Hook that creates a reference that curren is the instance of the webcomponent.","breadcrumbs":[{"label":"API"},{"label":"Hooks","icon":"fishing-rod"}]},{"id":"-MTZ5fCLfXeiMmLlb33a","title":"useState","pathname":"/doc/api/hooks/usestate","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"API"},{"label":"Hooks","icon":"fishing-rod"}]},{"id":"-MTZ5fCMGH0inbROauka","title":"useReducer","pathname":"/doc/api/hooks/usereducer","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"API"},{"label":"Hooks","icon":"fishing-rod"}]},{"id":"-MTZ5fCOpMInNsfGTgGY","title":"useEffect, useLayoutEffect and useInsertionEffect","pathname":"/doc/api/hooks/useeffect-y-uselayouteffect","siteSpaceId":"sitesp_cKR1R","description":"Allows to run side effects after rendering","breadcrumbs":[{"label":"API"},{"label":"Hooks","icon":"fishing-rod"}]},{"id":"-MTZ5fCPatT6T56JeEaN","title":"useMemo and useCallback","pathname":"/doc/api/hooks/usememo-y-usecallback","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"API"},{"label":"Hooks","icon":"fishing-rod"}]},{"id":"-Mkwp33SLVgVfy0qkilq","title":"useUpdate","pathname":"/doc/api/hooks/useupdate","siteSpaceId":"sitesp_cKR1R","description":"Force an update, ideal for working with references","breadcrumbs":[{"label":"API"},{"label":"Hooks","icon":"fishing-rod"}]},{"id":"RDLDpxmMwWHCaQkfPPWY","title":"useId","pathname":"/doc/api/hooks/useid","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"API"},{"label":"Hooks","icon":"fishing-rod"}]},{"id":"8kW030mxIe5DZX6irP3V","title":"useContext","pathname":"/doc/api/hooks/usecontext","siteSpaceId":"sitesp_cKR1R","description":"Since version Atomico@1.62.0  has introduced a context api as part of the core.","breadcrumbs":[{"label":"API"},{"label":"Hooks","icon":"fishing-rod"}]},{"id":"UVQuz1fanJ05vn0gmf6E","title":"useProvider","pathname":"/doc/api/hooks/usecontext/useprovider","siteSpaceId":"sitesp_cKR1R","description":"Allows the host that instantiates this useProvider to become the context.","breadcrumbs":[{"label":"API"},{"label":"Hooks","icon":"fishing-rod"},{"label":"useContext"}]},{"id":"LNKBr1ttVQhyx3ruOVlJ","title":"usePromise","pathname":"/doc/api/hooks/usepromise","siteSpaceId":"sitesp_cKR1R","description":"Easily observe asynchronous processes","breadcrumbs":[{"label":"API"},{"label":"Hooks","icon":"fishing-rod"}]},{"id":"qyZhWvDn7OmoQHzu9iQz","title":"useAsync and useSuspense","pathname":"/doc/api/hooks/useasync-and-usesuspense","siteSpaceId":"sitesp_cKR1R","description":"suspend the execution of a render until the resolution of an asynchronous process","breadcrumbs":[{"label":"API"},{"label":"Hooks","icon":"fishing-rod"}]},{"id":"DdyqBV5eIiThFvnB6AbX","title":"useAbortController","pathname":"/doc/api/hooks/useabortcontroller","siteSpaceId":"sitesp_cKR1R","description":"Atomico now introduces a new hook called useAbortController, which allows aborting the execution of asynchronous calls, example:","breadcrumbs":[{"label":"API"},{"label":"Hooks","icon":"fishing-rod"}]},{"id":"-MTZ5fCRmbErZoohnSyL","title":"Testing","pathname":"/doc/api/testing","siteSpaceId":"sitesp_cKR1R","icon":"microscope","description":"","breadcrumbs":[{"label":"API"}]},{"id":"-MTZ5fCSlfiMX2bfAZak","title":"Render cycle","pathname":"/doc/api/testing/test-dom","siteSpaceId":"sitesp_cKR1R","description":"Atomico optimizes the execution of your script by minimizing resources through the rendering control.","breadcrumbs":[{"label":"API"},{"label":"Testing","icon":"microscope"}]},{"id":"-MTZ5fCTTZ5eFKyIr5Ho","title":"atomico/test-hooks","pathname":"/doc/api/testing/test-hooks","siteSpaceId":"sitesp_cKR1R","description":"Build test to custom hooks created with Atomico with an isolated instance and predictable","breadcrumbs":[{"label":"API"},{"label":"Testing","icon":"microscope"}]},{"id":"-MbbnLgWqLTkwQViLOPZ","title":"atomico/test-dom","pathname":"/doc/api/testing/atomico-test-dom","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"API"},{"label":"Testing","icon":"microscope"}]},{"id":"kykzFDpg4jlmG86ly5uw","title":"Frequent questions","pathname":"/doc/guides/frequent-questions","siteSpaceId":"sitesp_cKR1R","emoji":"1f914","description":"","breadcrumbs":[{"label":"Guides"}]},{"id":"U9sTl9Xlg6prilXqZHr5","title":"Is it advisable to declare events using the props API?","pathname":"/doc/guides/frequent-questions/is-it-advisable-to-declare-events-using-the-props-api","siteSpaceId":"sitesp_cKR1R","description":"It is not recommended to use the props API to create an event, as this callback associated as props will have the following limitations:","breadcrumbs":[{"label":"Guides"},{"label":"Frequent questions","emoji":"1f914"}]},{"id":"xh5sNrmkFJoi8kmgMTsU","title":"How to declare events for your component at the type level for TSX?","pathname":"/doc/guides/frequent-questions/how-to-declare-events-for-your-component-at-the-type-level-for-tsx","siteSpaceId":"sitesp_cKR1R","breadcrumbs":[{"label":"Guides"},{"label":"Frequent questions","emoji":"1f914"}]},{"id":"b39ra5iG907r6z90QGGm","title":"When and why to use shadowDom?","pathname":"/doc/guides/frequent-questions/when-and-why-to-use-shadowdom","siteSpaceId":"sitesp_cKR1R","breadcrumbs":[{"label":"Guides"},{"label":"Frequent questions","emoji":"1f914"}]},{"id":"klDFeGcL7b7x5ufEWwcI","title":"Can I use Atomico in browsers without ESM support?","pathname":"/doc/guides/frequent-questions/page","siteSpaceId":"sitesp_cKR1R","breadcrumbs":[{"label":"Guides"},{"label":"Frequent questions","emoji":"1f914"}]},{"id":"WEa8YZVAYTl9v3tyKZP4","title":"Component","pathname":"/doc/guides/component","siteSpaceId":"sitesp_cKR1R","emoji":"1f929","description":"Working on this documentation...","breadcrumbs":[{"label":"Guides"}]},{"id":"scl91LSdhQORwESpxBDx","title":"Naming","pathname":"/doc/guides/component/naming","siteSpaceId":"sitesp_cKR1R","description":"Simple but useful","breadcrumbs":[{"label":"Guides"},{"label":"Component","emoji":"1f929"}]},{"id":"lytyB7QAjn0Y0WxPNfpA","title":"CSS Styles with Shadow DOM","pathname":"/doc/guides/component/css-styles-with-shadow-dom","siteSpaceId":"sitesp_cKR1R","description":"Working on this documentation...","breadcrumbs":[{"label":"Guides"},{"label":"Component","emoji":"1f929"}]},{"id":"6JHuKHNyMxK7ElY6075y","title":"Atomico with Typescript","pathname":"/doc/guides/atomico-with-typescript","siteSpaceId":"sitesp_cKR1R","emoji":"1f6e1","description":"Atomico with Typescript will improve the scalability of your project thanks to a really productive type system when creating, distributing and maintaining webcomponents","breadcrumbs":[{"label":"Guides"}]},{"id":"kIYg6dfWACFb8UP5Ega2","title":"Props","pathname":"/doc/guides/atomico-with-typescript/props","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"Guides"},{"label":"Atomico with Typescript","emoji":"1f6e1"}]},{"id":"-MY1eesu3FODBUCVc5FO","title":"Component","pathname":"/doc/guides/atomico-with-typescript/typescript","siteSpaceId":"sitesp_cKR1R","description":"Type to structure a component from its creation","breadcrumbs":[{"label":"Guides"},{"label":"Atomico with Typescript","emoji":"1f6e1"}]},{"id":"1a3Kc0jXyASNGznX6XXC","title":"Meta-types","pathname":"/doc/guides/atomico-with-typescript/meta-types","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"Guides"},{"label":"Atomico with Typescript","emoji":"1f6e1"}]},{"id":"AX98OiU5fMlU2DWrxUX3","title":"Type","pathname":"/doc/guides/atomico-with-typescript/meta-types/type","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"Guides"},{"label":"Atomico with Typescript","emoji":"1f6e1"},{"label":"Meta-types"}]},{"id":"r0mtduFyfGQhh3HH1TEs","title":"Event declaration","pathname":"/doc/guides/atomico-with-typescript/meta-types/declare-meta-types-to-the-component","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"Guides"},{"label":"Atomico with Typescript","emoji":"1f6e1"},{"label":"Meta-types"}]},{"id":"UrNuobKC4QcJEHSYmEQT","title":"Method declaration","pathname":"/doc/guides/atomico-with-typescript/meta-types/method-declaration","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"Guides"},{"label":"Atomico with Typescript","emoji":"1f6e1"},{"label":"Meta-types"}]},{"id":"Cc1whw4HYAwDmGB1mQ3I","title":"Check the correct use of hooks","pathname":"/doc/guides/atomico-with-typescript/check-the-correct-use-of-hooks","siteSpaceId":"sitesp_cKR1R","description":"By default most hooks infer types automatically, however here are some typing tips:","breadcrumbs":[{"label":"Guides"},{"label":"Atomico with Typescript","emoji":"1f6e1"}]},{"id":"vzd4vGSaXxC2Yay9bQkd","title":"Atomico and React","pathname":"/doc/guides/atomico-and-react","siteSpaceId":"sitesp_cKR1R","emoji":"1f91d","description":"","breadcrumbs":[{"label":"Guides"}]},{"id":"OX1mQnSe8LNSs2UmxkA1","title":"Integrating Atomico in React","pathname":"/doc/guides/atomico-and-react/integrating-atomico-in-react","siteSpaceId":"sitesp_cKR1R","breadcrumbs":[{"label":"Guides"},{"label":"Atomico and React","emoji":"1f91d"}]},{"id":"-MbXxX3gazw1frN83WDo","title":"From React to Atomico","pathname":"/doc/guides/atomico-and-react/from-react-to-atomico","siteSpaceId":"sitesp_cKR1R","description":"Atomico inherits part of the React syntax and applies it to webcomponents, with a closer to standard approach.","breadcrumbs":[{"label":"Guides"},{"label":"Atomico and React","emoji":"1f91d"}]},{"id":"EurMrDab3LtrWdXlVn3u","title":"Rendering Differences","pathname":"/doc/guides/atomico-and-react/from-react-to-atomico/rendering-differences","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"Guides"},{"label":"Atomico and React","emoji":"1f91d"},{"label":"From React to Atomico"}]},{"id":"-MkeRWHbkvTrkhXzuvn2","title":"VirtualDOM api differences","pathname":"/doc/guides/atomico-and-react/from-react-to-atomico/virtualdom-api-differences","siteSpaceId":"sitesp_cKR1R","description":"Guide that defines some differences that exist between Atomico and React when working with the DOM.","breadcrumbs":[{"label":"Guides"},{"label":"Atomico and React","emoji":"1f91d"},{"label":"From React to Atomico"}]},{"id":"OMzKG2sCHX7OGovDyuZG","title":"Atomico and Asynchrony","pathname":"/doc/guides/atomico-and-asynchrony","siteSpaceId":"sitesp_cKR1R","emoji":"23f3","description":"With Atomico, asynchrony is really easy thanks to the fact that they will allow you to know the status of the process or suspend the rendering of the component.","breadcrumbs":[{"label":"Guides"}]},{"id":"y6S44O7tUAQdr0kqt4xI","title":"Atomico design patterns","pathname":"/doc/guides/atomico-design-patterns","siteSpaceId":"sitesp_cKR1R","emoji":"1f9e0","description":"Atomico has been designed to be simple even in complex situations, in this guide you will know some patterns that Atomico offers to create webcomponents at an advanced level.","breadcrumbs":[{"label":"Guides"}]},{"id":"AcG7KNWvUHpCbW5RKuXM","title":"Webcomponents with hybrid rendering","pathname":"/doc/guides/atomico-design-patterns/webcomponents-with-hybrid-rendering","siteSpaceId":"sitesp_cKR1R","emoji":"267b","description":"Improve the interaction of your inputs with forms using hybrid rendering (LightDOM and ShadowDOM)","breadcrumbs":[{"label":"Guides"},{"label":"Atomico design patterns","emoji":"1f9e0"}]},{"id":"N5okHwZhsBe2tTkcq2HX","title":"Slot as templates","pathname":"/doc/guides/atomico-design-patterns/slot-as-templates","siteSpaceId":"sitesp_cKR1R","emoji":"1f517","description":"","breadcrumbs":[{"label":"Guides"},{"label":"Atomico design patterns","emoji":"1f9e0"}]},{"id":"-MbY5ryY36VtjGa6R-go","title":"Slot","pathname":"/doc/guides/atomico-design-patterns/slot","siteSpaceId":"sitesp_cKR1R","emoji":"1f500","description":"","breadcrumbs":[{"label":"Guides"},{"label":"Atomico design patterns","emoji":"1f9e0"}]},{"id":"hz2K3EQwv8w1R3hKZSxc","title":"Atomico and Storybook","pathname":"/doc/guides/atomico-and-storybook","siteSpaceId":"sitesp_cKR1R","emoji":"1f4d6","description":"","breadcrumbs":[{"label":"Guides"}]},{"id":"3vgkhOVTzNSwfy4aXbav","title":"Frequent questions","pathname":"/doc/guides/atomico-and-storybook/frequent-questions","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"Guides"},{"label":"Atomico and Storybook","emoji":"1f4d6"}]},{"id":"skqeIRSWpIRxn0jAVoe5","title":"SSR / SSG","pathname":"/doc/guides/ssr-ssg","siteSpaceId":"sitesp_cKR1R","emoji":"1f4a7","description":"Implement SSR and SST without friction","breadcrumbs":[{"label":"Guides"}]},{"id":"lMCC1UulrWFMMh57t1vA","title":"Archives","pathname":"/doc/guides/archives","siteSpaceId":"sitesp_cKR1R","emoji":"1f5c3","description":"","breadcrumbs":[{"label":"Guides"}]},{"id":"-MfibnjV8M7pCitG9bk9","title":"Class inheritance","pathname":"/doc/guides/archives/class-inheritance","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"Guides"},{"label":"Archives","emoji":"1f5c3"}]},{"id":"-Mfin_OZH70nYhO0eCNT","title":"Forms and shadowDOM","pathname":"/doc/guides/archives/forms-and-shadowdom","siteSpaceId":"sitesp_cKR1R","description":"Improve the interaction with the forms and accessibility of your components.","breadcrumbs":[{"label":"Guides"},{"label":"Archives","emoji":"1f5c3"}]},{"id":"RJPpBiujH2TCuS8xIJ9S","title":"Tips","pathname":"/doc/guides/archives/tips","siteSpaceId":"sitesp_cKR1R","description":"Here are some tips you can take into account when creating webcomponents with Atomico","breadcrumbs":[{"label":"Guides"},{"label":"Archives","emoji":"1f5c3"}]},{"id":"-MaCQR4QRzIUCuTnJJuC","title":"Design systems","pathname":"/doc/guides/archives/design-systems","siteSpaceId":"sitesp_cKR1R","description":"I will show you a series of useful techniques to start programming your design systems with Atomico, analyzing the recommended structure and its files.","breadcrumbs":[{"label":"Guides"},{"label":"Archives","emoji":"1f5c3"}]},{"id":"ujuKcDP8yThG7AthhFIl","title":"Atomico style guide","pathname":"/doc/guides/archives/atomico-style-guide","siteSpaceId":"sitesp_cKR1R","description":"First thanks for using Atomico 😉, in this guide you will find some useful tips when developing with Atomico, all with the aim that your webcomponents are sustainable and scalable over time.","breadcrumbs":[{"label":"Guides"},{"label":"Archives","emoji":"1f5c3"}]},{"id":"exYL2Wf1JBnZRkZc2XsC","title":"File structure","pathname":"/doc/guides/archives/atomico-style-guide/file-structure","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"Guides"},{"label":"Archives","emoji":"1f5c3"},{"label":"Atomico style guide"}]},{"id":"8a6Ag2GYy4Y3Fc12vg3Z","title":"Monorepo","pathname":"/doc/guides/archives/atomico-style-guide/file-structure/monorepo","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"Guides"},{"label":"Archives","emoji":"1f5c3"},{"label":"Atomico style guide"},{"label":"File structure"}]},{"id":"KOH0YXnP98OMlDoU5gxG","title":"Design systems","pathname":"/doc/guides/archives/atomico-style-guide/file-structure/design-systems","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"Guides"},{"label":"Archives","emoji":"1f5c3"},{"label":"Atomico style guide"},{"label":"File structure"}]},{"id":"-MY1eesaEwlbhszALGSJ","title":"@atomico/hooks","pathname":"/doc/packages/atomico-hooks","siteSpaceId":"sitesp_cKR1R","description":"series of useful hooks for creating webcomponents","breadcrumbs":[{"label":"packages"}]},{"id":"N9ODUADHJ7RkQpsWSBiL","title":"useCurrentValue","pathname":"/doc/packages/atomico-hooks/usecurrentvalue","siteSpaceId":"sitesp_cKR1R","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"SVrkwieB5f3LuLZLL6xL","title":"use-intersection-observer","pathname":"/doc/packages/atomico-hooks/use-intersection-observer","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"9tR4vjh7SRmSevnLRKIk","title":"use-ref-values","pathname":"/doc/packages/atomico-hooks/use-ref-values","siteSpaceId":"sitesp_cKR1R","description":"Consume the values of a reference without major inconvenience","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"WcfONK6SYsbzh7f4UvST","title":"use-script","pathname":"/doc/packages/atomico-hooks/use-script","siteSpaceId":"sitesp_cKR1R","description":"load global scripts when mounting the component","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"jlYk36yKKsW7i1Pg5vnN","title":"use-attributes","pathname":"/doc/packages/atomico-hooks/use-attributes","siteSpaceId":"sitesp_cKR1R","description":"capture all attributes that are defined in the webcomponent but are not props","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"tccGpXtVvmdForE2qL0K","title":"use-prop-proxy","pathname":"/doc/packages/atomico-hooks/use-prop-proxy","siteSpaceId":"sitesp_cKR1R","description":"Share values from the scope via setter and getters","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"0lDbQlqSpUh8tyP5ALWu","title":"use-click-press","pathname":"/doc/packages/atomico-hooks/use-click-press","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"9z9L984YcGpdfhwK28kV","title":"use-dollars","pathname":"/doc/packages/atomico-hooks/use-dollars","siteSpaceId":"sitesp_cKR1R","description":"Create reactive templates that interact with the state of your webcomponent","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"Igct6eLrKCBTOVY1MgPL","title":"use-reflect-event","pathname":"/doc/packages/atomico-hooks/use-reflect-event","siteSpaceId":"sitesp_cKR1R","description":"the useReflectEvent hook reflects the event from the reference origin to the reference destination","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"jdg8VkTeq2mO3jSCQJmh","title":"use-keyboar","pathname":"/doc/packages/atomico-hooks/use-keyboar","siteSpaceId":"sitesp_cKR1R","description":"capture key combinations easily","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-Mkz78NaMLK-O8xR8wts","title":"use-click-coordinates","pathname":"/doc/packages/atomico-hooks/use-click-coordinates","siteSpaceId":"sitesp_cKR1R","description":"The usesClickCoordinates  hook is for capturing click coordinates, this is useful when positioning a tooptip or creating visual effects","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-Mkww_sYP7fvBQ7jWaPP","title":"use-copy","pathname":"/doc/packages/atomico-hooks/use-copy","siteSpaceId":"sitesp_cKR1R","description":"Copies the content in text format of a reference.","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-Mkwsx6GiemawdThQsCM","title":"use-debounce-state","pathname":"/doc/packages/atomico-hooks/use-debounce-state","siteSpaceId":"sitesp_cKR1R","description":"creates a bottleneck to the definition of a state, limits concurrency.","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-MkwqR_uiaZl1D9Y2xpc","title":"use-form","pathname":"/doc/packages/atomico-hooks/use-form","siteSpaceId":"sitesp_cKR1R","description":"Communicate the component with external forms.","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-Mkwmgz6y9WcT2CVMvcK","title":"use-listener","pathname":"/doc/packages/atomico-hooks/use-listener","siteSpaceId":"sitesp_cKR1R","description":"Associate a listener with a reference","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-Mkwk_n0Y3AQ3ryTZuuV","title":"use-disabled","pathname":"/doc/packages/atomico-hooks/use-disabled","siteSpaceId":"sitesp_cKR1R","description":"Synchronize the state of the disabled prop with the fieldset tag","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-Mkw3ISBEWDw_SiKDu-4","title":"use-css","pathname":"/doc/packages/atomico-hooks/use-css","siteSpaceId":"sitesp_cKR1R","description":"Inject CSS into the shadowRoot","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-MY1eesbInhtOJTNHEu1","title":"use-channel","pathname":"/doc/packages/atomico-hooks/use-channel","siteSpaceId":"sitesp_cKR1R","description":"create connection between components to share internal states","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-MY1eese6wxKRysac5K7","title":"use-promise","pathname":"/doc/packages/atomico-hooks/use-promise","siteSpaceId":"sitesp_cKR1R","description":"The usePromise hook consumes an asynchronous function is ideal for using fetch or other asynchronous tasks.","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-MY1eesf81b2ike2rjMP","title":"use-responsive-state","pathname":"/doc/packages/atomico-hooks/use-responsive-state","siteSpaceId":"sitesp_cKR1R","description":"Declare a state based on a responsive expression similar to using the tag img[srcset].","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-MY1eesgBjITbuKww4yg","title":"use-parent","pathname":"/doc/packages/atomico-hooks/use-parent","siteSpaceId":"sitesp_cKR1R","description":"Retrieve a node higher than the current webcomponent.","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-MY1eeshyDiu3XHT-z1j","title":"use-resize-observer","pathname":"/doc/packages/atomico-hooks/use-resize-observer","siteSpaceId":"sitesp_cKR1R","description":"Observe the size change of a reference.","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-MY1eesklrK0YeIrTvhJ","title":"use-slot","pathname":"/doc/packages/atomico-hooks/use-slot","siteSpaceId":"sitesp_cKR1R","description":"Retrieves the nodes assigned to a slot.","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"8YMGdW5Xjxq6zF8CNCX1","title":"useSlot","pathname":"/doc/packages/atomico-hooks/use-slot/useslot","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"},{"label":"use-slot"}]},{"id":"OmtgPrTjZTj1dYzZKunj","title":"useProxySlot","pathname":"/doc/packages/atomico-hooks/use-slot/useproxyslot","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"},{"label":"use-slot"}]},{"id":"-MY1eesiSynMIjq6z8Ax","title":"use-render","pathname":"/doc/packages/atomico-hooks/use-render","siteSpaceId":"sitesp_cKR1R","description":"Run a second render before the webcomponent render, ideal for  collaborative work between shadowDOM and lightDOM","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-MY1eesmtPTYXxNPtpUI","title":"use-mutation-observer","pathname":"/doc/packages/atomico-hooks/use-mutation-observer","siteSpaceId":"sitesp_cKR1R","description":"Observe the changes of a reference using MutationObserver","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-MY1eesntrGH1mxJPjDY","title":"use-css-light-dom","pathname":"/doc/packages/atomico-hooks/use-css-light-dom","siteSpaceId":"sitesp_cKR1R","description":"share your style sheets between LightDOM and ShadowDOM","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-MeVYelKlqvriDgZfJvP","title":"use-controller","pathname":"/doc/packages/atomico-hooks/use-controller","siteSpaceId":"sitesp_cKR1R","description":"Use a ReactiveController.","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-MY1eesjVj4vZ6Kcn3aQ","title":"use-router","pathname":"/doc/packages/atomico-hooks/use-router","siteSpaceId":"sitesp_cKR1R","description":"Hooks to work with routes in the browser","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-MY1eeslFSN0gDjw_pi3","title":"use-async-effect","pathname":"/doc/packages/atomico-hooks/use-async-effect","siteSpaceId":"sitesp_cKR1R","description":"Execute useEffect but asynchronously","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-MY1eesdBymuTQqmPjGy","title":"use-child-nodes","pathname":"/doc/packages/atomico-hooks/use-child-nodes","siteSpaceId":"sitesp_cKR1R","description":"Captures all nodes not created by the webcomponent render, ideal for  apply slot polyfill in LightDOM.","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"-MY1eesc8EF8q3AKjI93","title":"use-force-render","pathname":"/doc/packages/atomico-hooks/use-force-render","siteSpaceId":"sitesp_cKR1R","description":"Allows forcing the rendering of the webcomponent without the need to be  tied to a state or property","breadcrumbs":[{"label":"packages"},{"label":"@atomico/hooks"}]},{"id":"FOf5kz5M2ouNa1Mwcv8j","title":"@atomico/store","pathname":"/doc/packages/atomico-store","siteSpaceId":"sitesp_cKR1R","description":"@atomico/store a more predictable and natural model for asynchrony when controlling states.","breadcrumbs":[{"label":"packages"}]},{"id":"CTgFqLguFrtKSHWxGm69","title":"Store","pathname":"/doc/packages/atomico-store/store","siteSpaceId":"sitesp_cKR1R","description":"It is a minimalist solution for synchronizing the state of applications or component systems that require controlled bidirectional data management.","breadcrumbs":[{"label":"packages"},{"label":"@atomico/store"}]},{"id":"GMhCzyeXpOxFby8Swt4k","title":"@atomico/storybook","pathname":"/doc/packages/atomico-storybook","siteSpaceId":"sitesp_cKR1R","description":"Improves the generation of stories in Storybook.","breadcrumbs":[{"label":"packages"}]},{"id":"KByRWX7VK8yjeiNNE3Bf","title":"@atomico/router","pathname":"/doc/packages/atomico-router","siteSpaceId":"sitesp_cKR1R","description":"powerful router for Webcomponents, React and Preact","breadcrumbs":[{"label":"packages"}]},{"id":"TJSI2xxeS5JQSfHR0l5u","title":"@atomico/vite","pathname":"/doc/packages/atomico-vite","siteSpaceId":"sitesp_cKR1R","description":"Atomico Vite is a stack of plugins created for the development of libraries and applications using Atomico + Vite.","breadcrumbs":[{"label":"packages"}]},{"id":"mbYl53fboXPs7V0I0vqq","title":"Process CSS tag template blocks with PostCSS.","pathname":"/doc/packages/atomico-vite/process-css-tag-template-blocks-with-postcss.","siteSpaceId":"sitesp_cKR1R","emoji":"2699","description":"With @atomico/vite, you will be able to analyze your CSS tag template to be optimized or to support utilities from the PostCSS ecosystem like Tailwind.","breadcrumbs":[{"label":"packages"},{"label":"@atomico/vite"}]},{"id":"Uy7LB4t7dYK12CmUX4i0","title":"Compile your code to be distributed optimally as a package.","pathname":"/doc/packages/atomico-vite/compile-your-code-to-be-distributed-optimally-as-a-package.","siteSpaceId":"sitesp_cKR1R","emoji":"1f3d7","breadcrumbs":[{"label":"packages"},{"label":"@atomico/vite"}]},{"id":"6zWmxDFb3tTBvAebSNmC","title":"Use the JSX/TSX syntax of Atomico when using Storybook.","pathname":"/doc/packages/atomico-vite/use-the-jsx-tsx-syntax-of-atomico-when-using-storybook.","siteSpaceId":"sitesp_cKR1R","emoji":"1f4d5","description":"By default, Storybook does not support Atomico's JSX/TSX. With @atomico/vite, you will be able to use Atomico's syntax in your stories for Storybook.","breadcrumbs":[{"label":"packages"},{"label":"@atomico/vite"}]},{"id":"FBp1xtl5nH5rwq9u1EYJ","title":"Automatically create customElements.define","pathname":"/doc/packages/atomico-vite/automatically-create-customelements.define","siteSpaceId":"sitesp_cKR1R","emoji":"1f916","description":"With @atomico/vite you can automate the declaration of customElements.define, @atomico/vite will transform the export of your customElement into a record for customElements.define.","breadcrumbs":[{"label":"packages"},{"label":"@atomico/vite"}]},{"id":"eaTdeUAEYLw5H5Ylebvn","title":"Support for Vitest for Atomico.","pathname":"/doc/packages/atomico-vite/support-for-vitest-for-atomico.","siteSpaceId":"sitesp_cKR1R","emoji":"2611","description":"With @atomico/vite, you will be able to use the `atomico/test-dom` module without any issues.","breadcrumbs":[{"label":"packages"},{"label":"@atomico/vite"}]},{"id":"YDKDkFuVNd3CsiNJN0lk","title":"Server actions","pathname":"/doc/packages/atomico-vite/server-actions","siteSpaceId":"sitesp_cKR1R","emoji":"1f9d9-2642","description":"With @atomico/vite, you will be able to use server-side functions in an environment-agnostic way, suitable for certain serverless and edge environments.","breadcrumbs":[{"label":"packages"},{"label":"@atomico/vite"}]},{"id":"g6COhp5j6qafKr5nJn7Y","title":"@atomico/exports","pathname":"/doc/packages/introduction","siteSpaceId":"sitesp_cKR1R","description":"@atomico/exports aims to be the solution to facilitate the construction of the metadata in your package.json necessary for publishing on NPM or at the monorepo level with workspaces.","breadcrumbs":[{"label":"packages"}]},{"id":"-MbKU41Wwexa2HHmJCrG","title":"CLI and Flags","pathname":"/doc/packages/introduction/atomico-exports","siteSpaceId":"sitesp_cKR1R","emoji":"1f6a9","description":"Facilitates the distribution of webcomponents","breadcrumbs":[{"label":"packages"},{"label":"@atomico/exports"}]},{"id":"a8wjdVf1vvpQ7cdtH5th","title":"Wrapper for React","pathname":"/doc/packages/introduction/wrapper-for-react","siteSpaceId":"sitesp_cKR1R","emoji":"1f916","description":"","breadcrumbs":[{"label":"packages"},{"label":"@atomico/exports"}]},{"id":"-MY1eesozI2zfVGde4Py","title":"@atomico/components","pathname":"/doc/packages/atomico-components","siteSpaceId":"sitesp_cKR1R","description":"Utility and generic components","breadcrumbs":[{"label":"packages"}]},{"id":"-MY1eespdI-3PEDuaeEv","title":"@atomico/keen-slider","pathname":"/doc/packages/atomico-components/keen-slider","siteSpaceId":"sitesp_cKR1R","description":"The Keen-slider api but with WebComponents","breadcrumbs":[{"label":"packages"},{"label":"@atomico/components"}]},{"id":"-MY1eesq9FXgCf0uQWDp","title":"@atomico/modal","pathname":"/doc/packages/atomico-components/modal","siteSpaceId":"sitesp_cKR1R","description":"Responsive generic modal component.","breadcrumbs":[{"label":"packages"},{"label":"@atomico/components"}]},{"id":"-MY1eesr9IEaLi5ufjCn","title":"@atomico/lottie","pathname":"/doc/packages/atomico-components/lottie","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"packages"},{"label":"@atomico/components"}]},{"id":"t7LvmG3Wg57prQiYUMhj","title":"@atomico/table","pathname":"/doc/packages/atomico-components/table","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"packages"},{"label":"@atomico/components"}]},{"id":"IuK9mSIBwHGDo93DDWPs","title":"@atomico/react","pathname":"/doc/packages/atomico-react","siteSpaceId":"sitesp_cKR1R","description":"Wrapper to use webcomponents in React","breadcrumbs":[{"label":"packages"}]},{"id":"tQaojnmxk495Phyw551R","title":"@atomico/postcss-tokens","pathname":"/doc/packages/atomico-postcss-tokens","siteSpaceId":"sitesp_cKR1R","description":"Makes it easy to manage tokens as CSS custom properties for design system development","breadcrumbs":[{"label":"packages"}]},{"id":"ZO9ZRkd818Kw1zebOyKn","title":"Example with @atomico/vite","pathname":"/doc/packages/atomico-postcss-tokens/example-with-atomico-vite","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"packages"},{"label":"@atomico/postcss-tokens"}]},{"id":"AdNSM5eTo7UdYex2Uh4x","title":"@atomico/wrapper","pathname":"/doc/packages/atomico-wrapper","siteSpaceId":"sitesp_cKR1R","description":"This package is used by @atomico/react and @atomico/vue to retrieve the tagName of the customElement registered through customElements.define","breadcrumbs":[{"label":"packages"}]},{"id":"1Xr209uN630BfIgxC38a","title":"Deprecated","pathname":"/doc/packages/deprecated","siteSpaceId":"sitesp_cKR1R","emoji":"1f6ab","description":"","breadcrumbs":[{"label":"packages"}]},{"id":"YpRwq5tWdR4pGMKEybxW","title":"@atomico/magic-form","pathname":"/doc/packages/deprecated/atomico-magic-form","siteSpaceId":"sitesp_cKR1R","description":"Improves the form development experience thanks to the use of webcomponents to centralize submission","breadcrumbs":[{"label":"packages"},{"label":"Deprecated","emoji":"1f6ab"}]},{"id":"KYZbYvKI4lfGbTGWEuuL","title":"MagicFormProvider | <magic-form-provider>","pathname":"/doc/packages/deprecated/atomico-magic-form/magicformprovider-or-less-than-magic-form-provider-greater-than","siteSpaceId":"sitesp_cKR1R","description":"receives the submits from MagicForm","breadcrumbs":[{"label":"packages"},{"label":"Deprecated","emoji":"1f6ab"},{"label":"@atomico/magic-form"}]},{"id":"u9vM1hAIcBUtsCXWg8VW","title":"MagicForm | <magic-form>","pathname":"/doc/packages/deprecated/atomico-magic-form/magicform-or-less-than-magic-form-greater-than","siteSpaceId":"sitesp_cKR1R","description":"captures the submit event of the nested form and sends it to MagicFormProvider","breadcrumbs":[{"label":"packages"},{"label":"Deprecated","emoji":"1f6ab"},{"label":"@atomico/magic-form"}]},{"id":"atlZQ3k0bngJoP66TE6x","title":"MagicForm Hooks","pathname":"/doc/packages/deprecated/atomico-magic-form/magicform-hooks","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"packages"},{"label":"Deprecated","emoji":"1f6ab"},{"label":"@atomico/magic-form"}]},{"id":"sMmkCDKXTFDi5bxqrRXm","title":"MagicForm in React and Preact","pathname":"/doc/packages/deprecated/atomico-magic-form/magicform-in-react-and-preact","siteSpaceId":"sitesp_cKR1R","description":"MagicForm api is equivalent in Atomicojs, React and Preact at JSX level","breadcrumbs":[{"label":"packages"},{"label":"Deprecated","emoji":"1f6ab"},{"label":"@atomico/magic-form"}]},{"id":"VUQIwDfXRGLWSEuiVIcM","title":"MagicForm in Microfrontend","pathname":"/doc/packages/deprecated/atomico-magic-form/magicform-in-microfrontend","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"packages"},{"label":"Deprecated","emoji":"1f6ab"},{"label":"@atomico/magic-form"}]},{"id":"FoL74MWugCi1AOQEKv2o","title":"MagicForm Patterns","pathname":"/doc/packages/deprecated/atomico-magic-form/magicform-patterns","siteSpaceId":"sitesp_cKR1R","description":"MagicForm makes it easy to send data to the server, here are some useful patterns","breadcrumbs":[{"label":"packages"},{"label":"Deprecated","emoji":"1f6ab"},{"label":"@atomico/magic-form"}]},{"id":"orYLDwvKfVd1KYVbDMYz","title":"@atomico/design-tokens","pathname":"/doc/packages/deprecated/atomico-design-tokens","siteSpaceId":"sitesp_cKR1R","description":"Accelerates the implementation of design tokens in web components in a sustainable and scalable way","breadcrumbs":[{"label":"packages"},{"label":"Deprecated","emoji":"1f6ab"}]},{"id":"9Z6KHe1D6EWSK1kxrffa","title":"@atomico/design-tokens api","pathname":"/doc/packages/deprecated/atomico-design-tokens/atomico-design-tokens-api","siteSpaceId":"sitesp_cKR1R","description":"","breadcrumbs":[{"label":"packages"},{"label":"Deprecated","emoji":"1f6ab"},{"label":"@atomico/design-tokens"}]},{"id":"-L_3P322RwKZSYEurYHa","title":"Atomico","pathname":"/doc/espanol","siteSpaceId":"sitesp_j73xQ","emoji":"1f44b","description":"Una microlibrería inspirada en React Hooks, diseñada y optimizada para la creación de webcomponentes."},{"id":"-Mj2ltuP7RqNPy1rQ-5J","title":"Comenzando con Webcomponents","pathname":"/doc/espanol/comenzando","siteSpaceId":"sitesp_j73xQ","emoji":"1f680","description":"Esta guía conocerás lo esencial para comenzar a desarrollar webcomponents con Atomico"},{"id":"-MaC5EhbJa_NptuI4DAD","title":"Sistemas de diseño con Atomico","pathname":"/doc/espanol/guias/sistemas-de-diseno","siteSpaceId":"sitesp_j73xQ","emoji":"2728","description":"Es grato saber que hoy te enfrentas al desafío de implementar un sistema de diseño con Atomico, espero que esta guía te ayude a abordar:","breadcrumbs":[{"label":"guías"}]},{"id":"hH1Baymg4ow2OyoUaQnx","title":"Estrategias de estructuración de repositorio con Atomico al crear sistemas de diseño.","pathname":"/doc/espanol/guias/sistemas-de-diseno/estrategias-de-estructuracion-de-repositorio-con-atomico-al-crear-sistemas-de-diseno.","siteSpaceId":"sitesp_j73xQ","description":"Le invito a conocer 2 estrategias de estructuración de tu repositorio para tu proyecto como sistemas de diseño.","breadcrumbs":[{"label":"guías"},{"label":"Sistemas de diseño con Atomico","emoji":"2728"}]},{"id":"twUjzQNP9BTFneoMuWLo","title":"Monorepositorio versionado a nivel de componente","pathname":"/doc/espanol/guias/sistemas-de-diseno/estrategias-de-estructuracion-de-repositorio-con-atomico-al-crear-sistemas-de-diseno./monorepositorio-versionado-a-nivel-de-componente","siteSpaceId":"sitesp_j73xQ","description":"Trata de un repositorio que posee un sistema de diseño versionados por componentes","breadcrumbs":[{"label":"guías"},{"label":"Sistemas de diseño con Atomico","emoji":"2728"},{"label":"Estrategias de estructuración de repositorio con Atomico al crear sistemas de diseño."}]},{"id":"ftig5Wr2ysA5ueCHsjVa","title":"Monorepositorio versionado a nivel de sistema de diseño","pathname":"/doc/espanol/guias/sistemas-de-diseno/estrategias-de-estructuracion-de-repositorio-con-atomico-al-crear-sistemas-de-diseno./monorepositorio-versionado-a-nivel-de-sistema-de-diseno","siteSpaceId":"sitesp_j73xQ","description":"Trata de un repositorio que posee un componentes versionados a nivel de sistema de diseño.","breadcrumbs":[{"label":"guías"},{"label":"Sistemas de diseño con Atomico","emoji":"2728"},{"label":"Estrategias de estructuración de repositorio con Atomico al crear sistemas de diseño."}]},{"id":"RqUsGfcwpVqPKm4ftCN8","title":"Storybook","pathname":"/doc/espanol/guias/sistemas-de-diseno/storybook","siteSpaceId":"sitesp_j73xQ","description":"Atomico hoy ofrece un set de utilidades para mejorar la creacion de sistemas de diseño usando Storybook.","breadcrumbs":[{"label":"guías"},{"label":"Sistemas de diseño con Atomico","emoji":"2728"}]},{"id":"sbbfbjhlWcHqWsgVpwKN","title":"@atomico/storybook","pathname":"/doc/espanol/guias/sistemas-de-diseno/storybook/atomico-storybook","siteSpaceId":"sitesp_j73xQ","description":"Mejora la experiencia de desarrollo y documentación en Storybook de los webcomponents creados con Atomico","breadcrumbs":[{"label":"guías"},{"label":"Sistemas de diseño con Atomico","emoji":"2728"},{"label":"Storybook"}]},{"id":"vPI6iW15HcAR5StSdQaP","title":"Tokens (CSS custom properties)","pathname":"/doc/espanol/guias/sistemas-de-diseno/tokens-css-custom-properties","siteSpaceId":"sitesp_j73xQ","description":"","breadcrumbs":[{"label":"guías"},{"label":"Sistemas de diseño con Atomico","emoji":"2728"}]},{"id":"-MbXlLRHDvaAFvMtp11l","title":"Slots","pathname":"/doc/espanol/guias/sistemas-de-diseno/slots","siteSpaceId":"sitesp_j73xQ","description":"","breadcrumbs":[{"label":"guías"},{"label":"Sistemas de diseño con Atomico","emoji":"2728"}]}]}