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

# Configuração Inicial

> Configure o provider e estilos

## 1. Importar os Estilos

O SDK requer estilos CSS para funcionar corretamente. Importe o arquivo de estilos no seu projeto:

```tsx theme={null}
// No seu arquivo principal (App.tsx, _app.tsx, layout.tsx, etc.)
import '@triglit/react-sdk/styles.css';
```

<Note>
  Se você estiver usando Next.js, importe no `_app.tsx` ou no `layout.tsx` (App Router). Se estiver usando Create React App ou Vite, importe no `index.tsx` ou `main.tsx`.
</Note>

## 2. Configurar o Provider

Envolva sua aplicação (ou a parte que usa o SDK) com o `TriglitProvider`:

```tsx theme={null}
import { TriglitProvider } from '@triglit/react-sdk';
import '@triglit/react-sdk/styles.css';

function App() {
  return (
    <TriglitProvider config={{ apiKey: 'pk_sua_chave_aqui' }}>
      {/* Sua aplicação */}
    </TriglitProvider>
  );
}
```

## 3. Configuração Completa

```tsx theme={null}
import { TriglitProvider } from '@triglit/react-sdk';
import '@triglit/react-sdk/styles.css';

function App() {
  return (
    <TriglitProvider
      config={{
        // Chave de API (obrigatória)
        apiKey: 'pk_sua_chave_aqui',
        
        // URL base da API (opcional, padrão: https://api.triglit.com)
        baseURL: 'https://api.triglit.com',
        
        // Configuração de i18n (opcional)
        i18n: {
          locale: 'pt-BR',
          // ou traduções customizadas
          translations: {
            'workflow.editor.save': 'Salvar',
            // ...
          },
        },
        
        // Callbacks para eventos (opcional)
        callbacks: {
          onWorkflowVersionCreated: (version) => {
            console.log('Versão criada:', version);
          },
          onWorkflowVersionPublished: (response) => {
            console.log('Versão publicada:', response);
          },
          // ...
        },
      }}
    >
      {/* Sua aplicação */}
    </TriglitProvider>
  );
}
```

## Configuração via Variáveis de Ambiente

Você pode configurar a chave de API via variáveis de ambiente:

```bash theme={null}
# .env.local ou .env
NEXT_PUBLIC_TRIGLIT_PUBLISHABLE_KEY=pk_sua_chave_aqui
```

```tsx theme={null}
// O SDK detecta automaticamente a variável de ambiente
<TriglitProvider config={{}}>
  {/* Sua aplicação */}
</TriglitProvider>
```

O SDK procura por estas variáveis (nessa ordem):

1. `NEXT_PUBLIC_TRIGLIT_PUBLISHABLE_KEY` (recomendado para Next.js)
2. `TRIGLIT_PUBLISHABLE_KEY`