The umbrella package

asheeui is the package a shared screen imports. It publishes the intersection of the two renderers: a name is on the umbrella only when the web renderer and the native renderer both publish it with the same contract. The bundler picks the branch for the platform it is building for; the source file does not branch.

npm install asheeui @asheeui/web      # web application
npm install asheeui @asheeui/native   # Expo / React Native application

The renderer is a peer: an application installs the one it renders with, and the umbrella resolves its imports to that package. A shared package depends on asheeui and on neither renderer.

What the umbrella is

The full list is the portable surface. A name only one renderer has — Breadcrumb on the web, RowList and TabBar on a device — stays with that renderer and is a compile error in a shared file. That is the point: the error is the platform boundary, stated when the file is written rather than when a phone runs it.

Importing

import {
  Alert,
  Button,
  Card,
  Form,
  Grid,
  Input,
  Page,
  PageContent,
  Section,
  Stack,
  Text,
  ToastProvider,
  Typography,
  useToast,
  type AsheeConfig,
} from "asheeui";

Text and Typography are the same component under both names. useToast is the hook that reads the nearest ToastProvider. The layout kit (Page, Section, Container, Grid, Stack, HStack, VStack, Centered, Split) is on the same entry.

The provider

import { AsheeUIProvider, type AsheeConfig } from "asheeui";

const config: AsheeConfig = {
  color: {
    light: { primary: "#2563EB", background: "#FFFFFF" },
    dark: { primary: "#60A5FA", background: "#0B1220" },
  },
  defaultTheme: "system",
  defaultRadius: "md",
  components: { button: { size: "md" } },
};

export function Root({ children }: { children: React.ReactNode }) {
  return <AsheeUIProvider config={config}>{children}</AsheeUIProvider>;
}

One provider at each application's root. A component rendered outside it throws rather than falling back to a silent default.

The two subpaths

The umbrella's own subpaths are the parts that are not component names:

/* The web stylesheet, after Tailwind's own import. */
@import "tailwindcss";
@import "asheeui/styles";

// The native Tailwind preset.
const asheeui = require("asheeui/tailwind-preset");

module.exports = {
  presets: [asheeui],
  content: ["./src/**/*.{ts,tsx}", ...asheeui.content],
};

// The composition vocabulary that is not in the component inventory.
import { ActionGroup, SectionHeading } from "asheeui/section-kit";

SkipLink is the one section-kit name the umbrella does not carry, because it is web-only. It stays on @asheeui/web/section-kit.

When to import a renderer

The umbrella is the default, not a rule. Import the renderer directly when the code is already platform-specific:

The test for a shared file is simple: if the import would fail on the other platform, the file is not shared. Move the platform-specific part into each shell and keep the screen on the umbrella.

Versioning

The packages version independently; the umbrella states the renderers as peer ranges.

Take each version from this table rather than assuming one number covers the set.

Next

• The monorepo blueprint — one kit, two applications.
• The web renderer — the DOM branch, routing and SSR.
• React Native — Expo, NativeWind and the platform's behaviour.
• The portable surface — every name, and what is not there.