`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.

```bash
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

| Property | Value |
| --- | --- |
| Entry | `asheeui` → `@asheeui/web` on the web, `@asheeui/native` under the `react-native` condition |
| Names | 182: 90 from `@asheeui/core`, 92 from the branch renderer, plus `AsheeConfig` |
| Styles (web) | `asheeui/styles` |
| Tailwind preset (native) | `asheeui/tailwind-preset` |
| Section kit | `asheeui/section-kit` |
| Configuration type | `AsheeConfig` — `ExternalConfig` on the web, the native config on a device |
| Source of truth | `PORTABLE_API` in `@asheeui/core`, generated into both entries |

The full list is [the portable surface](/concepts/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

```tsx
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

```tsx
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:

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

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

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

```tsx
// 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:

| Need | Import from |
| --- | --- |
| `Breadcrumb`, `ResizableScreen`, `SkipLink`, the keyboard family | `@asheeui/web` |
| `RowList`, `TabBar` | `@asheeui/native` |
| A web-only prop or a DOM element | `@asheeui/web` |
| A platform module (`Linking`, `Platform`, safe areas) | `react-native` — this file is already native-only |
| Everything a shared screen needs | `asheeui` |

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.

| Package | Current |
| --- | --- |
| `asheeui` | `3.0.0` |
| `@asheeui/core` | `3.0.0` |
| `@asheeui/web` | `2.8.0` |
| `@asheeui/native` | `2.8.0` |
| `@asheeui/puck` | `2.3.1` |
| `@asheeui/cli` | `1.0.1` |

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

## Next

- [The monorepo blueprint](/guides/monorepo) — one kit, two applications.
- [The web renderer](/platforms/web) — the DOM branch, routing and SSR.
- [React Native](/platforms/native) — Expo, NativeWind and the platform's behaviour.
- [The portable surface](/concepts/portable-surface) — every name, and what is not there.