🧩 BielaUI

BielaUI is a mobile-first, cross-platform UI component library for React Native + NativeWind, tailored for modern apps built with Expo.
It provides native-feeling, theme-aware components inspired by Material Design (Android) and UIKit (iOS).

🚀 Installation

    npm install bielaui

or

    yarn add bielaui

Required peer dependencies:

• react, react-native, expo
• nativewind
• tailwindcss with nativewind/preset ⚙️ Tailwind Setup

Add bielaui to your tailwind.config.js:

// tailwind.config.js
module.exports = {
content: [
        './App.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
        './node_modules/bielaui/**/*.{js,ts,jsx,tsx}', // ✅ include bielaui
        ],
presets: [require('nativewind/preset')],
theme: {
extend: {},
},
plugins: [],
};

📦 Available Components

✅ Button A platform-aware button that renders Pressable on iOS and TouchableNativeFeedback on Android, with built-in variants and full NativeWind support.

import { Button } from 'bielaui';
import { Ionicons } from '@expo/vector-icons';

<Button
    title="Primary"
    variant="primary"
    icon={<Ionicons name="play" size={16} color="white" />}
    onPress={() => console.log('Pressed')}
    className="w-48"
/>

Props

| Prop | Type | Description | | --------------- | ------------------------------------------------------ | ---------------------------------------- | | title | string | The text inside the button | | variant | 'primary' | 'secondary' | 'tonal' | 'plain' | Visual style of the button | | icon | ReactNode | Icon component displayed before the text | | onPress | (event) => void | Button press callback | | loading | boolean | Displays ActivityIndicator when true | | loaderColor | string (hex / color name) | Customize the loading spinner color | | className | string (Tailwind classes) | Custom styles for the button container | | textClassName | string (Tailwind classes) | Custom styles for the button text |

Variants Example

<Button variant="primary" title="Primary" />
<Button variant="secondary" title="Secondary" />
<Button variant="tonal" title="Tonal" loading />
<Button variant="plain" title="Plain" />
<Button
  variant="tonal"
  icon={<Ionicons name="heart" size={20} color="#2563eb" />}
  className="w-10 h-10 rounded-xl"
/>

✨ Features

• 🎯 Platform-specific behavior (Ripple effect on Android, opacity on iOS)
• 🎨 Tailwind-compatible styling via NativeWind
• ⚙️ Themeable, customizable, mobile-first
• 💨 Lightweight and fast
• ✅ Fully typed with TypeScript

🧱 Roadmap (in progress)

• Button component (iOS & Android variants)
• Text component with variants and theming
• Switch / Toggle
• Input / TextField
• Modal & Dialog
• Responsive layout primitives (Stack, Box, Grid)

📄 License

MIT — © 2025