@dotnaos/react-ui

Cross-platform React components for DotNaos, built on top of the shared @dotnaos/design package.

Install

bun add @dotnaos/react-ui

Web apps should import the shared CSS before rendering the components:

import "@dotnaos/design/tokens.css";
import "@dotnaos/design/theme.css";
import "@dotnaos/design/styles.css";

Import

import { Card, PrimaryButton, ThemeProvider } from "@dotnaos/react-ui";

The default entrypoint includes a react-native condition. Web bundlers receive the web implementation, while React Native-aware bundlers receive the native implementation. Explicit platform entrypoints are also available:

import { PrimaryButton } from "@dotnaos/react-ui/web";
import { Button as NativeButton } from "@dotnaos/react-ui/native";

Strict UI entrypoints provide a root-first component tree with namespace exports. Use the full path when architecture should be explicit:

import { ui } from "@dotnaos/react-ui/native-strict";

<ui.root.app app="daily">
  <ui.layout.mobile.tabs>
    <ui.slot.main>
      <ui.screen.view name="today">
        <ui.primitive.text text="Today" tone="heading" />
      </ui.screen.view>
    </ui.slot.main>
    <ui.slot.tabbar>
      <ui.nav.tabs>
        <ui.nav.item active label="Today" />
      </ui.nav.tabs>
    </ui.slot.tabbar>
  </ui.layout.mobile.tabs>
</ui.root.app>

Use layer imports when a file already has enough local context:

import { root } from "@dotnaos/react-ui/native-strict/root";
import { mobile } from "@dotnaos/react-ui/native-strict/layout";
import { slot } from "@dotnaos/react-ui/native-strict/slot";

<root.app app="daily">
  <mobile.tabs>
    <slot.main />
    <slot.tabbar />
  </mobile.tabs>
</root.app>

The web equivalent is available from @dotnaos/react-ui/strict. Root and layout components validate their direct children by default, so raw platform elements must go through ui.escape.custom with a reason.

Web buttons use explicit intent components instead of a generic variant prop:

<PrimaryButton label="Save" icon="save" onPress={save} />
<SecondaryButton label="Cancel" onPress={cancel} />
<GhostButton label="More" iconAfter="chevronDown" onPress={open} />
<IconButton accessibilityLabel="Delete item" icon="trash" onPress={remove} />

The public button API accepts structured data only. Icons must use names from the DotNaos icon catalog.

CDN usage

Use the public npm package through npm-compatible CDNs:

import { PrimaryButton } from "https://esm.sh/@dotnaos/react-ui@VERSION";
import { PrimaryButton } from "https://cdn.jsdelivr.net/npm/@dotnaos/react-ui@VERSION/+esm";
import { PrimaryButton } from "https://unpkg.com/@dotnaos/react-ui@VERSION/dist/index.js";

The unpkg entrypoint serves the built ESM file directly. Because react, react-dom, and react/jsx-runtime remain peer/runtime imports, esm.sh and jsDelivr +esm provide the smoothest browser CDN experience.

Build

bun --filter @dotnaos/react-ui build

Licensing

This package is published under the MIT license and includes LICENSE and THIRD_PARTY_NOTICES.md in the npm tarball.

Only open-source shadcn/ui patterns and open-source HeroUI packages are used. No HeroUI Pro code, templates, assets, or components are included.