> ## 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.

# Snippet Contract

> Contrato canônico de um Snippet — componente reutilizável importado por Sections.

> Esta página é o **contrato canônico** para Snippets na Corvex.

Um **Snippet** é um componente React reutilizável usado **dentro** de sections. Não é registrado em `theme.json` e não aparece na paleta do Editor como section.

***

## MUST — arquivos

```text theme={"theme":{"light":"github-light","dark":"github-dark"}}
snippets/{id}/snippet.jsx    REQUIRED
snippets/{id}/styles.css     OPTIONAL
```

`{id}` SHOULD ser kebab-case (`product-card`, `price-badge`).

***

## MUST — export

`snippet.jsx` MUST exportar default um componente React.

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
export default function ProductCard({ product }) {
  return (
    <a href={product.url}>
      <span>{product.title}</span>
    </a>
  );
}
```

***

## MUST — import no build

Sections MUST importar via alias resolvido no build:

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
import ProductCard from '@corvex/snippets/product-card';
```

O alias `@corvex/snippets/{id}` mapeia a `snippets/{id}/snippet.jsx`.

Equivalente no código do tema: `@corvex/theme-sdk` para SDK; snippets usam `@corvex/snippets/*`.

***

## Props

* **Sem contrato global** — o autor do snippet define props.
* SHOULD documentar props no JSDoc ou no guia da section que consome.
* Dados MUST vir de `data`, `settings` ou hooks do Theme SDK — não inventar fetch ad hoc sem SDK.

***

## MUST NOT

* Não listar snippet em `theme.json` → `sections` ou `blocks`.
* Snippets são importados em JSX — `import X from '@corvex/snippets/{id}'`.
* SHOULD NOT conter lógica de página inteira — use Section para composição no Editor.

***

## Snippet vs Section

| | Section | Snippet |
| - | - | - |
| Paleta do Editor | Sim | Não |
| `schema.json` | Sim | Não |
| Reutilização | Por instância na página | Por import no código |
| Settings do merchant | Sim | Não (props do parent) |

***

## Exemplo mínimo válido

`snippets/greeting/snippet.jsx`:

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
export default function Greeting({ text }) {
  return <span className="greeting">{text}</span>;
}
```

Uso em section:

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
import Greeting from '@corvex/snippets/greeting';

export default function HelloSection({ settings = {} }) {
  return (
    <section>
      <Greeting text={settings.title || 'Olá'} />
    </section>
  );
}
```

***

## Veja também

* [Section Contract](https://docs-loja.usecorvex.com.br/reference/contracts/section.md)
* [Product Contract](https://docs-loja.usecorvex.com.br/reference/contracts/product.md) — objeto típico em snippets de card


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