---
url: https://nsh.dev/versions/v0.2.0/modules
description: "The modules an NSH app imports, what each one exports, and how they are organized."
---

# Modules

An NSH app imports everything it uses from a small set of modules. They are all native: the reactive graph, the renderer and every module are implemented in Rust inside the runtime, and the bundler keeps `import ... from "nsh/..."` as imports instead of copying code into your bundle. Your bundle only holds your own code.

```tsx
import { mount, signal } from "nsh";
import { createAnimatedValue } from "nsh/animated";
import { windowSize } from "nsh/device";
import { SafeAreaView } from "nsh/base";
```

## Three layers

NSH's UI is built in three layers, as GPUI Kit's is (`gpui`, `gpui-base`, `gpui-component`):

| Layer | Modules | What it gives an app |
|---|---|---|
| Primitives | `nsh`, `nsh/<module>` | Reactivity, the host elements, layout, lists, canvas, animation, gestures, device information and the platforms' own APIs |
| Base components | [`nsh/base`](https://nsh.dev/versions/v0.2.0/modules/nsh-base.md) | Unstyled components that own behavior, state, focus and accessibility: a button, Markdown and HTML documents, navigation stacks and dialogs, safe areas, the system's dialogs and the software keyboard, on every platform |
| Component library | your app's, or one from the community | Buttons, cards, rows and screens with a look |

The look of an app is the app's own. Its component library is the third layer: components it writes from the [host elements](https://nsh.dev/versions/v0.2.0/elements.md) and `nsh/base`, styled with `style`, [Tailwind](https://nsh.dev/versions/v0.2.0/docs/tailwind.md) classes and its theme, Rust components it ships in [its own crate](https://nsh.dev/versions/v0.2.0/docs/rust.md), or a library the community publishes on the same foundation.

There is no catch-all module: each API lives in exactly one place. Platform-only APIs live in `nsh/ios`, `nsh/android` and `nsh/desktop` (macOS, Windows, Linux); all can be imported on every platform, so one bundle runs everywhere (their calls do nothing elsewhere, and `isAvailable` tells you which platform you are on).

Types are generated from the runtime: `nsh init`, `nsh build`, `nsh dev` and `nsh test` write `.nsh/types` next to your app, so the TypeScript declarations always match the runtime you build with (see [Project structure](https://nsh.dev/versions/v0.2.0/docs/project-structure.md)).

## All modules

| Module | Exports | Page |
|---|---|---|
| `nsh` | `signal`, `computed`, `effect`, `batch`, `untracked`, `cleanup`, `context`, `split`, `mount`; the primitives `View`, `Text`, `Scroll`, `Input`, [`List`](https://nsh.dev/versions/v0.2.0/modules/nsh-list.md), [`Image`](https://nsh.dev/versions/v0.2.0/modules/nsh-image.md) (with `Image.getSize`, `Image.prefetch`), [`Canvas`](https://nsh.dev/versions/v0.2.0/modules/nsh-canvas.md) (with `Path2D`, `CanvasRenderingContext2D`, `CanvasGradient`), [`WebView`](https://nsh.dev/versions/v0.2.0/modules/nsh-webview.md), [`Video`](https://nsh.dev/versions/v0.2.0/modules/nsh-video.md); the types of elements, styles, events and JSX (`YNode`, `ViewStyle`, ...) | [nsh](https://nsh.dev/versions/v0.2.0/modules/nsh.md) |
| `nsh/base` | `Button`; `TextView`, `SelectionArea`; `createNavStack`, `NavStack`, `NavPage`, `Dialog`; `SafeAreaView`, `safeArea`, `safeAreaInsets`; `AlertDialog`; `Keyboard`, `keyboardFrame`, `KeyboardAvoidingView` | [nsh/base](https://nsh.dev/versions/v0.2.0/modules/nsh-base.md) |
| `nsh/animated` | `createAnimatedValue`, `AnimatedValue`, `AnimatedNode`, `Animated`, `Easing`, `LayoutAnimation` | [nsh/animated](https://nsh.dev/versions/v0.2.0/modules/nsh-animated.md) |
| `nsh/device` | `windowSize`, `colorScheme`, `setColorScheme`, `fontScale`, `pixelRatio`, `locale`, `platform` | [nsh/device](https://nsh.dev/versions/v0.2.0/modules/nsh-device.md) |
| `nsh/gesture` | `PanResponder` | [nsh/gesture](https://nsh.dev/versions/v0.2.0/modules/nsh-gesture.md) |
| `nsh/clipboard` | `Clipboard.writeText`, `Clipboard.readText`, `Clipboard.writeImage`, `Clipboard.readImage`, `Clipboard.readFiles` | [nsh/clipboard](https://nsh.dev/versions/v0.2.0/modules/nsh-clipboard.md) |
| `nsh/storage` | `Storage.getItem`, `Storage.setItem`, `Storage.removeItem`, `Storage.keys`, `Storage.clear` | [nsh/storage](https://nsh.dev/versions/v0.2.0/modules/nsh-storage.md) |
| `nsh/keymap` | `keymap.bind` (keyboard shortcuts: `mod+k`, `ctrl+shift+p`, ...) | [nsh/keymap](https://nsh.dev/versions/v0.2.0/modules/nsh-keymap.md) |
| `nsh/native` | `nativeComponent`, `nativeModule` (components and functions the embedding app registers) | [nsh/native](https://nsh.dev/versions/v0.2.0/modules/nsh-native.md) |
| `nsh/accessibility` | `announce`, `setAccessibilityFocus`, `screenReaderEnabled`, `reduceMotion` | [nsh/accessibility](https://nsh.dev/versions/v0.2.0/modules/nsh-accessibility.md) |
| `nsh/ios` | `isAvailable`, `InputAccessoryView` | [nsh/ios](https://nsh.dev/versions/v0.2.0/modules/nsh-ios.md) |
| `nsh/android` | `isAvailable`, `Toast`, `BackHandler` | [nsh/android](https://nsh.dev/versions/v0.2.0/modules/nsh-android.md) |
| `nsh/desktop` | `isAvailable`, `Window` (title, title bar, maximize, full screen), `titleBar`, `Menu` (application menu, context menus) | [nsh/desktop](https://nsh.dev/versions/v0.2.0/modules/nsh-desktop.md) |
| Standard modules | `buffer`, `console`, `crypto`, `fs/promises`, `net`, `os`, `path`, `process`, `url`, `websocket`, `zlib` | [Standard modules](https://nsh.dev/versions/v0.2.0/modules/standard-modules.md) |
| Globals | `fetch`, `URL`, `TextEncoder`, `Blob`, `FormData`, `AbortController`, `Intl`, timers, `console`, `requestAnimationFrame`, ... (no import) | [Global APIs](https://nsh.dev/versions/v0.2.0/modules/globals.md) |

Reference pages that are not modules:

| Page | Covers |
|---|---|
| [Style reference](https://nsh.dev/versions/v0.2.0/modules/style-reference.md) | Every style key, its type and meaning |
| [Tailwind reference](https://nsh.dev/versions/v0.2.0/modules/tailwind-reference.md) | The Tailwind utilities and variants `class` accepts |

## Host elements

The host elements are components imported like everything else: `View`, `Text`, `Scroll`, `Input`, `Image`, `List`, `Canvas`, `WebView` and `Video` from `nsh`, the base components (`Button`, `Dialog`, `NavStack`, `NavPage`, `SafeAreaView`, `KeyboardAvoidingView`) from `nsh/base`, `InputAccessoryView` from `nsh/ios`. Only `If` and `Each` are globals. The compiler makes the elements in place, so the imports cost nothing at run time. Their props are documented under [Elements](https://nsh.dev/versions/v0.2.0/elements.md).