Input

A collection of cosmic-themed input components

Nebulon Input

An input field for entering text in the Nebulon system

Preview

import React from "react";
import { TextInput } from "react-native";

const Input = () => {
  return (
    <TextInput
      className="border-1 border-black rounded-md p-2.5 w-[80%]"
      placeholder="Nebulon Input..."
    />
  );
};

export default Input;

Usage Example

import React from "react";
import { View } from "react-native";
import Input from "./components/Input/NebulonInput";

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

export default App;

Earth Input

An input field for entering text on the earth surface

Preview

import React from "react";
import { TextInput } from "react-native";

const Input = () => {
  return (
    <TextInput
      className="border-1 border-b border-b-black p-2.5  w-[80%]"
      placeholder="Earth Input..."
    />
  );
};

export default Input;

Usage Example

import React from "react";
import { View } from "react-native";
import Input from "./components/Input/EarthInput";

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

export default App;

Vortex Input

A mesmerizing input field with cosmic vortex animation

Preview

import React, { useState } from "react";
import { View, TextInput } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";

const Input = () => {
  const [isFocused, setIsFocused] = useState(false);

  return (
    <View className="relative w-72">
      <View
        className={`
        absolute inset-0 bg-gradient-to-r from-blue-500/20 via-purple-500/20 to-pink-500/20
        rounded-lg opacity-20 ${isFocused ? "scale-105 blur-md" : "scale-100"}
      `}
      />

      <View className="relative flex-row items-center">
        <TextInput
          placeholder="Enter galactic coordinates..."
          placeholderTextColor="#9ca3af"
          className={`
            flex-1 bg-black/80 text-white px-4 py-3 rounded-lg
            border border-purple-500/30
            ${isFocused ? "border-purple-500/50" : ""}
          `}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
        />
        <MaterialCommunityIcons
          name="weather-hurricane"
          size={20}
          color={isFocused ? "#c084fc" : "#9ca3af"}
          style={{
            position: "absolute",
            right: 12,
          }}
        />
      </View>
    </View>
  );
};

export default Input;

Usage Example

import React from "react";
import { View } from "react-native";
import Input from "./components/Input/VortexInput";

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

export default App;