@aerem/ui

Cross-platform UI components for Aerem apps. One import, same API on web (shadcn-based) and React Native (CLI; iOS + Android).

Install

npm install @aerem/ui
# or
yarn add @aerem/ui

Peer dependencies

Install whichever apply to your target platform:

| Platform | Peer deps | |----------|-----------| | Web | react, react-dom, radix-ui | | RN CLI | react, react-native |

The package already ships its own clsx, tailwind-merge, and class-variance-authority as regular dependencies.

Usage

The import statement is the same on both platforms. Metro picks .native.js automatically; web bundlers see the default file.

import { Button } from '@aerem/ui';

export function Example() {
  return (
    <Button variant="outline" size="sm" onPress={() => console.log('hi')}>
      Click me
    </Button>
  );
}

On web, the click handler is onClick. On native, it's onPress. All other props (variant, size, disabled, children) are identical.

Available components

The barrel (import { ... } from "@aerem/ui") exports the lightweight components — anything that resolves with only react, react-dom, radix-ui, and lucide-react:

• Layout — Card, Item, ItemGroup, Separator, AspectRatio, Field, FieldGroup, Table, Avatar
• Inputs — Input, InputOTP, Textarea, Label, Checkbox, RadioGroup, Switch, Toggle, Slider, Select, InputGroup
• Buttons — Button, ButtonGroup, Badge
• Overlays — Dialog, Sheet, Popover, HoverCard, Tooltip, DropdownMenu, Menubar, Portal
• Feedback — Alert, Progress, Skeleton, Spinner, FullScreenLoader
• Navigation — Accordion, Tabs, Pagination
• File — FileUpload

Subpath-only components (heavy peer deps)

Some components have larger or stricter peer deps. They're shipped behind explicit subpath imports so consumers that don't use them never have to install those peers — and TypeScript projects on older versions don't get their declarations parsed.

| Subpath | Peer dep | Notes | |---|---|---| | @aerem/ui/combobox | @base-ui/react (>=1.0) | Requires TS 5+ because @base-ui/[email protected] ships TS 5.0+ syntax in its .d.ts files. | | @aerem/ui/command | cmdk (>=1.1) | | | @aerem/ui/drawer | vaul (>=1.1) | | | @aerem/ui/carousel | embla-carousel-react (>=8.0) | | | @aerem/ui/form | react-hook-form (>=7.40) | | | @aerem/ui/sonner | sonner (>=1.5) | | | @aerem/ui/stepper | @radix-ui/react-direction, @radix-ui/react-slot | |

// Lightweight — anywhere
import { Button, Table, TableHeader, Dialog } from "@aerem/ui";

// Heavy — only the file that uses them pays the peer-dep cost
import { Combobox, ComboboxInput, ComboboxContent } from "@aerem/ui/combobox";
import { Drawer, DrawerContent } from "@aerem/ui/drawer";
import { Form, FormField } from "@aerem/ui/form";

Module resolution compatibility

Subpath imports work under all TypeScript moduleResolution settings (classic node, node16, nodenext, bundler) and back to TypeScript 4.x. The package ships:

• package.json#exports — used by modern bundlers (Webpack 5+, Vite, esbuild, Turbopack) and TS 4.7+ with node16/nodenext/bundler.
• package.json#typesVersions — picked up by TypeScript 3.1+.
• Top-level proxy files (combobox.js, combobox.d.ts, lib/cn.js, etc.) — used as a fallback by classic moduleResolution: "node" and older Webpack.

You should not need to change your tsconfig.json to consume @aerem/ui.

Web setup (Tailwind)

The web Button uses Tailwind utility classes. Add the package to your Tailwind content glob so the classes get picked up:

// tailwind.config.ts
export default {
  content: [
    './app/**/*.{ts,tsx}',
    './node_modules/@aerem/ui/dist/**/*.js',
  ],
  // ...
};

You also need the shadcn CSS variables (--primary, --secondary, --muted, --destructive, --border, etc.) defined in your globals.css. If you already have a shadcn-style theme set up, you're done — or import one of the bundled themes:

/* Tailwind v4 (OKLCH, direct var() resolution) — the Aerem "Luma" green theme */
@import "@aerem/ui/styles/luma.css";

/* Tailwind v3 (HSL triples for hsl(var(--token))) */
@import "@aerem/ui/styles/theme.css";

The Luma theme ships light + dark palettes, the Poppins / Inter / IBM Plex Mono font stacks, the radius ladder and shadow scale.

One-time passcode (InputOTP)

A dependency-free, cross-platform segmented OTP input (auto-advance, backspace-to-previous, paste distribution):

import { InputOTP } from "@aerem/ui";

<InputOTP length={6} onComplete={(code) => verify(code)} />

React Native setup

Metro's default resolver handles the .native.js precedence — no extra config required. Just install and import.

If you're using npm/yarn with hoisting and you see "Invalid hook call" or "Cannot read property of null" errors, your bundler is loading a duplicate React. Force-dedupe shared modules from your metro.config.js:

// metro.config.js
const path = require('path');

module.exports = {
  resolver: {
    resolveRequest: (context, moduleName, platform) => {
      const head = moduleName.startsWith('@')
        ? moduleName.split('/').slice(0, 2).join('/')
        : moduleName.split('/')[0];
      if (['react', 'react-native'].includes(head)) {
        return context.resolveRequest(
          { ...context, originModulePath: path.join(__dirname, 'package.json') },
          moduleName,
          platform
        );
      }
      return context.resolveRequest(context, moduleName, platform);
    },
  },
};

Versioning

This package follows semver. While < 1.0.0, minor versions may include breaking changes.

License

UNLICENSED — internal Aerem use only.