Many teams decide to use Atomico for the development of their design systems thanks to its similarity with React, which greatly facilitates the incorporation of human talent into the development of design systems.

Why use Atomico to create design systems?

1. Atomico offers you Storybook 7 Support with superpowers, thanks to @atomico/storybook you can create stories without the need to declare the argTypes or args since @Atomico/storybook creates them for you

2. @atomico/vite makes it easy for you to build in NPM-friendly ESM format

3. @atomico/exports makes it easy for you to export your code by automatically adding the metadata so that it is optimally consumed as a package, @atomico/exports can even automatically create wrappers for React, Preact and Vue

4. @atomico/potscss-tokens makes it easy for you to maintain a token system efficiently and sustainably

Use cases

IBM IX

We thank IBM IX since they have shared their experience in the development of the design system for their client Barmer, you can follow this case through Discord or Github.

https://github.com/atomicojs/atomico/discussions/92

Creating sites with Atomico is really easy and SEO friendly because:

1. With Atomico you can perform SSR and SSG thanks to tools like Astro build, with Astro + Atomico you can send previously rendered components to the client, thus giving a result at the HTML level that is really friendly with search engines.

2. Atomico being really small (3kB) your sites will load fast, especially if you only apply SSG with Atomico.

3. Atomico not only supports SSR through Astro, you can SSR today with Atomico in Next.js, Express or any environment that supports ESM modules.

4. (Coming soon) Yes, with Atomico soon you will be able to create blocks for Gutenberg easily

We recommend for SSR or SSG based sites

we recommend you for new projects

We recommend the use of Astro build with the @atomico/astro plugin, with this you can create sites like atomicojs.dev

we recommend you for projects based on React

Preferably we recommend Astro + React + Atomico, but in case your project inherits the use of Next.js you can do SSR with Atomico in Next.js using @atomico/react.

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

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: