Nxar UI library

Dentro de un Visual Component tenés la misma librería de componentes que usa el admin, precargada como window.Nxar, más la hoja de estilos del tema (clases Tailwind y tokens). No hay nada que importar ni reimplementar: tu componente se ve como el resto de Nxar, en claro y en oscuro, y recibe las mejoras de la librería automáticamente.

Si todavía no escribiste un Visual Component, empezá por Visual Components. Para ver cada componente en vivo con sus props, la Component Library.

Cómo se usan

export default function Summary({ record }) {
  return (
    <Nxar.PageCard>
      <Nxar.PageCardHeader title="Contratos" icon={<Nxar.Icon name="scroll-text" size="xs" />} count={3} />
      <div className="flex flex-col gap-3 p-4">
        <Nxar.Alert><Nxar.AlertTitle>Atención</Nxar.AlertTitle><Nxar.AlertDescription>Vence en 7 días.</Nxar.AlertDescription></Nxar.Alert>
        <Nxar.Button variant="brand" size="sm" onClick={() => sdk.toast.success("Listo")}>Renovar</Nxar.Button>
      </div>
    </Nxar.PageCard>
  );
}

Catálogo

Los componentes del shell que dependen del esquema o del chrome (Sidebar, ViewLayout, SettingsListView, ConditionBuilder, RelationField, FieldRenderer, RichTextEditor) no están en el iframe. ConfirmDialog y Toaster se usan a través de sdk.confirm() y sdk.toast() (SDK). El set es curado para mantener liviano el bundle; si te falta algo recurrente, pedilo.

Monedas

Nxar.formatCurrency(monto, codigo) formatea con el símbolo y el locale correctos. Sin código, usa la moneda corporativa que llega en ctx.defaultCurrency; en multi-moneda, pasá record.currency_code. convertCurrency y resolveRecordCurrency aplican las cotizaciones de ctx.currencies. Ver Monedas.

Iconos

Sin import, los iconos van por nombre (los de lucide , en kebab-case):

<Nxar.Icon name="circle-check" />                              // 16px, hereda el color
<Nxar.Icon name="triangle-alert" size="sm" className="text-destructive" />

Tamaños: xs 12 · sm 14 · md 16 (default) · lg 20 · xl 24. Usá size, no className="size-4" (ver la nota de Tailwind). En el slot de icono de una card va size="xs".

Set disponible

También expuesto en Nxar.ICON_NAMES:

Un nombre que no existe renderiza circle-dashed en vez de romper el componente. Como el nombre es un string, puede venir de tus datos:

const STATUS_ICON = { active: "circle-check", pending: "circle-dashed", expired: "triangle-alert" };
<Nxar.Icon name={STATUS_ICON[record.status] ?? "circle-help"} size="sm" />

Tailwind classes

El CSS del iframe trae todas las clases que usa la librería: bg-card, text-muted-foreground, border, rounded-md, flex flex-col gap-3, p-4, text-sm, font-semibold…

Tokens del tema (CSS vars): --background / --foreground · --card · --popover · --primary · --secondary / --muted / --accent · --destructive · --border / --input / --ring · --brand / --brand-soft / --brand-hover. Siguen el tema claro/oscuro del usuario; no hardcodees colores.

Limitaciones

• Overlays con portal (Dialog, Popover, Tooltip) se dibujan dentro del iframe, que crece para mostrarlos; un Dialog de pantalla completa queda atrapado. Para modales reales, sdk.openDialog / sdk.confirm.
• Callbacks en props de sdk.* no cruzan al shell.
• Formularios: acciones con onClick, nunca onSubmit.

Migración desde 0.1.x