everkit-ui

A reusable, theme-agnostic React Native / Expo UI library. Each component owns its structure, behaviour and layout (inline StyleSheet); your app injects colours + fonts through a theme, so one implementation renders any number of brands. Self-contained like SwiftUI / Jetpack Compose — no NativeWind or Tailwind required in the consumer. iOS + Android, plus a react-native-web Storybook catalog.

See ARCHITECTURE.md for the full theme contract and design rationale.

The one styling rule

Colour and fonts come inline from the active theme (useColors() / the injected tokens). Layout is inline StyleSheet from the library's own SPACE / RADIUS scale. The library emits no className, so it renders with zero NativeWind setup in the consumer and is immune to the New-Architecture (Fabric) className-layout collapse.

Install

npm install everkit-ui

Native + rendering deps are peer dependencies (you control the versions). react and react-native are required; the rest are needed only by the components that use them:

| Peer | Needed for | | --- | --- | | react ≥ 19 · react-native ≥ 0.81 | everything | | react-native-reanimated ≥ 4 | press-scale, typing dots, FAB menu | | react-native-safe-area-context ≥ 5 | screen scaffolds, sticky bars | | react-native-gesture-handler ≥ 2.28 | keyboard-dismiss scroll body | | react-native-svg ≥ 15 | the Google glyph | | expo-linear-gradient ≥ 14 | Gradient / ScreenGradient | | expo-image ≥ 2 | AppImage / Avatar / PhotoStrip | | lucide-react-native | row / chat / button icons | | expo-haptics (optional) | tap haptics on press surfaces | | @react-native-community/datetimepicker (optional) | DateField | | react-native-image-viewing (optional) | PhotoViewer |

NativeWind is not required — the library styles itself inline. If your app uses NativeWind and wants the same -ds spacing scale in its own classes, opt into the shared preset: presets: [require('everkit-ui/preset')].

Usage

Wrap your tree in ThemeProvider with a ThemeTokens object (colours + a font family per text variant + shadows); every component reads from it. The full token shape is documented in ARCHITECTURE.md.

import { ThemeProvider, Text, Button } from 'everkit-ui'

export default function App() {
  return (
    <ThemeProvider value={tokens}>
      <Text variant="heading-md">Welcome back</Text>
      <Button variant="primary" onPress={() => {}}>Start a session</Button>
    </ThemeProvider>
  )
}

Components

64 theme-agnostic components. Each links to its example — a description, a screenshot, and how to view it live.

Primitives

Text · Button · Card · Chip · Spinner · Toast · TabPillGroup · GoogleGlyph · AnimatedEllipsis · AnimatedPressable · Gradient · KeyboardAware · KeyboardScrollView · AppImage

Inputs & selection

Input · SearchInput · ChipSelector · StarRating · FavoriteButton · LikeButton · DateField · SelectionSheet · PhotoPicker

Layout & scaffolds

ScreenGradient · ScreenHeader · DetailHeader · StickyBottomBar · FormScreen · DetailScreen · AuthFormScreen · HeroStatsRow · StatTile · PhotoStrip · BottomActionSheet · ActionSheet · Carousel

Feedback & empty states

LoadingScreen · EmptyState · ErrorState · ErrorBoundary · AppErrorBoundary · Skeleton · NotesCard · ProgressBar · StepDots · ConfirmDialog · CircularProgress

Settings rows

SettingsSection · SettingsRow · ToggleRow

Chat

ChatScreen · UserChatBubble · BotChatBubble · ChatInputBar · TypingIndicator · FormattedText

FABs

Fab · FabMenu

Generic leaves

Avatar · PhotoViewer · FollowStatsRow · OnboardingSlide · LegalSection · LegalBulletList

Catalog

npm run storybook renders every component under a theme switcher (neutral + sample brands) on react-native-web via Vite — the harness for catching theme leakage. No simulator needed.

Documentation

The full theme contract, the one styling rule, and the zero-consumer-coupling principles live in ARCHITECTURE.md.

Scripts

| Script | What it does | | --- | --- | | npm run build | Build CJS + ESM + .d.ts into dist/ (react-native-builder-bob) | | npm run typecheck | tsc --noEmit | | npm run storybook | Run the Storybook catalog (port 6006) | | npm run storybook:build | Build the static Storybook |

License

MIT © Vladyslav Petrykov