### Install and Initialize OnyxUI

Source: https://context7.com/loneka/onyx-ui/llms.txt

Demonstrates how to add OnyxUI as a dependency via wally.toml and how to require the library modules within a Roblox script.

```toml
[dependencies]
OnyxUI = "imavafe/onyx-ui@^1.0.4"
```

```lua
local OnyxUI = require(path.to.OnyxUI)
local Fusion = require(path.to.Fusion)

local Components = OnyxUI.Components
local Themer = OnyxUI.Themer
local Util = OnyxUI.Util
```

--------------------------------

### Create a custom TextButton component using OnyxUI

Source: https://github.com/loneka/onyx-ui/blob/main/docs/intro.md

Demonstrates how to define a custom button component by extending OnyxUI's base props and utilizing Fusion for reactive state management. It shows the initialization of the component scope, theme application, and property combination.

```lua
local OnyxUI = require(path.to.OnyxUI)
local Fusion = require(path.to.Fusion)

export type TextButtonProps = OnyxUI.ButtonProps & {
	Text: Fusion.UsedAs<string>?,
}

return function(Scope: Fusion.Scope<any>, Props: TextButtonProps)
	local Scope = Fusion.innerScope(Scope, Fusion, OnyxUI.Util, OnyxUI.Components)
	local Theme = OnyxUI.Themer.Theme:now()

	local Text = OnyxUI.Util.Fallback(Props.Text, "Hello World")

	return Scope:Button(OnyxUI.Util.CombineProps(Props, {
		Name = script.Name,
		Content = Scope:Computed(function(Use)
			local TextValue = Use(Text)

			return { TextValue }
		end),
		Color = Theme.Colors.Primary.Main,
		SizeVariant = "Large",
		Size = Scope:UDim(0, Theme.Sizing["8"]),
		List = {
			FillDirection = Enum.FillDirection.Vertical,
		}
	}))
end
```

--------------------------------

### Implement Switch Component in Luau

Source: https://context7.com/loneka/onyx-ui/llms.txt

Shows how to create toggleable Switch components. Includes examples of reactive state binding, disabled states, and custom color styling.

```lua
local OnyxUI = require(path.to.OnyxUI)
local Fusion = require(path.to.Fusion)

local Scope = Fusion.scoped(Fusion, OnyxUI.Util, OnyxUI.Components)
local Theme = OnyxUI.Themer.Theme:now()

local IsMusicEnabled = Scope:Value(true)

Scope:Observer(IsMusicEnabled):onBind(function()
    print("Music enabled:", Fusion.peek(IsMusicEnabled))
end)

local MusicSwitch = Scope:Switch {
    Switched = IsMusicEnabled,
    Color = Theme.Colors.Primary.Main,
}

local DisabledSwitch = Scope:Switch {
    Switched = false,
    Disabled = true,
}

local CustomSwitch = Scope:Switch {
    Switched = true,
    Color = OnyxUI.Util.Colors.Green["500"],
}
```

--------------------------------

### Stroke Styling with Color and Thickness in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/styling.md

Configures stroke properties for UI elements, including color, thickness, transparency, and application mode. This is an example of Onyx UI's children-based styling.

```lua
Stroke = {
  Color = Color3.fromRGB(255, 255, 255),
  Thickness = 2,
  Transparency = 0,
  ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
  LineJoinMode = Enum.LineJoinMode.Round,
}
```

--------------------------------

### Create Styled Base Component

Source: https://context7.com/loneka/onyx-ui/llms.txt

Shows how to instantiate a Base component with custom styling properties including corners, padding, strokes with gradients, and layout settings.

```lua
local OnyxUI = require(path.to.OnyxUI)
local Fusion = require(path.to.Fusion)

local Scope = Fusion.scoped(Fusion, OnyxUI.Util, OnyxUI.Components)
local Theme = OnyxUI.Themer.Theme:now()

local MyFrame = Scope:Base {
    Name = "StyledFrame",
    Size = UDim2.fromOffset(200, 150),
    Corner = { Radius = UDim.new(0, 8) },
    Padding = { All = UDim.new(0, 16) },
    Stroke = {
        Color = Color3.fromRGB(255, 255, 255),
        Thickness = 2,
        Gradient = {
            Color = ColorSequence.new(Color3.new(1, 0, 0), Color3.new(0, 0, 1)),
            Rotation = 90
        }
    }
}
```

