@dotnaos/ui-base

Generic web foundations for DotNaos interfaces, built on top of the shared @dotnaos/design package.

Install

bun add @dotnaos/ui-base

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 { Button, Card, ThemeProvider } from "@dotnaos/ui-base";

The package exposes one web component family. Layout structures and native components live in their own packages so Base stays small and domain-neutral:

import { Button, Card } from "@dotnaos/ui-base";
import { ContentPageLayout } from "@dotnaos/ui-layout";
import { NativeContainer } from "@dotnaos/ui-native";

Strict component identity and finite Slot contracts are built into the normal components. There is no separate strict-mode component tree or public strict entrypoint.

Button intent and shape are expressed as variants of one component:

<Button variant="primary" label="Save" icon="save" onPress={save} />
<Button variant="secondary" label="Cancel" onPress={cancel} />
<Button variant="ghost" label="More" iconAfter="chevronDown" onPress={open} />
<Button variant="icon" accessibilityLabel="Delete item" icon="trash" onPress={remove} />

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

Geometry capabilities

Rounded geometry is expressed through small capability interfaces instead of repeated component-specific props. RadiusProps provides radius="theme" | "full"; AspectProps provides aspect="auto" | "square"; and GeometryProps combines both. The defaults are theme and auto.

theme follows the active theme's corner treatment. full always uses a fully rounded corner and is independent of the global squircle or superellipse setting. The aspect ratio determines the silhouette:

<Button variant="primary" label="Continue" radius="full" />
<Surface radius="full">Pill surface</Surface>
<Surface radius="full" aspect="square">Circular surface</Surface>

Container, Surface, Box, and Card expose both capabilities. Text buttons, Input, Textarea, and the Select trigger expose only radius. Components with a fixed silhouette use the same contract internally: icon buttons are full + square, while chips, slider parts, and tab pills are full + auto. Content and layout-only primitives do not expose geometry props.

CDN usage

Use the public npm package through npm-compatible CDNs:

import { Button } from "https://esm.sh/@dotnaos/ui-base@VERSION";
import { Button } from "https://cdn.jsdelivr.net/npm/@dotnaos/ui-base@VERSION/+esm";
import { Button } from "https://unpkg.com/@dotnaos/ui-base@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/ui-base build

Licensing

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

The package owns its component implementations directly and does not wrap or select another component library.