Card

A customizable card component with different variant.

Galaxy Card

A ticket into the galaxy.

Preview

07th July 1997

Exploring the Unknown: The Alien Encounter Chronicles

Deep in the vastness of space lies a story untold—of strange beings, otherworldly landscapes, and encounters that defy imagination. Discover the mysteries of alien civilizations, their technology, and the secrets they carry across galaxies.

import React from "react";
import { View, Text, Image, TouchableOpacity } from "react-native";

const Card = () => {
  return (
    <View className="bg-white rounded-lg overflow-hidden shadow-lg m-4">
      <Image
        source={require("../../assets/images/alien1.avif")}
        className="w-full h-52"
        resizeMode="cover"
      />
      <View className="p-4">
        <Text className="text-xs text-gray-500 mb-1">07th July 1997</Text>
        <TouchableOpacity>
          <Text className="text-lg font-bold text-gray-900 mb-2">
            Exploring the Unknown: The Alien Encounter Chronicles
          </Text>
        </TouchableOpacity>
        <Text className="text-sm text-gray-500 leading-5">
          Deep in the vastness of space lies a story untold—of strange beings,
          otherworldly landscapes, and encounters that defy imagination.
          Discover the mysteries of alien civilizations, their technology, and
          the secrets they carry across galaxies.
        </Text>
      </View>
    </View>
  );
};

export default Card;

Usage Example

import React from "react";
import { View } from "react-native";
import Card from "./components/Card/GalaxyCard";

const App = () => {
  return (
    <View>
      <Card />
    </View>
  );
};

export default App;

Earth Card

A ticket for navigating on the earth surface.

Preview

07th July 1997

Exploring the Unknown: The Alien Encounter Chronicles

import React from "react";
import { View, Text, ImageBackground, TouchableOpacity } from "react-native";

const Card = () => {
  return (
    <View className="rounded-lg overflow-hidden shadow-lg w-4/5">
      <ImageBackground
        source={require("../../assets/images/alien1.avif")}
        className="w-full"
        imageStyle={{ resizeMode: "cover" }}
        style={{ height: 350 }}
      >
        <View className="flex-1 bg-black/50 justify-end">
          <View className="p-3">
            <Text className="text-xs text-white/90">07th July 1997</Text>
            <TouchableOpacity>
              <Text className="mt-1 text-lg font-bold text-white">
                Exploring the Unknown: The Alien Encounter Chronicles
              </Text>
            </TouchableOpacity>
            <Text className="mt-2 text-sm leading-5 text-white/95">
              Deep in the vastness of space lies a story untold—of strange
              beings, otherworldly landscapes, and encounters that defy
              imagination. Discover the mysteries of alien civilizations, their
              technology, and the secrets they carry across galaxies.
            </Text>
          </View>
        </View>
      </ImageBackground>
    </View>
  );
};

export default Card;

Usage Example

import React from "react";
import { View } from "react-native";
import Card from "./components/Card/EarthCard";

const App = () => {
  return (
    <View>
      <Card />
    </View>
  );
};

export default App;

Jupiter Card

A VIP ticket for entering jupiter.

Preview

Open-Source Contributions

Alien UI is open-source, inviting developers to collaborate and share components to improve mobile app design.

import React from "react";
import { View, Text } from "react-native";
import { MaterialIcons } from "@expo/vector-icons";

function Card() {
  return (
    <View className="flex flex-col items-center bg-black p-7 shadow-md w-4/5 h-64">
      <MaterialIcons
        name="join-inner"
        size={56}
        color="#ffffff"
        className="mb-4"
      />
      <Text className="text-lg font-bold text-white text-center">
        Open-Source Contributions
      </Text>
      <Text className="mt-2 text-sm text-white text-center">
        Alien UI is open-source, inviting developers to collaborate and share
        components to improve mobile app design.
      </Text>
    </View>
  );
}

export default Card;

Usage Example

import React from "react";
import { View } from "react-native";
import Card from "./components/Card/JupiterCard";

const App = () => {
  return (
    <View>
      <Card />
    </View>
  );
};

export default App;

Pluto Card

A small regular ticket into pluto.

Preview

Bar chart showing energy usage

import React from "react";
import { View, Text } from "react-native";
import AntDesign from "@expo/vector-icons/AntDesign"

const Card = () => {
  return (
      <View className="w-3/5 h-44 bg-black p-6">
        <View className="flex items-center justify-center w-12 h-12 bg-white rounded-full mb-6">
          <AntDesign name="barschart" size={24} color="#000000" />
        </View>
        <Text className="text-lg text-white font-bold">Bar chart showing energy usage</Text>
    </View>
  );
};

export default Card;

Usage Example

import React from "react";
import { View } from "react-native";
import Card from "./components/Card/PlutoCard";

const App = () => {
  return (
    <View>
      <Card />
    </View>
  );
};

export default App;

Mars Card

A small regular card for transaction in mars.

Preview

USD

Account balance

$150,000.00

0771224074

Deposit

Transfer

import React from "react";
import { View, Text, Image, TouchableOpacity } from "react-native";
import { MaterialIcons } from "@expo/vector-icons";

const Card = () => {
  return (
    <View className="w-full py-8 rounded-3xl border border-black items-center bg-white">
      <View className="flex-row items-center justify-between bg-black py-2 px-4 rounded-full mb-4">
        <Image source={require("../../assets/icon/flag.svg")} className="w-7 h-7" />
        <Text className="text-white ml-2 text-base">USD</Text>
        <MaterialIcons name="keyboard-arrow-down" size={28} color="white" />
      </View>
      <View className="flex-row items-center mb-2 space-x-2">
        <Text className="text-base">Account balance</Text>
        <Image source={require("../../assets/icon/eye.svg")} className="w-6 h-6" />
      </View>
      <Text className="text-5xl font-semibold mb-4">
        $150,000.<Text className="text-4xl text-gray-500">00</Text>
      </Text>
      <View className="flex-row items-center mb-4 space-x-2">
        <Image source={require("../../assets/icon/copy.svg")} className="w-6 h-6" />
        <Text className="text-base">0771224074</Text>
      </View>
      <View className="flex-row justify-center space-x-4">
        <TouchableOpacity className="flex-row items-center justify-center bg-black rounded-full py-3 w-40">
          <Text className="text-white text-base font-semibold mr-2">Deposit</Text>
          <Image source={require("../../assets/icon/import.svg")} className="w-6 h-6" />
        </TouchableOpacity>
        <TouchableOpacity className="flex-row items-center justify-center bg-black rounded-full py-3 w-40">
          <Text className="text-white text-base font-semibold mr-2">Transfer</Text>
          <Image source={require("../../assets/icon/export.svg")} className="w-6 h-6" />
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default Card;

Usage Example

import React from "react";
import { View } from "react-native";
import Card from "./components/Card/MarsCard";

const App = () => {
  return (
    <View>
      <Card />
    </View>
  );
};

export default App;