Skip to content

[UI] Discord UI Library

Jump to bottom
mehhovcki edited this page Apr 9, 2025 · 1 revision

What is Discord UI Library?

DiscordLib is a UI kit created to help script makers build easy and simple interfaces for their scripts, styled like Discord. Special thanks to dawid-scripts for the original UI Library that inspired this one.

Example

local DiscordLib = loadstring(game:HttpGet("https://raw.githubusercontent.com/mehh0vcki/scripts/refs/heads/main/static/new_library.lua"))()
local UIWindow = DiscordLib:Window("Discord UI Library")
local Server = UIWindow:Server("My Server", "") 
local Channel = Server:Channel("General")

Channel:Button("Click Me", function()
	DiscordLib:Notification("Button Clicked", "You clicked the button!", "OK")
end)

Channel:Textbox("Enter Text", "Type something...", false, function()
	DiscordLib:Notification("Text Updated", "Textbox value updated!", "OK")
end)

Channel:Slider("Example Slider", 0, 100, 50)
Channel:Toggle("Toggle Me", false)

Channel:Bind("Keybind", Enum.KeyCode.E, function()
	print("Keybind Activated!")
	DiscordLib:Notification("Keybind", "Keybind activated!", "OK")
end)

Channel:Dropdown("Choose an option", {"Option 1", "Option 2", "Option 3"}, function(selectedOption)
	DiscordLib:Notification("Dropdown", "You selected: " .. selectedOption, "OK")
end)

Channel:Colorpicker("Pick a color", Color3.new(0.5, 0.5, 0.5))

Channel:Button("Unload", function()
	DiscordLib:Unload()
end)

API

DiscordLib Documentation

