☁️ CloudyLib Docs
☁️ CloudyLib · v1.0
Overview

CloudyLib

A cloud-themed Roblox UI library. Silky smooth, sky-high scripts — with 12 themes, rich components, and a clean developer API.

☁️

12 Cloud Themes

Named after real sky phenomena — Cumulus, Squall, Anvil and more — each with a full colour palette.

Rich Components

Toggle, Slider, Dropdown, ColorPicker, Keybind, Input, Section, Label, Notification and more.

🎨

Live Theme Switching

Call Window:ApplyTheme() at any time — every element updates with smooth colour tweens.

Cloud Corner UI

Each window has decorative ☁ corners that tint to match your active theme automatically.

Quick Start

-- 1. Load CloudyLib
local Cloudy = loadstring(game:HttpGet(
    "https://raw.githubusercontent.com/YOUR_USERNAME/cloudylib/main/CloudyLib.lua"
))()

-- 2. Create a window
local Window = Cloudy:CreateWindow({
    Title    = "My Script",
    Subtitle = "☁️ Powered by CloudyLib",
    Theme    = "Cumulus",
})

-- 3. Add a tab and a toggle
local Tab = Window:CreateTab("Main", "⚡")
Tab:CreateToggle({
    Name     = "Fly",
    Default  = false,
    Callback = function(val) print(val) end,
})
ℹ️
HttpGet required. Make sure HTTP requests are enabled in your executor settings before loading.
Configuration

Getting Started

Load CloudyLib into any Roblox executor in three steps.

1

Upload to GitHub

Push CloudyLib.lua to a public repo. Copy the raw URL from the file view.

2

Load with HttpGet

local Cloudy = loadstring(game:HttpGet(
    "https://raw.githubusercontent.com/YOUR_USERNAME/cloudylib/main/CloudyLib.lua"
))()
3

Create your window & tabs

local Window  = Cloudy:CreateWindow({ Title="Hub", Theme="Cumulus" })
local Main    = Window:CreateTab("Main",    "⚡")
local Visuals = Window:CreateTab("Visuals", "👁")
💡
Tip: You can paste the full CloudyLib.lua source directly into your script instead of using HttpGet.
Configuration

Windows

The window is the root container. All tabs and elements live inside it.

CreateWindow

local Window = Cloudy:CreateWindow({
    Title    = "My Script",
    Subtitle = "☁️ By Me",
    Theme    = "Cumulus",
    Size     = UDim2.new(0,620,0,450),
})
PropertyTypeRequiredDescription
TitlestringoptionalTopbar title. Default: "CloudyLib"
SubtitlestringoptionalSubtitle below title
ThemestringoptionalStarting theme. Default: "Cumulus"
SizeUDim2optionalCustom window size. Default: UDim2.new(0,600,0,430)

CreateTab

-- CreateTab(name, icon)
local Tab = Window:CreateTab("Main", "⚡")
-- icon is an optional emoji shown in the sidebar. Defaults to ☁️

Window Methods

Window:ApplyTheme(name)
Switches the entire UI to a new theme with smooth colour tweens.
Window:Notify(cfg)
Displays a toast notification.
Window.Theme
The active theme data table (Name, Primary, Background, etc.).
Configuration

Themes

12 cloud-themed palettes — each named after a real sky phenomenon. Switch any time with Window:ApplyTheme().

Applying a Theme

-- At window creation:
local Window = Cloudy:CreateWindow({ Theme = "Cumulonimbus" })

-- At runtime:
Window:ApplyTheme("Squall")

Built-in Theme Selector

Tab:CreateThemeSelector({
    Name     = "Sky Themes",
    Default  = "Cumulus",
    Callback = function(name) print("Theme:", name) end,
})
Interaction

Elements

CloudyLib provides a complete set of interactive elements. Each returns a handle with :Set() and :Get() methods.

