Ascend
Ascend
Docs
Design System

Usar em outro repositório

Como levar @ascend/tokens e @ascend/ui para outra codebase sem publicar no npm.

Os packages são privados (private: true). Não há registry público. Para outro codebase, use pack local ou link no disco.

Opção A — Pack local (recomendado)

No monorepo Ascend:

pnpm ds:pack

Isso gera .design-system-pack/ com:

  • ascend-tokens-0.1.0.tgz
  • ascend-ui-0.1.0.tgz
  • README.md + manifest.json

Copie a pasta (ou os .tgz) para o outro repo, por exemplo vendor/ascend-ds/, e declare:

{
  "dependencies": {
    "@ascend/tokens": "file:./vendor/ascend-ds/ascend-tokens-0.1.0.tgz",
    "@ascend/ui": "file:./vendor/ascend-ds/ascend-ui-0.1.0.tgz"
  }
}

Depois pnpm install. Os imports continuam iguais:

import { Button } from "@ascend/ui/button";
import { brandThemes } from "@ascend/tokens";
@import "@ascend/tokens/css";

Se o Ascend e o outro app estão irmãos no filesystem:

{
  "dependencies": {
    "@ascend/tokens": "link:../ASCEND/packages/tokens",
    "@ascend/ui": "link:../ASCEND/packages/ui"
  }
}

Útil em desenvolvimento. Para CI/entrega, prefira a Opção A (tarballs versionados no vendor do outro repo).

Opção C — Mesmo monorepo

Novo app em apps/* com:

{
  "dependencies": {
    "@ascend/tokens": "workspace:*",
    "@ascend/ui": "workspace:*"
  }
}

Checklist Next.js + Tailwind no consumidor

  1. CSS global: @import "@ascend/tokens/css";
  2. next.config: transpilePackages: ["@ascend/ui", "@ascend/tokens"]
  3. Tailwind v4 (CSS-first): no CSS de entrada, carregar o config e o source do UI — sem isso as classes dos primitives não entram no CSS gerado:
@import "tailwindcss";
@import "@ascend/tokens/css";

@config "../tailwind.config.ts";
@source "../node_modules/@ascend/ui/src/**/*.{ts,tsx}";

No monorepo Ascend o equivalente aponta para packages/ui/src. Em Tailwind v3 (legado), use content no tailwind.config com o mesmo glob. 4. React 19 5. Definir --font-montserrat (ou reapontar tipografia no tema) 6. <html data-brand="ascend"> (+ .dark via next-themes)

Sem isso, os imports resolvem mas as classes Tailwind / CSS vars não aparecem.

O que não fazer

  • Não publicar no npm público
  • Não copiar só components/ui na mão (perde tokens e contrato)
  • Não apontar workspace:* fora deste monorepo

Atualizar o outro app

  1. No Ascend: pnpm ds:pack
  2. Substituir os .tgz no vendor/ do outro repo
  3. pnpm install de novo (ou bump do path se o nome do tarball mudou de versão)

On this page