@duestel/native-ui

Material 3 (M3) React Native component library — the native counterpart of @duestel/ui, ported one-to-one from the Duestel design guide.

Same M3 token names, same component API shape (compound Root/Item/… parts), rebuilt on React Native primitives instead of the web's DOM + Base UI.

Stack

• Expo (SDK 56) + React Native 0.82 + React 19
• NativeWind v4 (Tailwind v3) — className on RN primitives; the M3 token classes (bg-primary, text-on-surface, rounded-extra-large, text-title-medium, shadow-mm-1, …) are identical to the web package, so visuals port directly. Tokens live in tailwind.config.js + src/styles/global.css.
• Reanimated v4 — interactive + enter/exit animation
• react-native-gesture-handler — sliders, sheets, swipe, resizable
• @gorhom/bottom-sheet — sheet/drawer/select/menu modals
• @gorhom/portal — overlays (dialog, menu, popover, tooltip, toast) that must escape clipping; the native analogue of the web portal
• lucide-react-native — icons

Usage

Wrap your app once in NativeUIProvider (gesture root + safe area + portal + bottom-sheet + theme + Readex Pro font loading):

import { NativeUIProvider, Button, Switch } from '@duestel/native-ui'

export default function App() {
  return (
    <NativeUIProvider defaultMode="system">
      <Button.Root variant="filled">Get started</Button.Root>
    </NativeUIProvider>
  )
}

Theme switches via useTheme() (light | dark | system), driving NativeWind's .dark class — the M3 --m3-* tokens swap exactly like the web build.

Develop

Storybook on-device is the demo surface (mirrors the web package). It runs inside this Expo app:

bun run --filter '@duestel/native-ui' start      # regenerates stories + starts Metro
# then press i (iOS sim) / a (Android) — the app boots into Storybook
bun run --filter '@duestel/native-ui' typecheck  # tsc --noEmit

Every component ships a colocated *.stories.tsx. prestart regenerates .rnstorybook/storybook.requires.ts from them.

Layout

src/
  components/<name>/   <Name>.tsx + index.ts + <Name>.stories.tsx
  lib/                 cn (twMerge), state-layer (M3 press overlay)
  providers/           NativeUIProvider, ThemeProvider
  styles/global.css    M3 color tokens (:root light / .dark dark)
  index.ts             root barrel (component namespaces)
tailwind.config.js     M3 type scale / radii / elevation / colors
PORTING_GUIDE.md       web → native porting rules

See the repo-root CLAUDE.md for the design-system source of truth.