ElementMethodReturns
ToggleTab:CreateToggle(cfg)boolean via Callback
SliderTab:CreateSlider(cfg)number via Callback
ButtonTab:CreateButton(cfg)fires Callback on click
InputTab:CreateInput(cfg)string via Callback
DropdownTab:CreateDropdown(cfg)string via Callback
KeybindTab:CreateKeybind(cfg)KeyCode via Callback
ColorPickerTab:CreateColorPicker(cfg)Color3 via Callback
SectionTab:CreateSection(name)— (decorative)
LabelTab:CreateLabel(cfg)— (display only)
ThemeSelectorTab:CreateThemeSelector(cfg)theme name via Callback
Interaction

Binds

All elements bind to UserInputService. CloudyLib handles connection automatically.

Programmatic Updates

local toggle = Tab:CreateToggle({ Name="Fly", Default=false })

-- Update UI + fire callback:
toggle:Set(true)

-- Read silently:
print(toggle.Value)
UI Components

Toggle

A smooth on/off switch with optional description and ripple click feedback.

Live Preview — click to toggle
Fly
Let the clouds carry you
Speed Hack
local toggle = Tab:CreateToggle({
    Name        = "Fly",
    Description = "Let the clouds carry you",
    Default     = false,
    Callback    = function(value)
        print("Fly:", value)
    end,
})
toggle:Set(true)
PropertyTypeRequiredDescription
NamestringrequiredLabel on the card
DescriptionstringoptionalSubtext below the label
DefaultbooleanoptionalInitial state. Default: false
Callbackfunction(bool)optionalFires on every state change
UI Components

Slider

Draggable range input with gradient fill and optional suffix label.

Live Preview — click track to set value
Walk Speed120 sps
local slider = Tab:CreateSlider({
    Name      = "Walk Speed",
    Min       = 16,
    Max       = 500,
    Default   = 16,
    Suffix    = " sps",
    Rounding  = 0,
    Callback  = function(v)
        game.Players.LocalPlayer.Character.Humanoid.WalkSpeed = v
    end,
})
slider:Set(100)
PropertyTypeRequiredDescription
NamestringrequiredLabel above the track
Min / MaxnumberrequiredValue range
DefaultnumberoptionalStarting value
SuffixstringoptionalAppended to display value e.g. " sps"
RoundingnumberoptionalDecimal places (0 = integer)
Callbackfunction(number)optionalFires on every drag update
UI Components

Button

A clickable card with ripple animation and optional emoji icon.

Preview
☁️  Rejoin
📋  Copy UserId
Tab:CreateButton({
    Name     = "Rejoin",
    Icon     = "☁️",
    Callback = function()
        game:GetService("TeleportService"):Teleport(game.PlaceId)
    end,
})
PropertyTypeRequiredDescription
NamestringrequiredButton label
IconstringoptionalEmoji prefix shown before the label
Callbackfunction()optionalFires on click
UI Components

Input

Text entry field with placeholder and focus-lost callback.

Tab:CreateInput({
    Name         = "Script Title",
    Placeholder  = "Enter title…",
    Default      = "",
    ClearOnFocus = false,
    Callback     = function(text, enterPressed)
        if enterPressed then print("Set:", text) end
    end,
})
PropertyTypeRequiredDescription
NamestringrequiredLabel above the text box
PlaceholderstringoptionalGreyed hint text
DefaultstringoptionalPre-filled text
ClearOnFocusbooleanoptionalClears box when focused
Callbackfunction(text, enter)optionalFires on FocusLost
UI Components

Keybind

Click-to-listen key capture. Press any key to bind. Fires OnPress every time the key is hit.

Preview
Toggle UI
RightAlt
Tab:CreateKeybind({
    Name    = "Toggle UI",
    Default = "RightAlt",
    OnPress = function()
        Window.Main.Visible = not Window.Main.Visible
    end,
    Callback = function(key)
        print("New bind:", key.Name)
    end,
})
PropertyTypeRequiredDescription
NamestringrequiredLabel for the keybind row
DefaultstringoptionalStarting KeyCode name e.g. "RightAlt"
OnPressfunction()optionalFires every time the bound key is pressed
Callbackfunction(KeyCode)optionalFires when the bind key is changed
UI Components

ColorPicker

HSV sliders (Hue, Saturation, Value) with a live colour swatch preview. Click the swatch to expand/collapse.

