# atomico

> Atomico is a small library for the creation of interfaces based on web-components, only using functions and hooks.

Latest version **2.2.0** (published 2026-07-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install atomico
pnpm add atomico
yarn add atomico
bun add atomico
```

Provides the command `atomico`.

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2026-07-19 |
| First published | 2018-08-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 212.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1278 |
| Author | UpperCod |
| Maintainers | uppercod |
| Keywords | jsx, web-components, hooks, custom-elements, webcomponent, react |

## Links

- npm: https://www.npmjs.com/package/atomico
- Repository: https://github.com/atomicojs/atomico
- Homepage: https://github.com/atomicojs/atomico#readme
- Issues: https://github.com/atomicojs/atomico/issues
- npm.io page: https://npm.io/package/atomico

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.2.0 (latest) — 2026-07-19
- 2.0.0 (two) — 2025-11-26
- 2.1.0-beta (beta) — 2025-11-19
- 2.1.0 — 2026-04-16
- 2.0.2-beta — 2025-10-23
- 2.0.1-beta — 2025-10-23
- 2.0.0-beta — 2025-06-22
- 1.79.2 — 2024-04-24
- 1.79.1 — 2024-04-19
- 1.79.0 — 2024-04-18
- 1.78.2 — 2024-04-02
- 1.78.1 — 2024-03-31
- 1.78.0 — 2024-03-31
- 1.77.2 — 2024-03-22
- 1.77.1 — 2024-03-09
- … 290 more at https://npm.io/package/atomico/versions

## README

## Atomico@2

![Atomico](https://raw.githubusercontent.com/atomicojs/atomico/brand/h1.svg)
![Atomico](https://raw.githubusercontent.com/atomicojs/atomico/brand/h2.svg)

[![twitter](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/twitter.svg)](https://twitter.com/atomicojs)
[![discord](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/discord.svg)](https://discord.gg/7z3rNhmkNE)
[![documentation](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/doc-1.svg)](https://atomico.gitbook.io/doc/)
[![playground](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/doc.svg)](https://stackblitz.com/edit/atomico?file=src%2Fmy-component.tsx)

[![npm](https://badgen.net/npm/v/atomico)](http://npmjs.com/atomico)
[![gzip](https://badgen.net/bundlephobia/minzip/atomico)](https://bundlephobia.com/result?p=atomico)

## Build web components using a syntax similar to React JS. 🚀

1. **Scalable and reusable interfaces**: Build once with Atomico, run anywhere — React, Vue, Svelte, HTML, WebView, you name it. Feels super simple — especially if you already know React. 🚀
2. **Open communication**: Atomico makes building and using web components easy — delivering a truly authentic dev experience. ⚡
3. **Performance**: Atomico is fast — [actually 60% faster than React](https://atomicojs.dev/perf). Your apps will fly! 🚀

### Atomico is fully type-friendly — full autocomplete powered by your IDE, TypeScript, and AI. 🚀

```tsx
import { c } from "atomico";

const MyComponent = c(
    ({ message }) => (
        <host>
            <h1>Helo {message}</h1>
        </host>
    ),
    {
        props: { message: String }
    }
);

customElements.define("my-component", MyComponent);
```

## Summary

Atomico is a modern micro-library created by Matias Trujillo, aka [@UpperCod](http://linkedin.com/in/uppercod)
, designed to simplify web component development. It replaces the need for classes and contexts with functions and scoped logic, supporting attributes, properties, methods, and events — making your components cleaner and easier to maintain.

## Join the Team by Contributing to Atomico

We’re happy to help with any support you need to make your contribution. Check out [CONTRIBUTING.md](./CONTRIBUTING.md)
for everything you need to get started contributing to Atomico’s web component code.

Not all contributions are code-related — you can also help us improve the [Atomico documentation](https://atomico.gitbook.io/doc/)
.

A good place to start is by [adding](https://github.com/atomicojs/atomico/issues/new/choose)
or picking up an item from the Atomico Roadmap
.

By default, all issues will appear in the backlog column of Atomico’s roadmap for refinement.

Let’s make Atomico better — together! 🚀

---
_Source: https://npm.io/package/atomico · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._