Version / Update: v1.0.0
- Download / Script Link
- -- Services
local UserInputService = game:GetService("UserInputService");
-- UI
local Modal = loadstring(game:HttpGet("https://github.com/BloxCrypto/Modal/releases/download/v1.0-beta/main.lua"))()
local Window = Modal:CreateWindow({
Title = "Modal",
SubTitle = "Hi",
Size = UDim2.fromOffset(400, 400),
MinimumSize = Vector2.new(250, 200),
Transparency = 0,
Icon = "rbxassetid://68073547",
})
local ScriptSettings = ({
NotificationKey = Enum.KeyCode.LeftControl
})
-- Components
local Components = Window:AddTab("Components")
Components:New("Title")({
Title = "Components",
})
Components:New("Button")({
Title = "Button",
Description = "Click this for a notification",
Callback = function()
Window:Notify({
Title = "Notification",
Description = "This is a notification",
Duration = 5,
Type = "Info",
})
end,
})
Components:New("Input")({
Title = "Input",
Description = "Type and it will change the Window Title",
DefaultText = "Modal Library",
Placeholder = "Title Name",
Callback = function(Value)
Window:SetTitle(Value);
-- Window:SetSubTitle("Anything") -- for setting subtitle
-- Window:SetIcon("rbxassetid://0") -- for setting icon
end,
})
Components:New("Keybind")({
Title = "Keybind",
Description = "Change keybind to send notifications",
DefaultKeybind = "LeftControl",
Callback = function(Key)
ScriptSettings.NotificationKey = Key -- Check bottom of the script to see how to use this
print("Got key:", Key) -- Key returns UserInputType if it's a mouse and KeyCode if it's anything else
end,
})
Components:New("Slider")({
Title = "Slider",
Description = "Change the transparency of the UI",
Default = 0,
Minimum = 0,
Maximum = 0.8,
DecimalCount = 2, -- 0.22 for example (2 decimals)
Callback = function(Amount)
Window:SetTransparency(Amount);
end,
})
local Toggle
Toggle = Components:New("Toggle")({
Title = "Toggle",
Description = "Used to toggle features",
DefaultValue = true,
Callback = function(Value)
print("Got:", Value);
Toggle:SetTitle("Value Changed"); -- Changes the title of the component
Toggle:SetDescription("New value is " .. tostring(Value)); -- Changes description
end,
})
Components:New("Title")({
Title = "Popups",
})
Components:New("Dropdown")({
Title = "Regular Dropdown",
Description = "Only can select 1 option",
Options = { "Option 1", "Option 2" },
Default = "Option 1",
Callback = function(Value)
print("Dropdown got:", Value);
end,
})
Components:New("MultiDropdown")({
Title = "Regular Dropdown",
Description = "Multiple selectable options",
Options = { "Option 1", "Option 2", "Option 3" },
Default = { "Option 2", "Option 3" },
Callback = function(Values)
print("MultiDropdown got:", Values);
print("Concat:", table.concat(Values, ", "))
end,
})
Components:New("ColorPicker")({
Title = "Color Picker",
Description = "Returns a Color3 value",
Default = Color3.fromRGB(255, 114, 43),
Callback = function(Color)
print("ColorPicker got:", Color);
end,
})
-- Settings
local Settings = Window:AddTab("Settings")
Settings:New("Title")({
Title = "Themes"
})
Settings:New("Dropdown")({
Title = "Theme",
Description = "Default theme options",
Options = { "Light", "Dark", "Midnight", "Rose", "Emerald" },
Callback = function(Theme)
Window:SetTheme(Theme)
end,
})
Settings:New("Button")({
Title = "Set Custom GUI",
Description = "This is to showcase how custom themes work (without the default ones)",
Callback = function()
-- Any section that has rotation as an option (like background) supports gradients (colorsequences)
-- Any that don't have the rotation option - only support Color3 values
local CustomTheme = {
Mode = "Dark",
Accent = Color3.fromRGB(255, 170, 70),
Background = {
Rotation = 120,
Color = ColorSequence.new({
ColorSequenceKeypoint.new(0, Color3.fromRGB(22, 18, 14)),
ColorSequenceKeypoint.new(1, Color3.fromRGB(10, 8, 6))
}),
Line = {
Color = Color3.fromRGB(255, 200, 120),
Transparency = 0.9
},
OuterOutline = {
Transparency = 0,
Color = Color3.fromRGB(5, 4, 3),
Rotation = 0,
},
InnerOutline = {
Transparency = 0.78,
Color = Color3.fromRGB(170, 130, 90),
Rotation = 0,
}
},
Text = {
Title = {
Color = Color3.fromRGB(255, 245, 230),
},
Description = {
Color = Color3.fromRGB(205, 190, 170),
}
},
Icons = {
ActionButtons = {
Color = Color3.fromRGB(255, 215, 160),
Transparency = 0.18,
}
},
Content = {
Color = ColorSequence.new({
ColorSequenceKeypoint.new(0, Color3.fromRGB(24, 20, 16)),
ColorSequenceKeypoint.new(1, Color3.fromRGB(16, 13, 10))
}),
Rotation = 240,
ScrollBarColor = Color3.fromRGB(200, 160, 110),
InnerOutline = {
Transparency = 0.92,
Color = Color3.fromRGB(160, 125, 85),
Rotation = 0,
},
OuterOutline = {
Transparency = 0,
Color = Color3.fromRGB(6, 5, 4),
Rotation = 0,
},
},
Component = {
Color = Color3.fromRGB(26, 22, 18),
Rotation = 0,
},
Controls = {
Color = Color3.fromRGB(36, 30, 24),
Outline = Color3.fromRGB(48, 40, 32)
},
}
Window:SetTheme(CustomTheme);
end,
})
Settings:New("Button")({
Title = "Destroy GUI",
Description = "Click to get rid of the UI (can't be brought back)",
Callback = function()
Window:Destroy();
end,
})
Window:SetTab("Components")
Window:SetTheme("Rose")
UserInputService.InputBegan:Connect(function(Input)
if (Modal:IsCorrectInput(Input, ScriptSettings.NotificationKey)) then
Window:Notify({
Title = "Modal",
Description = "Keybind triggered",
Duration = 5,
Type = "Success"
})
end
end)[ View More ]
Modal ui library made by lxte and me ofcDocs: https://github.com/BloxCrypto/Modal/blob/main/Docs.mdGithub: GitHub - BloxCrypto/Modal