Installiere Native-UI in unter einer Minute

1. 1

   Paket installieren

   npm install @polprog/native-ui

2. 2

   Space Grotesk laden (optional - empfohlen)

   npx expo install @expo-google-fonts/space-grotesk expo-font

3. 3

   App umschließen

   import { NativeUIProvider } from '@polprog/native-ui';
   
   export default function App() {
     return (
       <NativeUIProvider>
         <Root />
       </NativeUIProvider>
     );
   }

4. 4

   Bildschirme zusammensetzen

   import { Button, Card, Heading, Stack } from '@polprog/native-ui';
   
   export function Welcome() {
     return (
       <Card>
         <Stack gap="lg">
           <Heading level={1}>Welcome</Heading>
           <Button variant="primary">Get started</Button>
         </Stack>
       </Card>
     );
   }

Theming Neu

Wechsle sofort zwischen hell, dunkel oder System, oder tausche den gesamten Look mit einer Theme-Variante. Native-UI liefert zwei: Aurora (die Originale) und die neue Bloom (weich, abgerundet, violett). Jede Variante trägt eigene Akzent-Presets, und customAccent überschreibt weiterhin eine einzelne Farbe. Du übergibst nur das, was sich ändert.

import { NativeUIProvider, bloomFontFamilies } from '@polprog/native-ui';

export default function App() {
  return (
    <NativeUIProvider
      config={{
        theme: 'bloom',        // 'default' (Aurora) | 'bloom'
        colorMode: 'system',   // 'light' | 'dark' | 'system'
        preset: 'violet',      // accent preset for the active variant
        fontFamilies: bloomFontFamilies,
      }}
    >
      <Root />
    </NativeUIProvider>
  );
}

Akzent-Presets

Design-Tokens

Jede Oberfläche - Farbe, Abstand, Radius, Typografie, Schatten - ist ein benannter Token. Komponenten lesen nur Tokens; das Ändern eines Tokens wirkt sich systemweit aus.

import { useTheme } from '@polprog/native-ui';

function Banner() {
  const t = useTheme();
  return (
    <View style={{ backgroundColor: t.colors.accent, padding: t.spacing.lg, borderRadius: t.radii.lg }} />
  );
}

Barrierefreiheit

Jede interaktive Komponente kommt mit Barrierefreiheits-Defaults: Labels, Hit-Slops, Fokus-Reihenfolge, Screenreader-Rollen, Reduce-Motion-Respekt. Du kannst jeden Default pro Instanz überschreiben.

<Button
  variant="primary"
  accessibilityLabel="Save profile and continue"
  accessibilityHint="Saves your changes and moves to the next step"
  onPress={save}
>Save</Button>

Plattformverhalten

Komponenten passen sich an die Host-Plattform an: iOS nutzt SF-natives Druck-Feedback und Sheet-Dimensionierung, Android nutzt Ripple und Material-Elevation. Du erhältst Plattform-Korrektheit, ohne Plattform-Code zu schreiben.

// The same component renders correctly on both platforms.
<BottomSheet snapPoints={['40%', '90%']}>
  <Heading>Choose a plan</Heading>
</BottomSheet>

Änderungsprotokoll

1. v1.7.1

   2026-07-31

   Stabil

   • Behoben

     Add the react-native condition to the root exports entry so Metro resolves the TypeScript source instead of the dist bundles. Metro in React Native 0.84 enables package exports by default, and an exports map takes precedence over the top-level react-native field, so consumers were bundling both dist flavours (.mjs and .js) at once and needed per-app resolveRequest workarounds.

2. v1.7.0

   2026-06-23

   Stabil

   • Hinzugefügt

     Add the Bloom theme variant and a theme config key. NativeUIProvider now accepts theme: 'default' | 'bloom' | ThemeVariant. A theme variant bundles a complete visual identity (colour palette, corner radii, elevation, type density, and default fonts) behind one name and restyles every component. The new Bloom variant is a soft, rounded look: violet/pink accents, rounded corners, purple-tinted neutrals, and Outfit + Plus Jakarta Sans typography. The original look ships unchanged as the Aurora ('default') variant, so existing apps are unaffected. FontFamilies gains an optional display group so a variant can pair a heading family with a separate body family. New exports: THEME_VARIANTS, defaultThemeVariant, bloomThemeVariant, resolveThemeVariant, defaultColorPalette, bloomColorPalette, BLOOM_PRESETS, bloomFontFamilies, and the types ThemeVariant, ThemeVariantName, ColorPalette, TextRamp, SemanticRamp, NeutralRamp, BloomPreset, BorderRadiusScale.

Vollständiges Änderungsprotokoll ansehen →