--------------------------------

### Create Custom Themes with Themer (Lua)

Source: https://context7.com/loneka/onyx-ui/llms.txt

Shows how to create and apply custom themes to OnyxUI components using the Themer module. Allows centralized control over colors, fonts, and spacing. Requires OnyxUI and Fusion libraries.

```lua
local OnyxUI = require(path.to.OnyxUI)
local Fusion = require(path.to.Fusion)

local Themer = OnyxUI.Themer
local Util = OnyxUI.Util

-- Create a custom theme
local Scope = Fusion.scoped()

local DarkBlueTheme = Themer.NewTheme(Scope, {
    Colors = {
        Primary = {
            Main = Util.Colors.Blue["500"],
        },
        Secondary = {
            Main = Util.Colors.Slate["400"],
        },
        Neutral = {
            Main = Util.Colors.Slate["800"],
        },
        NeutralContent = {
            Main = Util.Colors.Slate["300"],
        },
        Base = {
            Main = Util.Colors.Slate["900"],
        },
        BaseContent = {
            Main = Util.Colors.White,
        },
        Success = {
            Main = Util.Colors.Green["500"],
        },
        Error = {
            Main = Util.Colors.Red["500"],
        },
        Warning = {
            Main = Util.Colors.Amber["500"],
        },
        Info = {
            Main = Util.Colors.Cyan["400"],
        },
    },
    Font = {
        Body = "rbxasset://fonts/families/GothamSSm.json",
        Heading = "rbxasset://fonts/families/GothamSSm.json",
    },
    FontWeight = {
        Body = Enum.FontWeight.Medium,
        Bold = Enum.FontWeight.Bold,
        Heading = Enum.FontWeight.Bold,
    },
    TextSize = {
        Base = 16, -- All text sizes scale from this
    },
    CornerRadius = {
        Base = 6,
    },
    Padding = {
        Base = 20,
    },
    Spacing = {
        Base = 16,
    },
})

-- Apply custom theme to a section of UI
Themer.Theme:is(DarkBlueTheme):during(function()
    local Theme = Themer.Theme:now() -- Now returns DarkBlueTheme

    local UIScope = Fusion.scoped(Fusion, OnyxUI.Util, OnyxUI.Components)

    -- All components created here use DarkBlueTheme
    local ThemedButton = UIScope:Button {
        Content = { "Themed Button" },
        Color = Theme.Colors.Primary.Main,
    }
end)
```

--------------------------------

### Create and Use Slider Components (Lua)

Source: https://context7.com/loneka/onyx-ui/llms.txt

Demonstrates creating and configuring slider components with customizable step units and disabled states. Requires OnyxUI and Fusion libraries.

```lua
local OnyxUI = require(path.to.OnyxUI)
local Fusion = require(path.to.Fusion)

local Scope = Fusion.scoped(Fusion, OnyxUI.Util, OnyxUI.Components)
local Theme = OnyxUI.Themer.Theme:now()

-- Create reactive state for slider value (0 to 1)
local VolumeLevel = Scope:Value(0.75)

-- Observe value changes
Scope:Observer(VolumeLevel):onBind(function()
    print("Volume:", Fusion.peek(VolumeLevel) * 100, "%\n")
end)

-- Basic slider
local VolumeSlider = Scope:Slider {
    Value = VolumeLevel,
    Color = Theme.Colors.Primary.Main,
    Unit = 1 / 100, -- 1% increments
}

-- Slider with larger step units
local QualitySlider = Scope:Slider {
    Value = Scope:Value(0.5),
    Unit = 1 / 4, -- 25% increments (Low, Medium, High, Ultra)
    Color = OnyxUI.Util.Colors.Blue["500"],
}

-- Disabled slider
local DisabledSlider = Scope:Slider {
    Value = Scope:Value(0.5),
    Disabled = true,
}
```

--------------------------------

### Apply a Custom Theme in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/theming.md

