Kara UI

A native-first design system for Expo. Its components are real SwiftUI and Jetpack Compose views: @expo/ui's, and Kara's own native components where @expo/ui has none (swipe actions, blur materials, a tintable segmented control, navigation bars, a zoom transition). Over both sits the sx engine, one token-typed styling surface that resolves into SwiftUI modifiers, Compose modifiers or React Native styles, so every component takes the same spacing, colours, radii and type, and the whole set reads as one design system on iOS and Android. The platform's colours and typeface by default, yours through the theme.

Documentation

www.kara.janblazej.dev/docs: the guides, the design tokens, and every component on iOS and Android, in light and dark.

Install

npx expo install @hzblj/kara-ui @expo/ui @lodev09/react-native-true-sheet \
  expo-image react-native-reanimated react-native-worklets

Expo SDK 57 and a development build: Kara ships native code, so it does not run in Expo Go. The installation guide covers the config plugin and the provider.

Quick start

import {Button, KaraProvider, Screen, Text, VStack} from '@hzblj/kara-ui'

export const App = () => (
  <KaraProvider>
    <Screen>
      <VStack p="s16" spacing="s12" wide>
        <Text variant="headingS">Hello</Text>
        <Button label="Continue" />
      </VStack>
    </Screen>
  </KaraProvider>
)

Native views render inside a Screen or an Island; the Rn* components are plain React Native views with the same sx props.

Packages

@hzblj/kara-ui is the one to install: it re-exports the rest, which are published so its types resolve.

Package	What it holds
@hzblj/kara-ui	The umbrella: every public entry point.
@hzblj/kara-theme	Tokens, palette, typography, KaraProvider.
@hzblj/kara-sx	The sx engine: one surface for SwiftUI modifiers, Compose modifiers and React Native styles.
@hzblj/kara-components	The components and Screen.
@hzblj/kara-router	Tabs, navigationTheme and ZoomTransition for Expo Router.
@hzblj/kara-native	The KaraUI native module, in Swift and Kotlin.
@hzblj/kara-expo-plugin	The config plugin: your SVGs as native icons, iOS semantic colours.

Development

The repository is a Turborepo of Yarn 4 workspaces. apps/example runs every component from source, with on-device Storybook; apps/website is www.kara.janblazej.dev.

yarn                # install
yarn ios            # the example app, on iOS (yarn android for Android)
yarn site           # the website and docs, on http://localhost:4300
yarn lint           # biome and tsc, every workspace
yarn changeset      # describe a change for the next release

More libraries

The other libraries from the same author are at libraries.janblazej.dev.

Sponsorship

License

MIT © Jan Blazej