# Atomico

![](https://724796702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-L_3P325_k_Bez-RbDQb-1769347644%2Fuploads%2Fgit-blob-5279db367bef2df7303c972c99d8bb5d9a304eaa%2Fheader-2.svg?alt=media)

{% tabs %}
{% tab title="JSX" %}

```jsx
import { c } from "atomico"; // 2.5kB

const MyComponent = c(
  ({name})=><host shadowDom>Hello, {name}</host>,
  {
    props: { name: String }
  }
);

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

{% endtab %}

{% tab title="TSX" %}

```jsx
import { c } from "atomico"; // 2.5kB

const MyComponent = c(
  ({name})=><host shadowDom>Hello, {name}</host>,
  {
    props: { name: String }
  }
);

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

{% endtab %}
{% endtabs %}

Atomico simplifica el aprendizaje, flujo de trabajo y el mantenimiento al crear webcomponents y lo logra con :

1. **Interfaces escalable y reutilizable**: con Atomico el código es más simple y podrás aplicar practicas que faciliten la reutilización de tu código.
2. **Comunicación abierta**: su webcomponent podrá comunicar su estado sea por eventos, propiedades o métodos.
3. **Agnóstico**: su webcomponent servirá en cualquier librería compatible con la web, ejemplo React, Vue o Svelte.
4. **Performance**: Atomico posee un performance comparativo a niveles de Svelte, ganando la tercera posición en performance según [**webcomponents.dev**](https://twitter.com/atomicojs/status/1391775734641745929) en una comparativa de 55 librerías entre las cuales esta React, Vue, Stencil y Lit.