/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

local Dropdown = Window:AddDropdown({
    Name = "Select Items",
    Options = {"Item 1", "Item 2", "Item 3", "Item 4", "Item 5"},
    Default = {"Item 1"},
    MaxSelections = 2,
    Callback = function(selected)
        print("Selected items:", table.concat(selected, ", "))
    end
})

Dropdown dengan Auto Refresh (Live Tracking)

Dropdown dapat secara otomatis memperbarui list items menggunakan fungsi refresh:

local Dropdown = Window:AddDropdown({
    Name = "Track Live Items",
    Options = {},
    Default = {},
    MaxSelections = 3,
    AutoRefresh = function()
        local items = {}
        for _, obj in pairs(workspace:GetChildren()) do
            if obj:IsA("Part") and obj.Name == "Collectible" then
                table.insert(items, obj.Name .. " - " .. math.floor(obj.Position.Y))
            end
        end
        return items
    end,
    RefreshInterval = 0.5,
    Callback = function(selected)
        print("Live selected:", table.concat(selected, ", "))
    end
})

Parameter Dropdown

  • Name (string) - Nama dropdown
  • Options (table) - Array string berisi pilihan dropdown
  • Default (table) - Array string berisi pilihan yang dipilih secara default, default {}
  • MaxSelections (number) - Batas maksimal item yang bisa dipilih bersamaan, default semua item
  • Callback (function) - Fungsi yang dipanggil saat pilihan berubah, menerima parameter selected (table array string)
  • AutoRefresh (function, opsional) - Fungsi yang mengembalikan array string baru untuk update list secara otomatis
  • RefreshInterval (number, opsional) - Interval waktu refresh dalam detik, default 1

Method Dropdown

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

Cara Kerja Dropdown

  • BATASAN PENTING: Hanya boleh ada 1 dropdown per window. Mencoba menambahkan dropdown kedua akan menyebabkan player di-kick otomatis.
  • Dropdown muncul di sisi kanan UI utama dengan jarak 5px
  • Tinggi dropdown otomatis menyesuaikan jumlah items, maksimal setara dengan tinggi UI utama
  • Padding optimal: List memiliki padding 5px atas dan 8px bawah agar tidak mepet dengan border
  • Jika items banyak, akan muncul scrollbar otomatis
  • Menggunakan checkbox kotak kecil di kiri setiap item
  • Radio Button Mode: Jika MaxSelections = 1, checkbox otomatis berpindah ke item baru tanpa perlu unselect (seperti radio button)
  • Multi Select Mode: Jika MaxSelections > 1, user bisa pilih multiple items sampai batas tercapai
  • Saat batas MaxSelections tercapai, checkbox lain tidak bisa diaktifkan sampai salah satu dilepas
  • Auto Refresh: Jika AutoRefresh diset, dropdown akan otomatis memperbarui list items sesuai RefreshInterval
  • Auto Hide: Jika hasil refresh mengembalikan array kosong {}, dropdown menu di sisi kanan akan hilang sepenuhnya
  • Auto Show: Dropdown menu akan muncul kembali otomatis saat ada items dan dropdown diklik
  • Selection Persist: Pilihan yang masih valid akan tetap terpilih saat refresh, pilihan yang hilang akan otomatis dihapus

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

Contoh Penggunaan Lengkap

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

local Window = Library:CreateWindow({
    Title = "My Script Hub",
    Size = UDim2.new(0, 380, 0, 480)
})

Window:AddToggle({
    Name = "Auto Farm",
    Default = false,
    Callback = function(value)
        _G.AutoFarm = value
        print("Auto Farm:", value)
    end
})

Window:AddToggle({
    Name = "Speed Hack",
    Default = false,
    Callback = function(value)
        if value then
            game.Players.LocalPlayer.Character.Humanoid.WalkSpeed = 100
        else
            game.Players.LocalPlayer.Character.Humanoid.WalkSpeed = 16
        end
    end
})

Window:AddButton({
    Name = "TP to Spawn",
    Callback = function()
        game.Players.LocalPlayer.Character.HumanoidRootPart.CFrame = CFrame.new(0, 10, 0)
    end
})

Window:AddInput({
    Name = "Walk Speed",
    Default = "16",
    Placeholder = "Enter speed...",
    Callback = function(text)
        local speed = tonumber(text)
        if speed then
            game.Players.LocalPlayer.Character.Humanoid.WalkSpeed = speed
        end
    end
})

Window:AddDropdown({
    Name = "Select Weapons",
    Options = {"Sword", "Gun", "Bow", "Staff", "Axe"},
    Default = {"Sword"},
    MaxSelections = 2,
    Callback = function(selected)
        print("Weapons equipped:", table.concat(selected, ", "))
        _G.SelectedWeapons = selected
    end
})

Window:AddDropdown({
    Name = "Live Player Tracker",
    Options = {},
    Default = {},
    MaxSelections = 5,
    AutoRefresh = function()
        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,
    RefreshInterval = 2,
    Callback = function(selected)
        print("Tracking players:", table.concat(selected, ", "))
        _G.TrackedPlayers = selected
    end
})

Window:AddToggle({
    Name = "ESP Players",
    Default = false,
    ExclusiveGroup = "esp",
    Callback = function(value)
        print("ESP Players:", value)
    end
})

Window:AddToggle({
    Name = "ESP Items",
    Default = false,
    ExclusiveGroup = "esp",
    Callback = function(value)
        print("ESP Items:", value)
    end
})

Tips Penggunaan

  1. Keybind K: Tekan K kapan saja untuk toggle show/hide UI dengan cepat tanpa perlu minimize.

  2. Dropdown Limit: Library ini HANYA MENDUKUNG 1 DROPDOWN PER WINDOW. Jika Anda mencoba menambahkan dropdown kedua, player akan otomatis di-kick dengan pesan error profesional. Ini adalah limitasi desain untuk menjaga UI tetap clean dan optimal.

  3. Auto Refresh Dropdown: Gunakan fitur AutoRefresh untuk tracking items secara live (contoh: player list, collectibles, enemies, lucky blocks). Dropdown akan otomatis update dan hide jika tidak ada items, kemudian muncul kembali saat ada items.

  4. Refresh Interval: Atur RefreshInterval sesuai kebutuhan. Untuk data yang cepat berubah gunakan 0.5-1 detik, untuk data stabil gunakan 2-5 detik untuk performa lebih baik.

  5. Dropdown Spacing: List items memiliki padding yang optimal (5px atas, 8px bawah) sehingga tidak mepet dengan border dropdown menu. Tampilan lebih profesional dan mudah dibaca.

  6. Dropdown Auto Size: Dropdown otomatis menyesuaikan tinggi berdasarkan jumlah items, dengan maksimal tinggi sama dengan UI utama. Jika lebih banyak, scrollbar akan muncul.

  7. Exclusive Toggle: Gunakan ExclusiveGroup untuk membuat toggle yang hanya satu bisa aktif (seperti radio button mode selector).

  8. Max Selections: Atur MaxSelections di dropdown untuk membatasi berapa banyak item yang bisa dipilih bersamaan. Jika MaxSelections = 1, dropdown akan berperilaku seperti radio button (checkbox otomatis pindah ke item baru tanpa perlu unselect).

  9. Ukuran UI: Default ukuran sudah dioptimalkan (380x480px), namun bisa disesuaikan melalui parameter Size saat membuat window.

  10. Auto Cleanup: Library otomatis menghapus UI lama dengan nama yang sama sebelum membuat UI baru, mencegah duplikasi UI.

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

License

Library ini gratis untuk digunakan dan dimodifikasi sesuai kebutuhan Anda.

Powered by hosted.md