Odświeżone na 2026 MIT · React Native · v1.7.1

Buduj produkty, które wyglądają
natywnie domyślnie.

Native-UI to cross-platformowy design system dla React Native autorstwa POLPROG - dostarcza natywne w odczuciu komponenty na iOS i Androida z produkcyjnym wykończeniem od pierwszego renderu.

Rozpocznij Zobacz na GitHubie

Dziś

Wtorek, 14 sty

Kroki +12%
8 420
Czas skupienia +6%
2h 14m
Nadchodzące
Design review · 10:00
Stand-up · 11:30
1:1 z Sam · 14:00
Działa na
  • iOS 15+
  • Android 7+
  • Expo SDK 50+
  • React Native 0.74+
  • Gotowe na New Architecture
40
Komponenty i prymitywy
188
Zielone testy jednostkowe
100%
Strict TypeScript
2
Presety gęstości

Dlaczego Native-UI

Wszystko, czego potrzebuje zespół
aby wypuścić dopracowaną aplikację.

Opiniowane domyślne wartości. Nieopiniowane API. Zero-config wizualna spójność - natywnie na iOS, natywnie na Androidzie.

Natywne wykończenie od razu

Preset typografii compact-density dopasowany do iOS i Androida. Współgra ze Space Grotesk lub dowolną czcionką, którą dostarczysz.

40 produkcyjnych komponentów

31 komponentów + 9 prymitywów pokrywających każdą powierzchnię ekranu - Buttony, Inputy, Arkusze, Toasty, wiersze list, Skeletony, Konfetti i więcej.

Design tokens sterujące motywem

Jeden typowany system tokenów dla kolorów, typografii, spacingu, zaokrągleń i elewacji. Zmieniaj motyw, gęstość czy brand bez dotykania kodu komponentów.

Presety gęstości typograficznej

Regular (iOS-native 17pt) i Compact (15pt headline) z poprawnymi wysokościami wiersza, trackingiem i rodzinami wag wstępnie skonfigurowanymi.

Dostępność wbudowana

Dostępne role, etykiety, hit-slopy, zarządzanie focusem i obsługa reduce-motion to domyślne wartości - nie opcjonalne dodatki.

iOS i Android, jedno API

Zachowania świadome platformy (haptyka, safe area, modale, gesty) zunifikowane za jednym interfejsem propsów - działają na obu platformach bez kodu warunkowego.

188 testów jednostkowych, ścisłe typy

Każdy komponent jest w pełni otypowany w trybie TypeScript strict i pokryty obszernym zestawem Jest - konsumenci aktualizują bez obaw.

Tree-shakeable i lekki

Publikowany jako ESM + CJS z osobnymi eksportami komponentów. Wysyłasz tylko to, co naprawdę importuje ekran.

Komponenty

40 elementów. Jeden język wizualny.

Każda powierzchnia, której potrzebuje produkt - złożona z tego samego motywu, tokenów i systemu animacji.

Motyw podglądu

Przyciski

Chipsy

Dziś Tydzień Miesiąc Własny

Pole tekstowe

Plakietki i Awatary

AM NU Nowe 3

Skeleton

Toast

Zmiany zostały zapisane.

Karta

Budżet miesięczny 3

2 450 z 3 000

Przełącznik

Powiadomienia
Cotygodniowy skrót

Lista

Profil Jan Kowalski
Język Polski

Postęp

0%

Piaskownica przycisku

…i 34 więcej. Przeglądaj cały katalog →

Typografia

Skala typograficzna dla aplikacji.

Dziesięć wariantów z rozmiarami, wysokościami wiersza i trackingiem zgodnymi z iOS - plus preset compact dla ekranów bogatych w treść. Współgra ze Space Grotesk lub dowolną czcionką, którą dostarczysz.

displayLarge 34 / 41 / 700
Natywnie domyślnie
displayMedium 28 / 34 / 700
Design system, dostarczony
h1 28 / 34 / 600
Tytuł sekcji
h2 22 / 28 / 600
Podsekcja
title 17 / 22 / 600
Nagłówek karty
bodyLarge 17 / 22 / 500
Wyróżniony tekst treści
body 17 / 22 / 400
Treść - domyślny rozmiar czytania używany w całym design systemie.
bodySmall 15 / 20 / 400
Podtytuł używany do podtytułów list i tekstu drugorzędnego.
label 13 / 18 / 500
Etykieta formularza
overline 11 / 13 / 600
OVERLINE SEKCJI

Design tokens

Jedno źródło prawdy dla każdego piksela.

Kolory, spacing, zaokrąglenia, elewacja - otypowane, z motywem, dostępne z każdego komponentu.

Kolory

Spacing

xs 4px
sm 8px
md 12px
lg 16px
xl 24px
2xl 32px
3xl 48px

Zaokrąglenia

sm 6px
md 10px
lg 14px
xl 20px
full 9999px

Instalacja

Wypuść pierwszy ekran
w niespełna minutę.

Wrzuć providera, zaimportuj komponenty, gotowe. Żadnej konfiguracji, pisania motywów ani żonglowania tokenami.

Przeczytaj dokumentację Zobacz na npm
App.tsx 
import { NativeUIProvider, Button, Card, Heading, Stack } from '@polprog/native-ui';

export default function App() {
  return (
    <NativeUIProvider>
      <Card>
        <Stack gap="lg">
          <Heading level={1}>Welcome</Heading>
          <Button variant="primary" onPress={handlePress}>
            Get started
          </Button>
        </Stack>
      </Card>
    </NativeUIProvider>
  );
}

Różnica

Czysty React Native vs. Native-UI

Zagadnienie Czysty React Native Native-UI
Skala typografii DIY na każdym ekranie 10 wstępnie dostrojonych wariantów · 2 presety gęstości
Design tokens Ręczne stałe w StyleSheet Silnie otypowany motyw · zmiana w jednej linii
Dostępność Opt-in na każdym komponencie Etykiety · role · hit-slop · reduce-motion domyślnie
Spójność platform Platform.select rozsiany wszędzie Zunifikowane propsy, zachowania platform ukryte
Formularze i pola Sam budujesz label / helper / error Input, TextArea, Select, Checkbox, Radio, Switch gotowe
Animacje i haptyka Osobna instalacja i podłączanie PressableScale, Toast, Confetti, Skeleton - wbudowane
Spójność wizualna Rozjeżdża się między ekranami / zespołami Produkcyjna spójność wymuszona przez tokeny
Siatka bezpieczeństwa testów Twoja odpowiedzialność 188 testów jednostkowych w paczce

W produkcji

Wykorzystywane produkcyjnie przez PhotoToPuzzle

PhotoToPuzzle to dbająca o prywatność gra logiczna z puzzlami ze zdjęć na iOS, Androida, iPada i tablety z Androidem. Powstała na Native-UI i korzysta z biblioteki w przyciskach, kartach, modalach, polach formularzy, tokenach motywu, odstępach i adaptacyjnych układach. Aplikacja działa w pełni offline, trzyma zdjęcia na urządzeniu i pokazuje, jak Native-UI wspiera prawdziwe produkty mobilne na telefonach i tabletach.

  • Aplikacja produkcyjna
  • iOS + Android
  • Telefon + Tablet
  • Offline-first
  • Zbudowane na Native-UI
Zobacz PhotoToPuzzle na POLPROG ↗

Gotowy(-a) wypuścić coś, co wygląda natywnie?

Zainstaluj Native-UI i poświęć czas produktowi, nie pikselom.

Przeczytaj dokumentację Zagwiazduj na GitHubie
Expo React Native 0.74+ iOS Android Web TypeScript Accessible