DiscordLib is a UI kit created to help script makers build easy and simple interfaces for their scripts, styled like Discord. Special thanks to dawid-scripts (https://github.com/dawid-scripts) for the original UI library that inspired this one.

It gives you a pre-built window with sections for servers, channels, and content, plus ready-made functions for profile settings, themes, and languages.

API

DiscordLib:Window(windowTitle)

Creates the main DiscordLib UI window. This is the first thing you need to do!

  • How to call it: Call this on the main DiscordLib object after requiring it (e.g., local Window = MyLib:Window(...)).

  • Parameters:

    1. windowTitle (string): The text that appears in the top bar of your DiscordLib window. This is what users will see.

  • Returns:

    1. A Window object. Keep this! You'll use this object to add your servers.

  • Example:

    local MyLib = require(path.to.discordlib)
local Window = MyLib:Window("My Cool Application")

Window:Server(serverName, [iconAsset])

Adds a server to the left bar, and creates space for it on the main screen (which will hold a channel list and space for content).

  • How to call it: Call this on the Window object you get from DiscordLib:Window().

  • Parameters:

    1. serverName (string): The name for this server (e.g., "Game Server", "Admin Panel"). Shows up at the top of the channel list. If no icon is given, the first letter of the server name shows up as an icon.
    2. iconAsset (string, optional): The image for the server icon. Use a Roblox asset ID like "rbxassetid://12345" or just "12345". If you leave this out, it uses the first letter of serverName.

  • Returns:

    1. A Server object. Keep this! You need it to add channels to this server with :Channel().

  • Example:

    local Window = MyLib:Window("My Script's UI")
local GameServer = Window:Server("Game Server", "rbxassetid://112233")
local AdminPanel = Window:Server("Admin") -- Only uses 'A' in icon

Server:Channel(channelName)

Adds a channel to your server. Shows the channel in the server's channel list.

  • How to call it: Call this on the Server object you get from :Server().

  • Parameters:

    1. channelName (string): The name of the channel (e.g., "general", "announcements"). Shows up in the list and as the channel's title.

  • Returns:

    1. A Channel object. You need this object to add UI elements to this specific channel with methods like :Button(), :Toggle(), etc.

  • Example:

    local Server = UI:Server("Main", "rbxassetid://69420")
local Channel = Server:Channel("general")

ChannelContent:Button(buttonText, callback)

Adds a clickable button to the channel content area.

  • How to call it: Call this on the Channel object you get from :Channel().

  • Parameters:

    1. buttonText (string): The text to display on the button (e.g., "Click Me!", "Activate").
    2. callback (function): The function to run when the button is clicked.

  • Returns: None (modifies the channel's UI directly).

  • Example:

    Channel:Button("Click Me!", function()
    print("Button was clicked!")
end)

ChannelContent:Toggle(toggleText, defaultState, callback)

Adds a toggle switch to the channel content area.

  • How to call it: Call this on the Channel object you get from :Channel().

  • Parameters:

    1. toggleText (string): The text to display next to the toggle (e.g., "Enable Feature", "Dark Mode").
    2. defaultState (boolean): true if the toggle should start ON, false if it should start OFF.
    3. callback (function): The function to run when the toggle is switched ON or OFF. It receives one argument: newState (boolean).

  • Returns: None (modifies the channel's UI directly).

  • Example:

    Channel:Toggle("Dark Mode", false, function(newState)
    print("Dark Mode is now:", newState)
end)

ChannelContent:Dropdown(text, list, callback)

Adds a dropdown selection menu to the channel content area.

  • How to call it: Call this on the Channel object from :Channel().

  • Parameters:

    1. text (string): The label/description of this list to provide what selection is about and to indicate which selection u have.
    2. list (array of strings): An array of options to pick from.
    3. callback (function): The function that is called when selected

  • Returns: table contains :Clear(), :Add(item), :Set(item)

  • Example:

Channel:Dropdown("Pick your role", {"Admin", "Moderator", "User"}, print)

ChannelContent:Colorpicker(text, presetColor, callback)

Adds a colorpicker to the channel content area.

  • How to call it: Call this on the Channel object from :Channel().

  • Parameters:

    1. text (string): The label/description of this color picker.
    2. presetColor (color3): The starting color (optional)
    3. callback (function): The function that is called when selected, reciving selected color

  • Returns: table contains :SetColor(color)

  • Example:

Channel:Colorpicker("Select color", Color3.new(1, 0, 0), print)

ChannelContent:Textbox(tbText, placeholder, clearOnSubmit, callback)

Adds a textbox to the channel content area.

  • How to call it: Call this on the Channel object from :Channel().

  • Parameters:

    1. tbText (string): The label/description text
    2. placeholder (string): the background text before something is entered (optional)
    3. clearOnSubmit (boolean): if it press enter, it will clears the textbox value automatically.
    4. callback (function): call what entered is sent through the function

  • Returns: None

  • Example:

Channel:Textbox("What do you want to add?",  "" , false, print)

ChannelContent:Label(labelText)

Adds a label to the channel content area.

  • How to call it: Call this on the Channel object from :Channel().

  • Parameters:

    1. labelText (string): The text you wanna display

  • Returns: None

  • Example:

Channel:Label("Hello, World!")

ChannelContent:Bind(bindText, defaultKey, callback)

Adds a keybind to the channel content area.

  • How to call it: Call this on the Channel object from :Channel().

  • Parameters:

    1. bindText (string): The text for the bind

    2. defaultKey (keycode): The base keybind before its setted up

    3. callback (function): Call whenever keybind is activated

  • Returns: None

  • Example:

Channel:Bind("Fly", Enum.KeyCode.Space, function() print("fly activate") end)

ChannelContent:Separator()

Adds a horizontal line to visually separate elements within the channel content area.

  • How to call it: Call this on the Channel object you get from :Channel().

  • Parameters: None

  • Returns: None

  • Example:

Channel:Label("Some information")
Channel:Separator()
Channel:Button("Do Something", function() end)

DiscordLib:Notification(title, text, [buttonText])

Shows a pop-up message inside the UI.

  • How to call it: Call this directly on the DiscordLib object (e.g., MyLib:Notification(...)).

  • Parameters:

    1. title (string): The big text at the top of the popup.
    2. text (string): The main body of the message.
    3. buttonText (string, optional): The text for the button at the bottom to close the popup. If left out, it defaults to "Okay".

  • Returns: None (the popup displays until the user closes it).

  • Example:

DiscordLib:Notification("Important!", "Please restart the script.", "Restart Now")

DiscordLib:Unload()

Warning

This is an experimental feature. Please report any issues encountered.

Removes the entire UI from the screen and stops all its scripts. Good to do when you're finished with it to save memory.

  • How to call it: Call this directly on the DiscordLib object (e.g., MyLib:Unload()).

  • Parameters: None

  • Returns: None

  • Example:

DiscordLib:Unload() -- Removes the UI entirely

Clone this wiki locally