Preview (collapsed)
ESP Color
Tab:CreateColorPicker({
    Name     = "ESP Color",
    Default  = Color3.fromRGB(130, 176, 255),
    Callback = function(color)
        print(color)  -- Color3
    end,
})
PropertyTypeRequiredDescription
NamestringrequiredLabel for the row
DefaultColor3optionalInitial colour
Callbackfunction(Color3)optionalFires continuously during H/S/V drag
UI Components

Textual Elements

Non-interactive elements for structuring and annotating your tab layout.

Section

☁ MOVEMENT ☁
Tab:CreateSection("Movement")

Label

☁  CloudyLib — 12 cloud themes, smooth animations.
Tab:CreateLabel({
    Text = "CloudyLib v1.0 — drift at altitude.",
})

ThemeSelector

Adds a dropdown + colour swatches for all 12 cloud themes directly into a tab.

Tab:CreateThemeSelector({
    Name     = "Sky Themes",
    Default  = "Cumulus",
    Callback = function(name)
        Window:Notify({ Title="Theme", Content="Now drifting in: "..name })
    end,
})
UI Components

Notification

Toast notification with animated gradient progress bar. Multiple stack in the bottom-right.

Preview
☁️  CloudyLib Loaded
Drifting at altitude. Pick your sky in Settings ☁️
✅  Done
Operation completed successfully.
Window:Notify({
    Title    = "CloudyLib Loaded",
    Content  = "Drifting at altitude ☁️",
    Duration = 5,
})
PropertyTypeRequiredDescription
TitlestringoptionalBold notification title
ContentstringoptionalBody text (wraps automatically)
DurationnumberoptionalAuto-dismiss after N seconds. Default: 4
API Reference

Flags

Assign a Flag to any element to track its value in Window.Flags — useful for config saving.

-- Assign flags:
Tab:CreateToggle({ Name="Fly",   Flag="Fly",   Default=false })
Tab:CreateSlider({ Name="Speed", Flag="Speed", Min=16, Max=500, Default=16 })

-- Read from anywhere:
print(Window.Flags.Fly)    -- boolean
print(Window.Flags.Speed)  -- number

-- Save config:
local json = game:GetService("HttpService"):JSONEncode(Window.Flags)
writefile("cloudy_config.json", json)
API Reference

Methods

Every element returned by CloudyLib exposes :Set() for programmatic control.

All Elements

handle:Set(value)
Sets the element's value, fires Callback, and updates its Flag.
handle.Value
The current value of the element (read without triggering callbacks).

Window

Window:CreateTab(name, icon)
Creates and returns a new Tab. Icon is an optional emoji string.
Window:ApplyTheme(name)
Switches all UI to the named theme with smooth tweens.
Window:Notify(cfg)
Shows a toast. cfg: Title, Content, Duration.
Window.Flags
Table of current flagged values.
Window.Theme
Active theme data table.

Example

local fly = Tab:CreateToggle({ Name="Fly", Default=false })

-- Turn on from anywhere:
fly:Set(true)

-- Check current state:
print(fly.Value)  -- true
API Reference

Theming API

Read active theme colours and switch themes at runtime.

Switching at Runtime

Window:ApplyTheme("Cumulonimbus")  -- stormy purple
Window:ApplyTheme("Squall")         -- deep cyan
Window:ApplyTheme("Anvil")          -- blazing yellow

All 12 Themes

NameVibePrimary
Cumulus☁️ Soft daytime blue#8BB4FF
Cirrus🌅 Warm golden hour#FFB964
Cumulonimbus🌩️ Dark stormy purple#A078FF
Stratus🌸 Rosy dawn pink#FF8CAF
Cirrostratus❄️ Ice crystal blue#B9E6FF
Nimbostratus🌋 Volcanic red-orange#FF643C
Fogbank🌿 Misty morning green#64D2A0
Noctilucent🌙 Moonlit night blue#6491DC
Iridescent🌈 Rainbow-edge purple#B478FF
Anvil☀️ Blazing noon yellow#FFD737
Overcast🩶 Flat grey overcast#9BAAC3
Squall🌊 Deep sea cyan#32B9D2