# You can create amazing webcomponents

We invite you to discover part of the development experience you will get with Atomico:

### Create really fast webcomponents

**Quick components to write** since with Atomico you will require fewer lines of code to declare your webcomponents which will help you to be more productive 

**Fast in performance**, since Atomico sends less code to the client, making your interface load quickly

<figure><img src="https://3886616710-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-L_3P325_k_Bez-RbDQb-887967055%2Fuploads%2Fpme8dJfv8jKyQpmcNx7i%2Fdiff.png?alt=media&#x26;token=386d29c9-7725-47f1-8be7-d132954249f2" alt=""><figcaption></figcaption></figure>

### Create web components with less code

This is thanks to a functional orientation inherited from React hooks plus some internal optimization from Atomic that ease the process of shaking the tree at compile time, achieving in this way sending the client a highly optimized JS that only has what you really use

### Create webcomponents with a functional orientation

This is thanks to Atomico's reliance on React hooks syntax plus the ability to completely eliminate the need for this when using webcomponents.

### Create friendly webcomponents for React, Vue and other libraries

Atomic offers additional coverage for native behavior for React and Vue, allowing your component to be more embed-friendly, example React:

{% code title="react-app.tsx" %}

```tsx
import { Button } from "@formas/button/react";

function App(){
   return <>
      <h1>React App!</h1>
      <Button onClick={()=>console.log("Click!")}>
         Submit
      </Button>
   </>
}
```

{% endcode %}