Illustrates how to apply a custom theme in Lua using OnyxUI's Themer. It demonstrates how to require a custom theme and temporarily switch the active theme for UI construction.

```lua
local MyTheme = require(path.to.MyTheme)

local Themer = OnyxUI.Themer

Themer.Theme:is(MyTheme):during(function()
  local Theme = Themer.Theme:now() -- This now returns MyTheme!
  -- Any UI constructed from this callback will also use MyTheme.
end)
```

--------------------------------

### Create a New Theme Module in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/theming.md

Shows how to create a new theme module in Lua by extending OnyxUI's Themer. This involves defining a new theme specification and returning it.

```lua
local Themer = OnyxUI.Themer


local Scope = Fusion.scoped()

local MyTheme = Themer.NewTheme(Scope, {
  -- Specify theme properties here
})

return MyTheme
```

--------------------------------

### Create and Use ProgressBar Component (Lua)

Source: https://context7.com/loneka/onyx-ui/llms.txt

Illustrates the creation and usage of a ProgressBar component to visually indicate completion percentages. Supports animated updates. Requires OnyxUI and Fusion libraries.

```lua
local OnyxUI = require(path.to.OnyxUI)
local Fusion = require(path.to.Fusion)

local Scope = Fusion.scoped(Fusion, OnyxUI.Util, OnyxUI.Components)
local Theme = OnyxUI.Themer.Theme:now()

-- Create reactive progress value
local DownloadProgress = Scope:Value(0.45)

-- Basic progress bar
local ProgressIndicator = Scope:ProgressBar {
    Progress = DownloadProgress,
    Color = Theme.Colors.Primary.Main,
}

-- Animated progress update
task.spawn(function()
    for i = 0, 100, 5 do
        DownloadProgress:set(i / 100)
        task.wait(0.1)
    end
end)
```

--------------------------------

### Utilize OnyxUI Helper Functions

Source: https://context7.com/loneka/onyx-ui/llms.txt

Demonstrates usage of OnyxUI utility functions for color palette access, property fallbacks, state object normalization, and reactive unit creation. These helpers simplify UI development by providing robust defaults and seamless integration with Fusion state objects.

```lua
local OnyxUI = require(path.to.OnyxUI)
local Fusion = require(path.to.Fusion)
local Util = OnyxUI.Util

-- Colors and Fallbacks
local RedColor = Util.Colors.Red["500"]
local Color = Util.Fallback(Props.Color, Util.Colors.White)

-- State normalization
local Hovering = Scope:EnsureValue(Util.Fallback(Props.Hovering, false))

-- Reactive unit helpers
local DynamicPadding = Scope:UDim(0, Theme.Padding["1"])
local LighterColor = Util.Emphasize(Util.Colors.Blue["500"], 0.2)
```

--------------------------------

### Implement Button Components

Source: https://context7.com/loneka/onyx-ui/llms.txt

Demonstrates the usage of the Button component with various styling variants such as Filled, Outlined, and Ghost, including support for icons and interaction callbacks.

```lua
local PrimaryButton = Scope:Button {
    Content = { "Click Me" },
    Color = Theme.Colors.Primary.Main,
    Style = "Filled",
    SizeVariant = "Large",
    OnActivate = function()
        print("Button clicked!")
    end
}

local OutlinedButton = Scope:Button {
    Content = { "rbxassetid://123456789", "With Icon" },
    Style = "Outlined"
}
```

--------------------------------

### Create Custom OnyxUI Components

Source: https://context7.com/loneka/onyx-ui/llms.txt

Provides a template for building custom components that extend OnyxUI base props. It covers defining prop types, utilizing the theming system, and merging custom styles with existing component functionality.

```lua
export type SettingToggleProps = OnyxUI.BaseButtonProps & {
    Label: Fusion.UsedAs<string>?,
    Switched: Fusion.UsedAs<boolean>?,
    Disabled: Fusion.UsedAs<boolean>?,
}

return function(Scope: Fusion.Scope<any>, Props: SettingToggleProps)
    local Theme = Themer.Theme:now()
    return Scope:Frame(Util.CombineProps(Props, {
        Name = "SettingToggle",
        [Children] = {
            Scope:Text { Text = Util.Fallback(Props.Label, "Setting") },
            Scope:Switch { Switched = Scope:EnsureValue(Util.Fallback(Props.Switched, false)) }
        }
    }))
end
```

