Exportar código (HTML, React, Tailwind)

uxmagic.ai/dashboard/react-component-library

O que você pode exportar#

• Uma tela sozinha como HTML ou como componente React.
• Um projeto inteiro como projeto React com várias telas, montado e baixável como arquivo compactado.

O estilo é Tailwind CSS, com o tema do seu projeto expresso como design tokens, então o código carrega o mesmo sistema do canvas.

Exportar uma tela#

1. Selecione a tela.
2. Exportar → Código.
3. Escolha HTML ou React.
4. Copie ou baixe.

Exportar um projeto inteiro#

A exportação de projeto roda como uma tarefa em segundo plano — gera todas as telas e depois as monta em uma estrutura de projeto. Projetos maiores demoram mais; você acompanha o progresso e baixa quando terminar.

Como é o código#

É código de front-end real e legível: marcação semântica, classes utilitárias do Tailwind, tokens de tema para cores e tipografia, e imagens referenciadas por URL no armazenamento de recursos do seu projeto.

Duas coisas para prever:

• Os recursos são remotos por padrão. Baixe-os para o seu repositório antes de publicar, para que o seu site em produção não dependa das URLs de recursos da UXMagic.
• É um front-end. Não há camada de dados, roteamento nem gerenciamento de estado — você liga isso na sua aplicação.

Responsivo#

O código exportado reflete a tela exportada, naquela largura. Se você gerou variantes mobile e desktop separadas, exporte as duas e junte no seu breakpoint. Veja Variantes responsivas e por dispositivo.

Direto para um repositório#

Você pode enviar o código exportado direto para o GitHub em vez de baixar — veja Sincronização com o GitHub.