---
title: Use the Atomic library
slug: latest-atomic-home
canonical_url: https://docs.coveo.com/en/atomic/latest/
collection: atomic
source_format: adoc
---
# Use the Atomic library
## What's Coveo Atomic?

_[Coveo Atomic](https://docs.coveo.com/en/lcdf0264/)_ is a [web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) library for assembling responsive, accessible, and future-proof Coveo-powered [search interfaces](https://docs.coveo.com/en/2741/).
[Atomic](https://docs.coveo.com/en/lcdf0264/) components are self-encapsulated, composable, and lightweight.
Under the hood, [Atomic](https://docs.coveo.com/en/lcdf0264/) relies on the [Coveo Headless](https://docs.coveo.com/en/headless/latest/) library to interface with the [Coveo Platform](https://docs.coveo.com/en/186/) and handle the search application state.

![Diagram showing where Headless fits with Atomic and the APIs](https://docs.coveo.com/en/assets/images/headless/headless.svg)

## When Should I Use Atomic?

Atomic is an ideal option to quickly assemble a feature-rich Coveo-powered search interface without having to implement all of its UI components.

If you intend to use your own search UI component library to interface with Coveo, then you should use the [Coveo Headless library](https://docs.coveo.com/en/headless/latest/) instead.

If you want to assemble a search UI in a [Coveo for Salesforce](https://docs.coveo.com/en/1104/) implementation, you should use [Quantic](https://docs.coveo.com/en/quantic/latest), our library of Lightning Web Components built using the Coveo Headless library.

> **Important**
>
> Atomic for Commerce components are in open beta and remain under active development.
> 
> Atomic for Commerce hasn't yet gone through a formal accessibility review.
> If you have accessibility needs, contact your customer success manager and we'll work with you to address them.

The following interactive example uses Coveo Atomic to create a basic search page.


<iframe src="https://codesandbox.io/embed/github/coveo/atomic-documentation-codesandbox/tree/master/?fontsize=14&hidenavigation=1&theme=dark&view=split"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="coveo-atomic-example-latest"
     allow=""
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

## Where Do I Start?

For a quick overview of the [Atomic library](https://docs.coveo.com/en/lcdf0264/), see the [Usage](https://docs.coveo.com/en/atomic/latest/usage) section.

To use the [Atomic library](https://docs.coveo.com/en/lcdf0264/) in a [React](https://reactjs.org/), [Angular](https://angular.io/), or [Vue.js](https://vuejs.org/) project, check out the [Atomic React wrapper](https://docs.coveo.com/en/atomic/latest/usage/frameworks/atomic-react-wrapper), [Atomic Angular wrapper](https://docs.coveo.com/en/atomic/latest/usage/frameworks/atomic-angular-wrapper), or [Atomic Vue](https://docs.coveo.com/en/atomic/latest/usage/frameworks/atomic-vue) documentation, respectively.

To create a starter [Atomic](https://docs.coveo.com/en/lcdf0264/) project, check out the [Coveo CLI](https://docs.coveo.com/en/cli/).

The [Reference section](https://docs.coveo.com/en/atomic/latest/reference) provides detailed information on each of the components available from the [Atomic library](https://docs.coveo.com/en/lcdf0264/).