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

# Exemplos

> Exemplos práticos de uso

## Exemplo Básico

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

function App() {
  return (
    <TriglitProvider config={{ apiKey: 'pk_...' }}>
      <div className="h-screen">
        <WorkflowEditor 
          workflowId="wf_123"
          onSave={(versionId) => {
            alert(`Versão ${versionId} salva com sucesso!`);
          }}
        />
      </div>
    </TriglitProvider>
  );
}
```

## Exemplo com Customização

```tsx theme={null}
import {
  TriglitProvider,
  WorkflowEditor,
} from '@triglit/react-sdk';
import '@triglit/react-sdk/styles.css';
import { toast } from 'sonner'; // ou sua biblioteca de toast

function App() {
  return (
    <TriglitProvider
      config={{
        apiKey: 'pk_...',
        i18n: {
          locale: 'pt-BR',
        },
        callbacks: {
          onWorkflowVersionCreated: (version) => {
            toast.success('Versão criada com sucesso!');
          },
          onWorkflowVersionPublished: () => {
            toast.success('Versão publicada!');
          },
          onWorkflowVersionCreateError: (error) => {
            toast.error(`Erro: ${error.message}`);
          },
        },
      }}
    >
      <WorkflowEditor workflowId="wf_123" />
    </TriglitProvider>
  );
}
```

## Troubleshooting

### Estilos não aparecem

Certifique-se de importar o CSS:

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

### Erro de autenticação

Verifique se a chave de API está correta e se está usando o tipo correto (pk\_ para frontend, sk\_ para backend).

### Componentes não renderizam

Certifique-se de que o `TriglitProvider` envolve todos os componentes do SDK.

### Problemas com TypeScript

O SDK é totalmente tipado. Se você encontrar erros de tipo, verifique se está usando a versão mais recente:

```bash theme={null}
npm update @triglit/react-sdk
```