Swirski UI

Native

Swirski UI works on web and React Native.

The web package is imported from @swirski/ui. React Native apps use @swirski/ui/native so the components render with React Native primitives and the same Swirski fonts.

Short version

Web imports CSS. Native runs swirski-native setup once. Both come from the same @swirski/ui package.

React Native

Use the native entrypoint.

iOS and Android apps do not import CSS. The native helper links the bundled font files so native cards, badges and text match the web styling.

pnpm add @swirski/ui
pnpm exec swirski-native setup

import { Button, Card, Title } from "@swirski/ui/native";

Setup

Bare React Native setup.

Swirski UI ships native font files with the package. The setup helper updates react-native.config.* and runs react-native-asset when it finds an iOS or Android project.

  1. 01
    Install

    Install the same package you use for web projects.

    pnpm add @swirski/ui
  2. 02
    Link bundled fonts

    Bare React Native apps can run the setup helper from the app root.

    pnpm exec swirski-native setup
  3. 03
    Import native components

    Use the native entrypoint for React Native screens.

    import {
  Button,
  Card,
  CardBadge,
  CardContent,
  CardMeta,
  CardTitle,
  Text,
  Title,
} from "@swirski/ui/native";
  4. 04
    Rebuild the app

    Rebuild iOS or Android after linking font assets.

    pnpm ios
# or
pnpm android

Components

Native component index.

Native starts with the shared primitives that make the biggest difference in real app screens. Open a component to see its native structure, usage, and props.

8 component groups

Platforms

One package, two entrypoints.

The web docs still show the full web component library. The native entrypoint starts smaller and exposes the React Native components that have been ported so far.

PlatformImportSetup
Web@swirski/uiInstall the package, import CSS once, then use components. import "@swirski/ui/styles.css";
React Native@swirski/ui/nativeRun the native setup helper once so bundled fonts are linked. No CSS import for iOS or Android.
Growing native support

Web has the full catalog. Native has the first essentials.

The native entrypoint can grow component by component while keeping the same visual language and font setup as the web package.

Web componentsNative components