> ## Documentation Index
> Fetch the complete documentation index at: https://docs-loja.usecorvex.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Storefront Components

> Biblioteca oficial de Web Components públicos da Corvex — catálogo, produto, variantes e carrinho sem React obrigatório.

**Corvex Storefront Components** são Custom Elements oficiais (`@corvex/storefront-elements`) para embutir comércio Corvex em HTML, React, Vue ou qualquer host.

Isto **não** é o tema React da loja nem o Dev Playground (`corvex dev`). Temas continuam em [Arquitetura do tema](https://docs-loja.usecorvex.com.br/themes/structure.md) e no Theme SDK.

## O que entrega

| Peça | Papel |
| - | - |
| `@corvex/storefront-elements` | Custom Elements (Lit) + cliente mock/live |
| Playground local | Editors HTML/CSS/JS + preview sandboxed |
| Contratos | Mesmos shapes públicos `2026-08` (`Product`, `Cart.items`, …) |

## Quickstart

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<script type="module">
  import '@corvex/storefront-elements';
</script>

<corvex-store mode="mock">
  <corvex-cart-drawer></corvex-cart-drawer>
  <corvex-product-list first="4"></corvex-product-list>
</corvex-store>
```

* `mode="mock"` — fixtures determinísticas (playground e demos)
* `mode="live"` — dados públicos da loja (sem tokens admin; `credentials: 'omit'`)

## Componentes v1

`corvex-store` · `corvex-product` · `corvex-product-list` · `corvex-product-card` · `corvex-product-price` · `corvex-product-media` · `corvex-variant-selector` · `corvex-collection` · `corvex-collection-list` · `corvex-cart` · `corvex-add-to-cart` · `corvex-cart-count` · `corvex-cart-drawer`

## Próximos passos

* [Getting started](https://docs-loja.usecorvex.com.br/storefront-components/getting-started.md)
* [Referência de tags](https://docs-loja.usecorvex.com.br/storefront-components/reference.md)
* [Playground](https://docs-loja.usecorvex.com.br/storefront-components/playground.md)
* [Segurança](https://docs-loja.usecorvex.com.br/storefront-components/security.md)
* Contratos de dados: [Product](https://docs-loja.usecorvex.com.br/data/resources/product.md) · [Cart](https://docs-loja.usecorvex.com.br/data/resources/cart.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.