/Home

Dark Modern UI Library - Documentation

Library UI minimalis untuk Roblox dengan tema dark modern, tanpa animasi, ringan, dan mudah digunakan.

Fitur

  • ✅ Tema Dark Modern - Tampilan profesional dengan warna gelap
  • ✅ Tanpa Animasi - Performa maksimal tanpa tween atau transisi
  • ✅ Auto Remove Duplicate - Menghapus UI lama otomatis sebelum membuat baru
  • ✅ Draggable Window - UI utama dan UI minimize dapat dipindahkan
  • ✅ Minimize/Restore - Sembunyikan UI dengan frame minimize yang compact
  • ✅ Keybind Toggle - Tekan K untuk show/hide UI
  • ✅ Auto Scale - Kompatibel dengan semua device
  • ✅ Scrollable Content - Konten otomatis scrollable jika panjang
  • ✅ Dropdown Auto Refresh - Live tracking items dengan auto update
  • ✅ Dropdown Auto Hide - Dropdown hilang otomatis saat tidak ada items
  • ✅ Exclusive Toggle - Toggle yang saling eksklusif dalam grup

Instalasi

local Library = loadstring(game:HttpGet("URL_API_ANDA"))()

Ukuran Default

  • UI Utama: 380x480 px (compact dan optimal)
  • UI Minimize: 250x40 px (mengikuti tinggi header)
  • Dropdown Menu: 180px lebar, tinggi auto sesuai items dengan padding 5px atas dan 8px bawah

Membuat Window

local Window = Library:CreateWindow({
    Title = "Nama UI Anda",
    Size = UDim2.new(0, 380, 0, 480) -- Opsional, default 380x480
})

Parameter CreateWindow

  • Title (string) - Judul window yang ditampilkan di header
  • Size (UDim2) - Ukuran window, default UDim2.new(0, 380, 0, 480)

Komponen UI

1. Toggle

Toggle berbentuk checkbox kotak dengan tanda centang.

local Toggle = Window:AddToggle({
    Name = "Enable Feature",
    Default = false,
    Callback = function(value)
        print("Toggle state:", value)
    end
})

Parameter Toggle

  • Name (string) - Nama toggle
  • Default (boolean) - Nilai awal, default false
  • Callback (function) - Fungsi yang dipanggil saat toggle berubah, menerima parameter value (boolean)
  • ExclusiveGroup (string, opsional) - Nama grup eksklusif (lihat contoh di bawah)

Method Toggle

Toggle:SetValue(true) -- Set toggle menjadi true/false

Toggle Exclusive Group

Toggle dapat dikonfigurasi agar hanya satu yang aktif dalam grup yang sama:

Window:AddToggle({
    Name = "Mode A",
    Default = true,
    ExclusiveGroup = "modes",
    Callback = function(value)
        print("Mode A:", value)
    end
})

Window:AddToggle({
    Name = "Mode B",
    Default = false,
    ExclusiveGroup = "modes",
    Callback = function(value)
        print("Mode B:", value)
    end
})

Window:AddToggle({
    Name = "Mode C",
    Default = false,
    ExclusiveGroup = "modes",
    Callback = function(value)
        print("Mode C:", value)
    end
})

Saat salah satu toggle dalam grup "modes" diaktifkan, toggle lain akan otomatis dinonaktifkan.

2. Button

Button sederhana untuk eksekusi aksi.

Window:AddButton({
    Name = "Click Me",
    Callback = function()
        print("Button clicked!")
    end
})

Parameter Button

  • Name (string) - Teks pada button
  • Callback (function) - Fungsi yang dipanggil saat button diklik

3. Input

Input teks dengan label dan placeholder.

local Input = Window:AddInput({
    Name = "Username",
    Default = "",
    Placeholder = "Enter your username...",
    Callback = function(text)
        print("Input value:", text)
    end
})

Parameter Input

  • Name (string) - Label input
  • Default (string) - Nilai awal input, default ""
  • Placeholder (string) - Teks placeholder, default "Enter text..."
  • Callback (function) - Fungsi yang dipanggil saat Enter ditekan, menerima parameter text (string)

