Guide

How to use ZAYX components in your React Native app.

Quick Start

npx degit ManasCodeXart/ZAYX/components/[component-name] components/[component-name]

Then install the peer deps listed on the component's detail page.

npx expo install react-native-reanimated react-native-gesture-handler

That's it for most components. Read the full guide below if you need more detail.

Overview

ZAYX components are copied directly into your project using a single command. There's no package to install, no version to manage — you own the code the moment it lands in your codebase. Edit it, extend it, restyle it however you want.

Prerequisites

A React Native + Expo project (Expo Router recommended)
TypeScript recommended — components ship with full types
GestureHandlerRootView wrapping your app root
Reanimated Babel plugin configured in babel.config.js
Space Grotesk font family recommended — load via expo-font for the intended look (SpaceGroteskMedium, SpaceGroteskSemiBold, SpaceGroteskBold)

Step 1 — Pick a Component

Browse the component grid on the home page. Each card opens a detail page with the component's features, install command, peer dependencies, usage example, and full API reference.

Browse Components

Step 2 — Run the degit Command

Each component has its own install command on its detail page. The component copies directly into your project — no registry, no package.

npx degit ManasCodeXart/ZAYX/components/[component-name] components/[component-name]

Replace [component-name] with your chosen component's slug — e.g. fintech-island, quick-pay, card-insight.

Step 3 — Install Peer Dependencies

Each component's detail page lists its exact peer dependencies. Most components share the same core set:

npx expo install react-native-reanimated react-native-gesture-handler

Some components need additional deps like @shopify/react-native-skia or lottie-react-native — check the detail page for the exact list.

Step 4 — Use It In Your App

Import from wherever the component landed in your project. The exact import path and minimal usage example is on each component's detail page.

import { FintechIsland } from './components/fintech-island/FintechIsland'

export default function Screen() {
  return <FintechIsland ... />
}

Exact props differ per component — see each component's detail page.

It's Yours

There's no abstraction layer, no hidden logic. The component file lives in your project like any other file you wrote. Rename it, restyle it, gut it and rebuild the internals — it's yours.

Back See all Components