# packages - [@atomico/hooks](/doc/packages/atomico-hooks.md): series of useful hooks for creating webcomponents - [useCurrentValue](/doc/packages/atomico-hooks/usecurrentvalue.md) - [use-intersection-observer](/doc/packages/atomico-hooks/use-intersection-observer.md) - [use-ref-values](/doc/packages/atomico-hooks/use-ref-values.md): Consume the values of a reference without major inconvenience - [use-script](/doc/packages/atomico-hooks/use-script.md): load global scripts when mounting the component - [use-attributes](/doc/packages/atomico-hooks/use-attributes.md): capture all attributes that are defined in the webcomponent but are not props - [use-prop-proxy](/doc/packages/atomico-hooks/use-prop-proxy.md): Share values from the scope via setter and getters - [use-click-press](/doc/packages/atomico-hooks/use-click-press.md) - [use-dollars](/doc/packages/atomico-hooks/use-dollars.md): Create reactive templates that interact with the state of your webcomponent - [use-reflect-event](/doc/packages/atomico-hooks/use-reflect-event.md): the useReflectEvent hook reflects the event from the reference origin to the reference destination - [use-keyboar](/doc/packages/atomico-hooks/use-keyboar.md): capture key combinations easily - [use-click-coordinates](/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](/doc/packages/atomico-hooks/use-copy.md): Copies the content in text format of a reference. - [use-debounce-state](/doc/packages/atomico-hooks/use-debounce-state.md): creates a bottleneck to the definition of a state, limits concurrency. - [use-form](/doc/packages/atomico-hooks/use-form.md): Communicate the component with external forms. - [use-listener](/doc/packages/atomico-hooks/use-listener.md): Associate a listener with a reference - [use-disabled](/doc/packages/atomico-hooks/use-disabled.md): Synchronize the state of the disabled prop with the fieldset tag - [use-css](/doc/packages/atomico-hooks/use-css.md): Inject CSS into the shadowRoot - [use-channel](/doc/packages/atomico-hooks/use-channel.md): create connection between components to share internal states - [use-promise](/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](/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](/doc/packages/atomico-hooks/use-parent.md): Retrieve a node higher than the current webcomponent. - [use-resize-observer](/doc/packages/atomico-hooks/use-resize-observer.md): Observe the size change of a reference. - [use-slot](/doc/packages/atomico-hooks/use-slot.md): Retrieves the nodes assigned to a slot. - [useSlot](/doc/packages/atomico-hooks/use-slot/useslot.md) - [useProxySlot](/doc/packages/atomico-hooks/use-slot/useproxyslot.md) - [use-render](/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](/doc/packages/atomico-hooks/use-mutation-observer.md): Observe the changes of a reference using MutationObserver - [use-css-light-dom](/doc/packages/atomico-hooks/use-css-light-dom.md): share your style sheets between LightDOM and ShadowDOM - [use-controller](/doc/packages/atomico-hooks/use-controller.md): Use a ReactiveController. - [use-router](/doc/packages/atomico-hooks/use-router.md): Hooks to work with routes in the browser - [use-async-effect](/doc/packages/atomico-hooks/use-async-effect.md): Execute useEffect but asynchronously - [use-child-nodes](/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](/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](/doc/packages/atomico-store.md): @atomico/store a more predictable and natural model for asynchrony when controlling states. - [Store](/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](/doc/packages/atomico-storybook.md): Improves the generation of stories in Storybook. - [@atomico/router](/doc/packages/atomico-router.md): powerful router for Webcomponents, React and Preact - [@atomico/vite](/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.](/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.](/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.](/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](/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.](/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](/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](/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](/doc/packages/introduction/atomico-exports.md): Facilitates the distribution of webcomponents - [Wrapper for React](/doc/packages/introduction/wrapper-for-react.md) - [@atomico/components](/doc/packages/atomico-components.md): Utility and generic components - [@atomico/keen-slider](/doc/packages/atomico-components/keen-slider.md): The Keen-slider api but with WebComponents - [@atomico/modal](/doc/packages/atomico-components/modal.md): Responsive generic modal component. - [@atomico/lottie](/doc/packages/atomico-components/lottie.md) - [@atomico/table](/doc/packages/atomico-components/table.md) - [@atomico/react](/doc/packages/atomico-react.md): Wrapper to use webcomponents in React - [@atomico/postcss-tokens](/doc/packages/atomico-postcss-tokens.md): Makes it easy to manage tokens as CSS custom properties for design system development - [Example with @atomico/vite](/doc/packages/atomico-postcss-tokens/example-with-atomico-vite.md) - [@atomico/wrapper](/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](/doc/packages/deprecated.md) - [@atomico/magic-form](/doc/packages/deprecated/atomico-magic-form.md): Improves the form development experience thanks to the use of webcomponents to centralize submission - [MagicFormProvider | \](/doc/packages/deprecated/atomico-magic-form/magicformprovider-or-less-than-magic-form-provider-greater-than.md): receives the submits from MagicForm - [MagicForm | \](/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](/doc/packages/deprecated/atomico-magic-form/magicform-hooks.md) - [MagicForm in React and Preact](/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](/doc/packages/deprecated/atomico-magic-form/magicform-in-microfrontend.md) - [MagicForm Patterns](/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](/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](/doc/packages/deprecated/atomico-design-tokens/atomico-design-tokens-api.md)