Method Input

Input:SetValue("New Text") -- Set nilai input

4. Dropdown

Dropdown dengan checkbox, mendukung multiple selection dengan batas maksimal, serta fitur auto-refresh untuk live tracking items.

⚠️ PENTING: Hanya boleh menambahkan 1 dropdown per window. Jika mencoba menambahkan lebih dari 1 dropdown, player akan otomatis di-kick dengan pesan error.

📌 Dropdown Biasa (Tanpa Auto Refresh)

Untuk list items yang tidak berubah (statis), seperti pilihan mode, weapon, atau setting.

local Dropdown = Window:AddDropdown({
    Name = "Select Weapon",
    Options = {"Sword", "Gun", "Bow", "Staff", "Axe"},
    Default = {"Sword"},
    MaxSelections = 2,
    Callback = function(selected)
        print("Selected items:", table.concat(selected, ", "))
    end
})

Kapan menggunakan Dropdown Biasa:

  • ✅ Pilihan yang tetap (tidak berubah)
  • ✅ List konfigurasi atau mode
  • ✅ Daftar item yang sudah pasti

🔄 Dropdown dengan Auto Refresh (Live Tracking)

Untuk list items yang berubah secara dinamis, seperti player online, item spawner, collectibles, atau enemies.

🎯 Apa itu Auto Refresh?

Auto Refresh membuat dropdown otomatis memperbarui list items setiap beberapa detik tanpa perlu reload script. Sangat berguna untuk tracking items real-time.

📖 Cara Kerja Auto Refresh

STEP 1: Buat fungsi untuk mengambil data

Fungsi ini harus return array berisi string (list items yang akan ditampilkan di dropdown).

local function getItemSpawners()
    local items = {}
    local itemSpawners = workspace:FindFirstChild("ItemSpawners")
    
    if itemSpawners then
        for _, part in pairs(itemSpawners:GetChildren()) do
            if part:IsA("BasePart") then
                table.insert(items, part.Name)
            end
        end
    end
    
    return items -- HARUS return array
end

STEP 2: Pasang fungsi ke dropdown

local Dropdown = Window:AddDropdown({
    Name = "Select Item Spawner",
    Options = getItemSpawners(), -- Isi awal saat dropdown dibuat
    Default = {},
    MaxSelections = 1,
    AutoRefresh = getItemSpawners, -- Fungsi yang dipanggil berulang
    RefreshInterval = 1, -- Update setiap 1 detik
    Callback = function(selected)
        if #selected > 0 then
            print("Item dipilih:", selected[1])
        end
    end
})

🔁 Apa yang Terjadi?

  1. Saat dropdown dibuat → Options diisi dengan hasil getItemSpawners()
  2. Setiap 1 detik → Library memanggil getItemSpawners() lagi
  3. List dropdown otomatis update dengan data terbaru
  4. Jika ada item baru → langsung muncul di list
  5. Jika item hilang → otomatis dihapus dari list
  6. Pilihan user tetap tersimpan (jika item masih ada)

📚 Contoh Lengkap Auto Refresh

Contoh 1: Item Spawner Tracker

Script untuk tracking item spawner di workspace yang muncul dan hilang secara dinamis.

local Library = loadstring(game:HttpGet("URL_API"))()
local Window = Library:CreateWindow({
    Title = "Item Spawner Tracker"
})

