# packages - [@atomico/hooks](https://atomico.gitbook.io/doc/packages/atomico-hooks.md): series of useful hooks for creating webcomponents - [useCurrentValue](https://atomico.gitbook.io/doc/packages/atomico-hooks/usecurrentvalue.md) - [use-intersection-observer](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-intersection-observer.md) - [use-ref-values](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-ref-values.md): Consume the values of a reference without major inconvenience - [use-script](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-script.md): load global scripts when mounting the component - [use-attributes](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-attributes.md): capture all attributes that are defined in the webcomponent but are not props - [use-prop-proxy](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-prop-proxy.md): Share values from the scope via setter and getters - [use-click-press](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-click-press.md) - [use-dollars](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-dollars.md): Create reactive templates that interact with the state of your webcomponent - [use-reflect-event](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-reflect-event.md): the useReflectEvent hook reflects the event from the reference origin to the reference destination - [use-keyboar](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-keyboar.md): capture key combinations easily - [use-click-coordinates](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-click-coordinates.md): The usesClickCoordinates hook is for capturing click coordinates, this is useful when positioning a tooptip or creating visual effects - [use-copy](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-copy.md): Copies the content in text format of a reference. - [use-debounce-state](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-debounce-state.md): creates a bottleneck to the definition of a state, limits concurrency. - [use-form](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-form.md): Communicate the component with external forms. - [use-listener](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-listener.md): Associate a listener with a reference - [use-disabled](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-disabled.md): Synchronize the state of the disabled prop with the fieldset tag - [use-css](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-css.md): Inject CSS into the shadowRoot - [use-channel](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-channel.md): create connection between components to share internal states - [use-promise](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-promise.md): The usePromise hook consumes an asynchronous function is ideal for using fetch or other asynchronous tasks. - [use-responsive-state](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-responsive-state.md): Declare a state based on a responsive expression similar to using the tag img\[srcset]. - [use-parent](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-parent.md): Retrieve a node higher than the current webcomponent. - [use-resize-observer](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-resize-observer.md): Observe the size change of a reference. - [use-slot](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-slot.md): Retrieves the nodes assigned to a slot. - [useSlot](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-slot/useslot.md) - [useProxySlot](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-slot/useproxyslot.md) - [use-render](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-render.md): Run a second render before the webcomponent render, ideal for collaborative work between shadowDOM and lightDOM - [use-mutation-observer](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-mutation-observer.md): Observe the changes of a reference using MutationObserver - [use-css-light-dom](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-css-light-dom.md): share your style sheets between LightDOM and ShadowDOM - [use-controller](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-controller.md): Use a ReactiveController. - [use-router](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-router.md): Hooks to work with routes in the browser - [use-async-effect](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-async-effect.md): Execute useEffect but asynchronously - [use-child-nodes](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-child-nodes.md): Captures all nodes not created by the webcomponent render, ideal for apply slot polyfill in LightDOM. - [use-force-render](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-force-render.md): Allows forcing the rendering of the webcomponent without the need to be tied to a state or property - [@atomico/store](https://atomico.gitbook.io/doc/packages/atomico-store.md): @atomico/store a more predictable and natural model for asynchrony when controlling states. - [Store](https://atomico.gitbook.io/doc/packages/atomico-store/store.md): It is a minimalist solution for synchronizing the state of applications or component systems that require controlled bidirectional data management. - [@atomico/storybook](https://atomico.gitbook.io/doc/packages/atomico-storybook.md): Improves the generation of stories in Storybook. - [@atomico/router](https://atomico.gitbook.io/doc/packages/atomico-router.md): powerful router for Webcomponents, React and Preact - [@atomico/vite](https://atomico.gitbook.io/doc/packages/atomico-vite.md): Atomico Vite is a stack of plugins created for the development of libraries and applications using Atomico + Vite. - [Process CSS tag template blocks with PostCSS.](https://atomico.gitbook.io/doc/packages/atomico-vite/process-css-tag-template-blocks-with-postcss..md): 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. - [Compile your code to be distributed optimally as a package.](https://atomico.gitbook.io/doc/packages/atomico-vite/compile-your-code-to-be-distributed-optimally-as-a-package..md) - [Use the JSX/TSX syntax of Atomico when using Storybook.](https://atomico.gitbook.io/doc/packages/atomico-vite/use-the-jsx-tsx-syntax-of-atomico-when-using-storybook..md): 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. - [Automatically create customElements.define](https://atomico.gitbook.io/doc/packages/atomico-vite/automatically-create-customelements.define.md): 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. - [Support for Vitest for Atomico.](https://atomico.gitbook.io/doc/packages/atomico-vite/support-for-vitest-for-atomico..md): With @atomico/vite, you will be able to use the \`atomico/test-dom\` module without any issues. - [Server actions](https://atomico.gitbook.io/doc/packages/atomico-vite/server-actions.md): With @atomico/vite, you will be able to use server-side functions in an environment-agnostic way, suitable for certain serverless and edge environments. - [@atomico/exports](https://atomico.gitbook.io/doc/packages/introduction.md): @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. - [CLI and Flags](https://atomico.gitbook.io/doc/packages/introduction/atomico-exports.md): Facilitates the distribution of webcomponents - [Wrapper for React](https://atomico.gitbook.io/doc/packages/introduction/wrapper-for-react.md) - [@atomico/components](https://atomico.gitbook.io/doc/packages/atomico-components.md): Utility and generic components - [@atomico/keen-slider](https://atomico.gitbook.io/doc/packages/atomico-components/keen-slider.md): The Keen-slider api but with WebComponents - [@atomico/modal](https://atomico.gitbook.io/doc/packages/atomico-components/modal.md): Responsive generic modal component. - [@atomico/lottie](https://atomico.gitbook.io/doc/packages/atomico-components/lottie.md) - [@atomico/table](https://atomico.gitbook.io/doc/packages/atomico-components/table.md) - [@atomico/react](https://atomico.gitbook.io/doc/packages/atomico-react.md): Wrapper to use webcomponents in React - [@atomico/postcss-tokens](https://atomico.gitbook.io/doc/packages/atomico-postcss-tokens.md): Makes it easy to manage tokens as CSS custom properties for design system development - [Example with @atomico/vite](https://atomico.gitbook.io/doc/packages/atomico-postcss-tokens/example-with-atomico-vite.md) - [@atomico/wrapper](https://atomico.gitbook.io/doc/packages/atomico-wrapper.md): This package is used by @atomico/react and @atomico/vue to retrieve the tagName of the customElement registered through customElements.define - [Deprecated](https://atomico.gitbook.io/doc/packages/deprecated.md) - [@atomico/magic-form](https://atomico.gitbook.io/doc/packages/deprecated/atomico-magic-form.md): Improves the form development experience thanks to the use of webcomponents to centralize submission - [MagicFormProvider | \](https://atomico.gitbook.io/doc/packages/deprecated/atomico-magic-form/magicformprovider-or-less-than-magic-form-provider-greater-than.md): receives the submits from MagicForm - [MagicForm | \](https://atomico.gitbook.io/doc/packages/deprecated/atomico-magic-form/magicform-or-less-than-magic-form-greater-than.md): captures the submit event of the nested form and sends it to MagicFormProvider - [MagicForm Hooks](https://atomico.gitbook.io/doc/packages/deprecated/atomico-magic-form/magicform-hooks.md) - [MagicForm in React and Preact](https://atomico.gitbook.io/doc/packages/deprecated/atomico-magic-form/magicform-in-react-and-preact.md): MagicForm api is equivalent in Atomicojs, React and Preact at JSX level - [MagicForm in Microfrontend](https://atomico.gitbook.io/doc/packages/deprecated/atomico-magic-form/magicform-in-microfrontend.md) - [MagicForm Patterns](https://atomico.gitbook.io/doc/packages/deprecated/atomico-magic-form/magicform-patterns.md): MagicForm makes it easy to send data to the server, here are some useful patterns - [@atomico/design-tokens](https://atomico.gitbook.io/doc/packages/deprecated/atomico-design-tokens.md): Accelerates the implementation of design tokens in web components in a sustainable and scalable way - [@atomico/design-tokens api](https://atomico.gitbook.io/doc/packages/deprecated/atomico-design-tokens/atomico-design-tokens-api.md) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://atomico.gitbook.io/doc/packages.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.