📦 @retray-dev/ui-kit

A personal React Native / Expo UI component library with a built-in design system, dark mode support, haptic feedback, and smooth animations.

• 36 components across 7 categories
• Light/dark theme with 23 color tokens and full customization
• Apple HIG–compliant touch targets and haptic feedback
• Animated interactions: spring press, sliding tabs, accordion easing, animated progress
• Built with TypeScript — full type declarations included

Installation

# npm
npm install @retray-dev/ui-kit

# pnpm
pnpm add @retray-dev/ui-kit

Peer dependencies

Install these in your app if not already present:

pnpm add expo-font expo-haptics expo-linear-gradient react-native-safe-area-context @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-worklets @react-native-picker/picker @react-native-community/slider @expo/vector-icons

For Expo projects, run npx expo install instead to get SDK-compatible versions.

Add the Worklets Babel plugin to babel.config.js (required by @gorhom/bottom-sheet):

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-worklets/plugin'],
  }
}

Typography

All components use Poppins font family. You must load the fonts at app root before rendering any component:

import { useFonts } from 'expo-font'
import { PoppinsFonts } from '@retray-dev/ui-kit/fonts'

export default function App() {
  const [fontsLoaded] = useFonts(PoppinsFonts)
  if (!fontsLoaded) return null

  return (
    // ... providers and app
  )
}

The library ships 13 font files (9 regular weights + 4 italic variants) as raw .ttf files. Metro resolves them at bundle time.

Setup

Wrap your app root with all required providers. Order matters.

import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context'
import { GestureHandlerRootView } from 'react-native-gesture-handler'
import { ThemeProvider, BottomSheetModalProvider, ToastProvider } from '@retray-dev/ui-kit'

export default function App() {
  return (
    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <ThemeProvider colorScheme="system">
          <BottomSheetModalProvider>
            <ToastProvider>{/* your app */}</ToastProvider>
          </BottomSheetModalProvider>
        </ThemeProvider>
      </GestureHandlerRootView>
    </SafeAreaProvider>
  )
}

| Provider | Required by | | -------------------------- | ------------------------------------------ | | SafeAreaProvider | ToastProvider (uses useSafeAreaInsets) | | GestureHandlerRootView | Sheet, ConfirmDialog (@gorhom/bottom-sheet) | | ThemeProvider | All components | | BottomSheetModalProvider | Sheet, ConfirmDialog | | ToastProvider | useToast hook |

Theme

Customize any color token per scheme:

const myTheme = {
  light: { primary: '#6366f1', primaryForeground: '#ffffff' },
  dark:  { primary: '#818cf8', primaryForeground: '#ffffff' },
}

<ThemeProvider theme={myTheme} colorScheme="system">

Access theme colors anywhere inside the tree:

import { useTheme } from '@retray-dev/ui-kit'

const { colors, colorScheme } = useTheme()

Available tokens: background, foreground, card, cardForeground, primary, primaryForeground, secondary, secondaryForeground, muted, mutedForeground, accent, accentForeground, destructive, destructiveForeground, destructiveTint, destructiveBorder, border, input, ring, success, successForeground, successTint, successBorder

Design Tokens

Static structural constants — no provider required:

import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS } from '@retray-dev/ui-kit'

<View style={{ gap: SPACING.md, padding: SPACING.lg, borderRadius: RADIUS.lg, ...SHADOWS.sm }} />

| Token | Keys | |-------|------| | SPACING | xs (4), sm (8), md (12), lg (16), xl (24), 2xl (32), 3xl (48) | | ICON_SIZES | sm (14), md (18), lg (22), xl (28), 2xl (32) | | RADIUS | sm (4), md (8), lg (12), xl (16), full (9999) | | SHADOWS | sm, md, lg, xl — cross-platform shadow presets | | BREAKPOINTS | wide (700) |

Components

| Category | Components | | ----------- | ----------------------------------------------------------------------------------------------- | | Display | Text, Badge, Avatar, Separator, Spinner, Skeleton, Progress, CurrencyDisplay | | Surfaces | Card, AlertBanner, EmptyState, MediaCard | | Form | Button, IconButton, Input, CurrencyInput, CurrencyInputLarge, Textarea, Checkbox, Switch, Toggle, RadioGroup, Select, Slider | | Composition | Tabs, Accordion | | Overlays | Sheet, ConfirmDialog | | Feedback | Toast / ToastProvider / useToast | | Data | ListItem, Chip / ChipGroup, LabelValue, MonthPicker, CategoryStrip | | Utilities | Pressable |

Quick examples

import {
  Button, Input, Badge, Card, CardHeader, CardTitle, CardContent,
  Toast, useToast, Sheet, Select, Tabs, TabsContent,
} from '@retray-dev/ui-kit'

// Button
<Button label="Save" variant="primary" size="md" onPress={() => {}} />

// Toast
const { toast } = useToast()
toast({ title: 'Saved', variant: 'success' })

// Sheet (bottom sheet — auto-sizes to content)
<Sheet open={open} onClose={() => setOpen(false)} title="Options">
  <Text>Sheet content</Text>
</Sheet>

// Select
<Select
  value={value}
  onValueChange={setValue}
  options={[{ label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }]}
  placeholder="Pick one"
/>

Full props reference and more examples are available in COMPONENTS.md, which is also shipped inside the npm package for use with AI tools:

## UI Components

@./node_modules/@retray-dev/ui-kit/COMPONENTS.md

License

MIT © Julian Camilo Cruz Sanchez