Universal UIKit Component

A universal UI kit for building consistent user interfaces across web and native platforms, built with React Native Web, Nativewind, and Tailwind CSS.

Framework Support

| Framework | Status | Notes | |-----------|---------|-------| | Expo | ✅ Supported | Full support for iOS, Android, and web | | Bare React Native | 🚧 Coming Soon | Planned for future release | | Vite (Web) | 🚧 Coming Soon | Web-only support in development | | Next.js | 🚧 Coming Soon | SSR support planned |

Important: This library currently only works with Expo projects. Other frameworks are not supported yet but are on our roadmap.

Project Overview

Universal UIKit provides a comprehensive set of accessible, themeable, and performant components that work seamlessly on iOS, Android, and the web through Expo's universal app platform.

Getting Started

Requirements

• Node.js 22+
• pnpm
• An existing Expo project

Installation

1. Install the library:

   pnpm add @zambelz/universal-uikit

2. Install required peer dependencies:

   pnpm add nativewind tailwind-merge tailwind-variants

3. Install optional peer dependencies (based on components you use):

   # For DatePicker component
   expo install @react-native-community/datetimepicker
   
   # For FileInput component  
   expo install expo-document-picker
   
   # For Icon components
   pnpm add @react-native-vector-icons/fontawesome @react-native-vector-icons/ionicons @react-native-vector-icons/material-design-icons
   
   # For Chart component
   pnpm add recharts
   
   # For WebView component
   pnpm add react-native-webview

4. Configure Expo for web (app.json):

   {
     "expo": {
       "web": {
         "bundler": "metro"
       }
     }
   }

5. Create global CSS file:

   /* global.css */
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

6. Configure Tailwind CSS:

   // tailwind.config.ts
   import type { Config } from "tailwindcss"
   
   const zambelzUIKitTheme = require("@zambelz/universal-uikit/dist/theme")
   
   const config: Config = {
     content: [
       "./app/**/*.{js,jsx,ts,tsx}",
       "./node_modules/@zambelz/universal-uikit/dist/**/*.{js,jsx,ts,tsx}",
     ],
     presets: [require("nativewind/preset")],
     darkMode: "class",
     theme: {
       extend: zambelzUIKitTheme,
     },
     plugins: [],
   }
   
   export default config

Basic Usage

1. Import global CSS and wrap your app with the theme provider:

   // app/_layout.tsx
   import "../global.css"
   import { ZambelzThemeProvider } from "@zambelz/universal-uikit"
   
   export default function RootLayout() {
     return (
       <ZambelzThemeProvider iconFamily="MaterialIcons">
         {/* Your app content */}
       </ZambelzThemeProvider>
     )
   }

2. Use components in your screens:

   import { Button, Text, Card, Stack } from "@zambelz/universal-uikit"
   
   export default function MyScreen() {
     return (
       <Stack direction="vertical" spacing="lg" className="p-6">
         <Card className="p-6">
           <Text className="text-xl mb-4">Welcome to Universal UIKit!</Text>
           <Button variant="primary" onPress={() => alert("Pressed!")}>
             Click Me
           </Button>
         </Card>
       </Stack>
     )
   }

Components

• Accordion: A vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.
• ActionMenu: A menu that appears when the user interacts with an element, containing a list of actions.
• Alert: A component to display important messages to the user.
• Avatar: A component to represent a user, displaying an image or initials.
• Badge: A small component to display a status or count.
• Button: A component for user actions.
• Card: A flexible and extensible content container.
• Chart: A versatile charting component supporting multiple chart types (line, bar, area, pie, scatter, radar, gantt) with customizable options.
• Checkbox: A component that allows the user to select one or more options from a set.
• Container: A component for wrapping content with consistent padding.
• DatePicker: A component to select a date.
• Dialog: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
• Drawer: A panel that slides in from the side of the screen.
• Dropdown: A component that allows the user to select one option from a list.
• FileInput: A component for uploading files.
• FormField: A component that wraps form elements with a label and validation messages.
• Grid: A component for creating grid layouts.
• Heading: A component for titles and headings.
• Icon: A component to display icons.
• IconButton: A button that only contains an icon.
• Image: A component for displaying images.
• Input: A component for text input.
• Link: A component for navigation.
• List: A component for displaying a list of items.
• Loading: A component to indicate that a process is running.
• Matrix: A component for displaying data in a grid.
• Modal: A component that displays content on top of the main screen.
• Pagination: A component for navigating between pages of content.
• PhoneNumberInput: A component for inputting phone numbers with country code selection.
• PinInput: A component for entering a PIN or verification code.
• ProgressBar: A component to display the progress of a task.
• Radio: A component that allows the user to select one option from a set.
• Separator: A component to visually separate content.
• Skeleton: A component to display a placeholder loading state.
• Slider: A component that allows the user to select a value from a range.
• Stack: A component for arranging elements in a vertical or horizontal stack.
• Stepper: A component that allows the user to move through a series of steps.
• Switch: A component that allows the user to toggle between two states.
• Tab: A component for navigating between different views.
• Table: A component for displaying data in a table.
• Text: A component for displaying text.
• Textarea: A component for multi-line text input.
• Timeline: A component for displaying a sequence of events.
• TimePicker: A component to select a time.
• Toast: A component for displaying temporary notifications or feedback messages.
• Tooltip: A component that displays a short, informational message when the user hovers over an element.
• TreeView: A component for displaying hierarchical data.
• View: A fundamental component for building user interfaces.

Theming

Our components are built with a highly customizable theme system. The default theme is automatically included, but you can customize colors, spacing, and other design tokens to match your brand.

For detailed instructions on theme customization, see our Theme Guidelines.

Quick Theme Override Example

// tailwind.config.ts  
const zambelzUIKitTheme = require("@zambelz/universal-uikit/dist/theme")

const customTheme = {
  ...zambelzUIKitTheme,
  colors: {
    ...zambelzUIKitTheme.colors,
    primary: {
      DEFAULT: "#your-brand-color",
      // ... your color scale
    }
  }
}

export default {
  theme: { extend: customTheme },
  // ... rest of config
}

Contributing

We welcome contributions! If you'd like to help improve the library, please see our Contribution Guidelines.