-- STEP 1: Buat fungsi scan items
local function getItemSpawners()
    local items = {}
    local itemSpawners = workspace:FindFirstChild("ItemSpawners")
    
    if itemSpawners then
        for _, part in pairs(itemSpawners:GetChildren()) do
            if part:IsA("BasePart") then
                table.insert(items, part.Name)
            end
        end
    end
    
    print("📦 Items ditemukan:", #items) -- Debug
    return items
end

-- STEP 2: Buat dropdown dengan auto refresh
local selectedItem = nil

local Dropdown = Window:AddDropdown({
    Name = "Select Item Spawner",
    Options = getItemSpawners(), -- Isi awal
    Default = {},
    MaxSelections = 1,
    AutoRefresh = getItemSpawners, -- Update otomatis
    RefreshInterval = 1, -- Scan setiap 1 detik
    Callback = function(selected)
        if #selected > 0 then
            selectedItem = selected[1]
            print("✅ Item dipilih:", selectedItem)
        else
            selectedItem = nil
        end
    end
})

-- STEP 3: Button untuk teleport ke item
Window:AddButton({
    Name = "Teleport to Item",
    Callback = function()
        if not selectedItem then
            print("❌ Pilih item terlebih dahulu!")
            return
        end
        
        local itemSpawners = workspace:FindFirstChild("ItemSpawners")
        if itemSpawners then
            local targetPart = itemSpawners:FindFirstChild(selectedItem)
            if targetPart and targetPart:IsA("BasePart") then
                local player = game.Players.LocalPlayer
                if player.Character then
                    player.Character:PivotTo(targetPart.CFrame)
                    print("🚀 Teleport ke:", selectedItem)
                end
            end
        end
    end
})

Contoh 2: Player Online Tracker

Script untuk tracking player yang online, otomatis update saat ada player join/leave.

local Library = loadstring(game:HttpGet("URL_API"))()
local Window = Library:CreateWindow({
    Title = "Player Tracker"
})

-- STEP 1: Fungsi ambil player online
local function getOnlinePlayers()
    local players = {}
    for _, player in pairs(game.Players:GetPlayers()) do
        if player ~= game.Players.LocalPlayer then
            table.insert(players, player.Name)
        end
    end
    return players
end

-- STEP 2: Dropdown dengan auto refresh
local trackedPlayers = {}

local Dropdown = Window:AddDropdown({
    Name = "Track Players",
    Options = getOnlinePlayers(),
    Default = {},
    MaxSelections = 5, -- Bisa pilih sampai 5 player
    AutoRefresh = getOnlinePlayers,
    RefreshInterval = 2, -- Update setiap 2 detik
    Callback = function(selected)
        trackedPlayers = selected
        print("👥 Players di-track:", table.concat(selected, ", "))
    end
})

-- STEP 3: Toggle untuk ESP tracked players
Window:AddToggle({
    Name = "ESP Tracked Players",
    Default = false,
    Callback = function(value)
        if value then
            print("🔍 ESP aktif untuk:", table.concat(trackedPlayers, ", "))
            -- Tambahkan logic ESP di sini
        else
            print("ESP dimatikan")
        end
    end
})

Contoh 3: Collectibles dengan Info Posisi

Script untuk tracking collectibles dengan info posisi Y (ketinggian).

local Library = loadstring(game:HttpGet("URL_API"))()
local Window = Library:CreateWindow({
    Title = "Collectibles Finder"
})

-- STEP 1: Fungsi scan collectibles
local function getCollectibles()
    local items = {}
    
    for _, obj in pairs(workspace:GetChildren()) do
        if obj:IsA("Part") and obj.Name == "Coin" then
            -- Format: "Coin - Y:123"
            local itemName = string.format("%s - Y:%d", obj.Name, math.floor(obj.Position.Y))
            table.insert(items, itemName)
        end
    end
    
    return items
end

-- STEP 2: Dropdown auto refresh
local selectedCoin = nil

local Dropdown = Window:AddDropdown({
    Name = "Select Coin",
    Options = getCollectibles(),
    Default = {},
    MaxSelections = 1,
    AutoRefresh = getCollectibles,
    RefreshInterval = 0.5, -- Scan cepat (0.5 detik)
    Callback = function(selected)
        if #selected > 0 then
            selectedCoin = selected[1]
        else
            selectedCoin = nil
        end
    end
})

-- STEP 3: Button untuk collect coin
Window:AddButton({
    Name = "Collect Coin",
    Callback = function()
        if selectedCoin then
            print("💰 Collecting:", selectedCoin)
            -- Logic collect coin di sini
        else
            print("❌ Pilih coin terlebih dahulu!")
        end
    end
})

⚙️ Parameter Dropdown Lengkap

Parameter Tipe Default Deskripsi
Name string - Nama dropdown yang ditampilkan
Options table (array) {} Array string berisi pilihan dropdown (isi awal)
Default table (array) {} Array string berisi pilihan yang dipilih secara default
MaxSelections number unlimited Batas maksimal item yang bisa dipilih bersamaan
Callback function - Fungsi yang dipanggil saat pilihan berubah, parameter: selected (table)
AutoRefresh function - Fungsi yang return array string untuk update list otomatis
RefreshInterval number 1 Interval waktu refresh dalam detik (misal: 0.5, 1, 2)

🎛️ Method Dropdown

Dropdown:SetValue({"Item 2", "Item 3"}) -- Set pilihan dropdown secara manual

📝 Cara Kerja Dropdown Detail

Batasan

  • HANYA 1 DROPDOWN PER WINDOW - Mencoba menambahkan dropdown kedua akan kick player otomatis
  • Dropdown muncul di sisi kanan UI utama dengan jarak 5px
  • Tinggi dropdown otomatis menyesuaikan jumlah items, maksimal setara tinggi UI utama

Mode Selection

  • Radio Button Mode (MaxSelections = 1): Checkbox otomatis pindah ke item baru tanpa perlu unselect
  • Multi Select Mode (MaxSelections > 1): Bisa pilih multiple items sampai batas tercapai
  • Saat batas tercapai, checkbox lain tidak bisa diaktifkan sampai salah satu dilepas

Auto Refresh Behavior

  • Auto Hide: Jika fungsi refresh return array kosong {}, dropdown menu akan hilang sepenuhnya
  • Auto Show: Dropdown muncul kembali otomatis saat ada items dan dropdown diklik
  • Selection Persist: Pilihan yang masih valid tetap terpilih saat refresh
  • Auto Remove: Pilihan yang hilang dari list otomatis dihapus

Visual

  • Padding optimal: 5px atas, 8px bawah (tidak mepet border)
  • Checkbox kotak kecil di kiri setiap item
  • Scrollbar otomatis jika items banyak

⚡ Tips Auto Refresh

1. Pilih Refresh Interval yang Tepat

RefreshInterval = 0.5  -- ⚡ Untuk data yang cepat berubah (collectibles, fast spawn)
RefreshInterval = 1    -- ⚖️ Balance antara performa dan responsif (item spawner)
RefreshInterval = 2    -- 🐢 Untuk data yang jarang berubah (player list)
RefreshInterval = 5    -- 🔋 Hemat performa untuk data stabil

2. Tambahkan Debug Print

local function getItems()
    local items = {}
    -- ... logic scan items
    print("📦 Items found:", #items) -- Debug
    return items
end

3. Handle Error dengan Baik

local function getItems()
    local items = {}
    
    local container = workspace:FindFirstChild("ItemSpawners")
    if not container then
        warn("⚠️ ItemSpawners tidak ditemukan!")
        return {} -- Return array kosong
    end
    
    for _, part in pairs(container:GetChildren()) do
        if part:IsA("BasePart") then
            table.insert(items, part.Name)
        end
    end
    
    return items
end

4. Optimasi Performa

Jangan scan terlalu dalam atau terlalu banyak object:

-- ❌ BURUK: Scan semua workspace (lambat)
for _, obj in pairs(workspace:GetDescendants()) do
    -- ...
end

-- ✅ BAIK: Scan folder spesifik saja
local folder = workspace:FindFirstChild("ItemSpawners")
if folder then
    for _, obj in pairs(folder:GetChildren()) do
        -- ...
    end
end

🎮 Contoh Use Case Lengkap

Script ESP + Dropdown Item Tracker

local Library = loadstring(game:HttpGet("URL_API"))()
local Window = Library:CreateWindow({
    Title = "ESP Script Hub"
})

-- Fungsi ambil items
local function getItems()
    local items = {}
    local folder = workspace:FindFirstChild("Items")
    if folder then
        for _, item in pairs(folder:GetChildren()) do
            if item:IsA("Model") or item:IsA("Part") then
                table.insert(items, item.Name)
            end
        end
    end
    return items
end

-- Variable global
local selectedItems = {}
local espEnabled = false

-- Dropdown tracker
local Dropdown = Window:AddDropdown({
    Name = "Track Items",
    Options = getItems(),
    Default = {},
    MaxSelections = 10,
    AutoRefresh = getItems,
    RefreshInterval = 1,
    Callback = function(selected)
        selectedItems = selected
        print("🎯 Tracking:", table.concat(selected, ", "))
    end
})

-- Toggle ESP
Window:AddToggle({
    Name = "Enable ESP",
    Default = false,
    Callback = function(value)
        espEnabled = value
        if value then
            print("✅ ESP aktif untuk items:", table.concat(selectedItems, ", "))
            -- Logic ESP di sini
        else
            print("❌ ESP dimatikan")
        end
    end
})

-- Button teleport
Window:AddButton({
    Name = "TP to Nearest Item",
    Callback = function()
        if #selectedItems == 0 then
            print("❌ Pilih item di dropdown terlebih dahulu!")
            return
        end
        
        local player = game.Players.LocalPlayer
        if not player.Character then return end
        
        local folder = workspace:FindFirstChild("Items")
        if not folder then return end
        
        local nearestItem = nil
        local nearestDistance = math.huge
        
        for _, itemName in pairs(selectedItems) do
            local item = folder:FindFirstChild(itemName)
            if item then
                local distance = (player.Character.HumanoidRootPart.Position - item.Position).Magnitude
                if distance < nearestDistance then
                    nearestDistance = distance
                    nearestItem = item
                end
            end
        end
        
        if nearestItem then
            player.Character:PivotTo(nearestItem.CFrame)
            print("🚀 Teleport ke:", nearestItem.Name)
        end
    end
})

Fitur Window

Keybind Toggle UI

  • Tekan tombol K untuk show/hide seluruh UI
  • UI akan muncul/hilang sesuai state terakhir (normal atau minimize)
  • Keybind tidak akan aktif saat sedang mengetik di chat atau textbox

Minimize & Restore

  • Tombol Minimize: Menyembunyikan UI utama dan menampilkan frame minimize yang compact (250x40px)
  • Tombol Restore (▲): Mengembalikan UI utama ke posisi terakhir frame minimize
  • Posisi Sinkron: Posisi UI utama dan minimize selalu tersinkronisasi
  • Draggable: Baik UI utama maupun UI minimize dapat di-drag

Close

  • Tombol Close: Menghapus UI sepenuhnya dari layar

Auto Drag Sync

  • Saat UI utama di-drag, posisi tersimpan ke UI minimize
  • Saat UI minimize di-drag, posisi tersimpan ke UI utama
  • Saat restore, UI utama muncul di posisi terakhir UI minimize

Spesifikasi Teknis

Warna Default

  • Background Utama: RGB(20, 20, 20)
  • Header: RGB(15, 15, 15)
  • Komponen: RGB(30, 30, 30) - RGB(35, 35, 35)
  • Border: RGB(60, 60, 60)
  • Aksen: RGB(100, 200, 255)
  • Teks: RGB(255, 255, 255)

Font

  • Header: GothamBold 16px
  • Konten: Gotham 13-14px

Corner Radius

  • Window: 6px
  • Komponen: 3-4px

Scrollbar

  • Thickness: 4px
  • Color: RGB(60, 60, 60)

Catatan Penting

  • Library ini tidak menggunakan animasi untuk performa optimal
  • Semua UI menggunakan Roblox default services saja
  • HANYA 1 DROPDOWN PER WINDOW - Mencoba menambahkan lebih dari 1 dropdown akan menyebabkan kick otomatis
  • UI otomatis terhapus saat player respawn dinonaktifkan (ResetOnSpawn = false)
  • Dropdown muncul di sisi kanan UI utama, pastikan ada ruang yang cukup
  • Auto Refresh menggunakan spawn() thread terpisah untuk tidak block main thread

License

Library ini gratis untuk digunakan dan dimodifikasi sesuai kebutuhan Anda.

Powered by hosted.md