--------------------------------

### Create Card Component in Luau

Source: https://context7.com/loneka/onyx-ui/llms.txt

Demonstrates how to implement a Card component to group content. It uses Fusion's scoped API to manage layout, corner radius, and nested children like TitleBar, Switch, and Button.

```lua
local OnyxUI = require(path.to.OnyxUI)
local Fusion = require(path.to.Fusion)

local Children = Fusion.Children
local Scope = Fusion.scoped(Fusion, OnyxUI.Util, OnyxUI.Components)
local Theme = OnyxUI.Themer.Theme:now()

local SettingsCard = Scope:Card {
    Size = UDim2.fromOffset(300, 0),
    AutomaticSize = Enum.AutomaticSize.Y,
    BackgroundColor3 = Theme.Colors.Base.Main,

    Corner = {
        Radius = Scope:UDim(0, Theme.CornerRadius["2"]),
    },

    List = {
        FillDirection = Enum.FillDirection.Vertical,
        HorizontalFlex = Enum.UIFlexAlignment.Fill,
        Padding = Scope:UDim(0, Theme.Spacing["0.5"]),
    },

    [Children] = {
        Scope:TitleBar {
            Content = { "Settings" },
            ContentSize = Theme.TextSize["1.25"],
        },

        Scope:Switch {
            Switched = true,
            Color = Theme.Colors.Primary.Main,
        },

        Scope:Button {
            Content = { "Save" },
            Color = Theme.Colors.Primary.Main,
            Size = UDim2.fromScale(1, 0),
            AutomaticSize = Enum.AutomaticSize.Y,
        },
    },
}
```

--------------------------------

### Build a Settings Menu with Onyx-UI and Fusion

Source: https://context7.com/loneka/onyx-ui/llms.txt

A functional settings menu component that utilizes reactive state management via Fusion. It includes a scrollable area with toggles, sliders, text inputs, and action buttons for saving or canceling changes.

