@dotnaos/react-ui

@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";

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.