```lua
local OnyxUI = require(path.to.OnyxUI)
local Fusion = require(path.to.Fusion)

local Children = Fusion.Children
local Util = OnyxUI.Util
local Themer = OnyxUI.Themer

return function(Scope: Fusion.Scope<any>, Props)
    local Scope = Fusion.innerScope(Scope, Fusion, Util, OnyxUI.Components)
    local Theme = Themer.Theme:now()

    -- Reactive state
    local MusicEnabled = Scope:Value(true)
    local SFXVolume = Scope:Value(0.75)
    local Username = Scope:Value("")

    return Scope:Card {
        Parent = Props.Parent,
        Size = Scope:UDim2Offset(Theme.Sizing["16"], 0),
        AutomaticSize = Enum.AutomaticSize.Y,

        Corner = {
            Radius = Scope:UDim(0, Theme.CornerRadius["2"]),
        },

        List = {
            FillDirection = Enum.FillDirection.Vertical,
            HorizontalFlex = Enum.UIFlexAlignment.Fill,
            Padding = Scope:UDim(0, Theme.Spacing["0.5"]),
        },

        [Children] = {
            -- Header
            Scope:TitleBar {
                Content = { "Settings" },
                ContentSize = Theme.TextSize["1.25"],
            },

            -- Scrollable content
            Scope:Scroller {
                Size = UDim2.new(UDim.new(1, 0), UDim.new(0, 200)),
                AutomaticSize = Enum.AutomaticSize.None,

                List = {
                    FillDirection = Enum.FillDirection.Vertical,
                    HorizontalFlex = Enum.UIFlexAlignment.Fill,
                    Padding = Scope:UDim(0, Theme.Spacing["0.25"]),
                },

                [Children] = {
                    -- Music toggle
                    Scope:Frame {
                        BackgroundTransparency = 1,
                        List = {
                            FillDirection = Enum.FillDirection.Horizontal,
                            VerticalAlignment = Enum.VerticalAlignment.Center,
                        },

                        [Children] = {
                            Scope:Text {
                                Text = "Music",
                                Flex = { Mode = Enum.UIFlexMode.Fill },
                            },
                            Scope:Switch {
                                Switched = MusicEnabled,
                                Color = Theme.Colors.Primary.Main,
                            },
                        },
                    },

                    -- Volume slider
                    Scope:Frame {
                        BackgroundTransparency = 1,
                        List = {
                            FillDirection = Enum.FillDirection.Vertical,
                            Padding = Scope:UDim(0, Theme.Spacing["0.25"]),
                        },

                        [Children] = {
                            Scope:Text { Text = "SFX Volume" },
                            Scope:Slider {
                                Value = SFXVolume,
                                Unit = 1 / 20,
                                Color = Theme.Colors.Primary.Main,
                            },
                        },
                    },

                    -- Username input
                    Scope:TextInput {
                        Text = Username,
                        PlaceholderText = "Enter nickname...",
                        CharacterLimit = 20,
                        AutomaticSize = Enum.AutomaticSize.Y,
                    },
                },
            },

            -- Action buttons
            Scope:Frame {
                BackgroundTransparency = 1,
                List = {
                    FillDirection = Enum.FillDirection.Horizontal,
                    HorizontalAlignment = Enum.HorizontalAlignment.Right,
                    Padding = Scope:UDim(0, Theme.Spacing["0.5"]),
                },

                [Children] = {
                    Scope:Button {
                        Content = { "Cancel" },
                        Style = "Ghost",

                        OnActivate = function()
                            print("Cancelled")
                        end,
                    },
                    Scope:Button {
                        Content = { "Save" },
                        Color = Theme.Colors.Primary.Main,

                        OnActivate = function()
                            print("Saved settings:")
                            print("  Music:", Fusion.peek(MusicEnabled))
                            print("  Volume:", Fusion.peek(SFXVolume))
                            print("  Username:", Fusion.peek(Username))
                        end,
                    },
                },
            },
        },
    }
end
```

--------------------------------

### Access Theme Properties in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/theming.md

Demonstrates how to access theme properties such as colors, stroke thickness, and spacing using the OnyxUI Themer API in Lua. This allows for consistent styling across UI components.

```lua
local Theme = OnyxUI.Themer.Theme:now()

Scope:Card {
  BackgroundColor3 = Theme.Colors.Neutral.Main,
  Stroke = {
    Thickness = Theme.StrokeThickness["2"],
  },
  Padding = {
    All = Scope:UDim(0, Theme.Spacing["2"])
  }
}
```

--------------------------------

### Compute Reactive Units with Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/utilities.md

Simplifies the computation of reactive units, reducing the amount of code required for responsive design. This utility works with theme values for consistent spacing and sizing.

```lua
return function(Scope, Props)
  local Scope = Fusion.innerScope(Fusion, OnyxUI.Util)
  local Theme = Themer.Theme:now()

  Scope:Card {
    Padding = {
      All = Scope:UDim(0, Theme.Padding["2"])
    }
  }
end
```

--------------------------------

### Implement Checkbox Component in Luau

Source: https://context7.com/loneka/onyx-ui/llms.txt

Demonstrates the Checkbox component for boolean selections. Covers reactive state, custom icons, and disabled states.

```lua
local OnyxUI = require(path.to.OnyxUI)
local Fusion = require(path.to.Fusion)

local Scope = Fusion.scoped(Fusion, OnyxUI.Util, OnyxUI.Components)
local Theme = OnyxUI.Themer.Theme:now()

local AcceptedTerms = Scope:Value(false)

local TermsCheckbox = Scope:Checkbox {
    Checked = AcceptedTerms,
    Color = Theme.Colors.Primary.Main,
}

local CustomCheckbox = Scope:Checkbox {
    Checked = true,
    Icon = "rbxassetid://13858821963",
    Color = OnyxUI.Util.Colors.Green["500"],
}

local DisabledCheckbox = Scope:Checkbox {
    Checked = true,
    Disabled = true,
}
```

--------------------------------

### Grow Flex Mode Styling with Ratios in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/styling.md

Sets a UI element to grow within its parent, with options to define grow/shrink ratios and alignment. This is part of Onyx UI's flexible layout system.

```lua
Flex = {
  Mode = Enum.FlexMode.Grow,
  GrowRatio = 1,
  ShrinkRatio = 0,
  ItemLineAlignment = Enum.ItemLineAlignment.Center,
}
```

--------------------------------

### Horizontal List Layout with Wrapping in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/styling.md

Sets up a UI element to arrange children horizontally, allowing wrapping and centering. This demonstrates Onyx UI's flexible list layout capabilities.

```lua
List = {
  FillDirection = Enum.FillDirection.Horizontal,
  HorizontalAlignment = Enum.HorizontalAlignment.Center,
  VerticalAlignment = Enum.VerticalAlignment.Center,
  Padding = UDim.new(0, 8),
  Wraps = true,
}
```

--------------------------------

### Equal-Sided Padding Styling in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/styling.md

Applies uniform padding to all sides of a UI element using UDim.new. This is a convenient way to manage spacing in Onyx UI components.

```lua
Padding = {
  All = UDim.new(0, 4),
}
```

--------------------------------

### Implement TextInput and TextArea in Luau

Source: https://context7.com/loneka/onyx-ui/llms.txt

Covers text input fields including focus handling, character limits, text processing functions, and multi-line text areas.

```lua
local OnyxUI = require(path.to.OnyxUI)
local Fusion = require(path.to.Fusion)

local Scope = Fusion.scoped(Fusion, OnyxUI.Util, OnyxUI.Components)
local Theme = OnyxUI.Themer.Theme:now()

local Username = Scope:Value("")

local UsernameInput = Scope:TextInput {
    Text = Username,
    PlaceholderText = "Enter username...",
    CharacterLimit = 20,
    Color = Theme.Colors.Primary.Main,

    OnFocus = function()
        print("Input focused")
    end,

    OnFocusEnd = function()
        print("Input lost focus, value:", Fusion.peek(Username))
    end,
}

local UppercaseInput = Scope:TextInput {
    PlaceholderText = "Uppercase only",
    TextProcessor = function(text)
        return string.upper(text)
    end,
}

local DescriptionInput = Scope:TextArea {
    PlaceholderText = "Enter description...",
    TextWrapped = true,
    MultiLine = true,
    Size = UDim2.fromOffset(250, 100),
    AutomaticSize = Enum.AutomaticSize.None,
}

local DisabledInput = Scope:TextInput {
    Text = "Cannot edit",
    Disabled = true,
}
```

--------------------------------

### Size Limit Styling in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/styling.md

Sets minimum and maximum size constraints for a UI element, preventing it from becoming too small or too large. This ensures usability across different screen sizes.

```lua
SizeLimit = {
  Max = Vector2.new(100, 100),
  Min = Vector2.new(0, 0),
}
```

--------------------------------

### Combine Component Properties with Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/utilities.md

Automatically supports all available OnyxUI properties within a custom component. This simplifies integration by allowing standard properties like Size, Position, and Padding to be used directly.

```lua
return function(Scope, Props)
  local Scope = Fusion.innerScope(Scope, Fusion, OnyxUI.Util, OnyxUI.Components)
  local Theme = Themer.Theme:now()

  return Scope:BaseButton(OnyxUI.Util.CombineProps(Props, {
    BackgroundTransparency = 0,
    Corner = {
      Radius = Scope:UDim(0, Theme.CornerRadius["2"]),
    },

    -- All properties from OnyxUI's `BaseButton` component will now work.
  }))
end
```

--------------------------------

### Use TailwindCSS Color Shorthands with Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/utilities.md

Provides color shorthands directly imported from TailwindCSS's default color palette. This eliminates the need for manual color picking and ensures consistent theming.

```lua
Scope:Button {
  Color = OnyxUI.Util.Colors.Red["500"], -- Shade "500" of Colors.Red
}
```

--------------------------------

### Scale Styling in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/styling.md

Applies a scaling factor to a UI element, effectively resizing it relative to its original size. This prop is part of Onyx UI's utility styling options.

```lua
Scale = {
  Scale = 2,
}
```

--------------------------------

### Text Size Limit Styling in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/styling.md

Defines the minimum and maximum font sizes for text elements, ensuring readability. This prop is crucial for maintaining consistent text appearance in Onyx UI.

```lua
TextSizeLimit = {
  Max = 24,
  Min = 12,
}
```

--------------------------------

### Fill Flex Mode Styling in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/styling.md

Configures a UI element to fill its parent container using the 'Fill' mode within Onyx UI's Flex system. This is useful for responsive layouts.

```lua
Flex = {
  Mode = Enum.FlexMode.Fill,
}
```

--------------------------------

### Individual Padding Styling in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/styling.md

Sets distinct padding values for the top, left, right, and bottom sides of a UI element. This offers granular control over spacing within Onyx UI.

```lua
Padding = {
  Top = UDim.new(0, 4),
  Left = UDim.new(0, 8),
  Right = UDim.new(0, 8),
  Bottom = UDim.new(0, 4),
}
```

--------------------------------

### Gradient Styling in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/styling.md

Defines gradient properties for UI elements, including color, rotation, transparency, and offset. This prop is part of Onyx UI's children-based styling system.

```lua
Gradient = {
  Color = ColorSequence.new(),
  Rotation = 90,
  Transparency = 0,
  Offset = 0,
}
```

--------------------------------

### Stroke Styling with Gradient in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/styling.md

Applies a gradient to the stroke of UI elements, allowing for more complex visual effects. This demonstrates Onyx UI's advanced children-based styling capabilities.

```lua
Stroke = {
  Color = Color3.fromRGB(255, 255, 255),
  Gradient = {
    Color = ColorSequence.new()
  }
}
```

--------------------------------

### Ensure Fusion Value with Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/utilities.md

Converts component props into Fusion `Value` objects, making it easier to work with reactive properties. This utility simplifies the process of handling dynamic component states.

```lua
return function(Scope, Props)
  local Scope = Fusion.innerScope(Scope, OnyxUI.Util)

  local MyProp = Scope:EnsureValue(Props.MyProp)
end
```

--------------------------------

### Scale Aspect Ratio Styling in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/styling.md

Configures a UI element's aspect ratio to scale with its parent's size, using a dominant axis for control. This is useful for responsive designs in Onyx UI.

```lua
Aspect = {
  Ratio = 1,
  Type = Enum.AspectType.ScaleWithParentSize,
  DominantAxis = Enum.DominantAxis.Height,
}
```

--------------------------------

### Fallback Prop Value with Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/utilities.md

Ensures that component properties fall back to a default value if not provided. This function is useful for setting default styles or configurations.

```lua
return function(Props)
  local Color = OnyxUI.Util.Fallback(Props.Color, Theme.Colors.Neutral.Main)
end
```

--------------------------------

### Vertical List Layout Styling in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/styling.md

Configures a UI element to arrange its children vertically, with options for alignment and padding. This is a core component of Onyx UI's list layout system.

```lua
List = {
  FillDirection = Enum.FillDirection.Vertical,
  HorizontalFlex = Enum.UIFlexAlignment.Fill,
  Padding = UDim.new(0, 8),
}
```

--------------------------------

### Horizontal Grid Layout Styling in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/styling.md

Configures a UI element as a grid that fills horizontally, specifying cell size and padding. This is part of Onyx UI's advanced layout options.

```lua
Grid = {
  FillDirection = Enum.FillDirection.Horizontal,
  CellSize = UDim2.fromOffset(100, 100),
  CellPadding = UDim2.fromOffset(20, 20),
}
```

--------------------------------

### Corner Radius Styling in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/styling.md

Defines corner radius for UI elements using UDim.new for precise control over the radius size. This prop is part of Onyx UI's children-based styling approach.

```lua
Corner = {
  Radius = UDim.new(0, 4)
}
```

--------------------------------

### Square Aspect Ratio Styling in Lua

Source: https://github.com/loneka/onyx-ui/blob/main/docs/styling.md

Locks the aspect ratio of a UI element to be square, ensuring width and height are always equal. This is a common requirement for maintaining visual consistency.

```lua
Aspect = {
  Ratio = 1,
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.