The Standalone API

The Standalone API lets you create individual Cascade components without a full App. This gives you access to the component primitives without the overhead of an app.

Summary

Properties

Property	Type	Description
Theme	Theme?	Light or Dark mode. See Themes. Defaults to Light.
Accent	Accent?	Accent color palette. See Accents.
Parent	Instance?	Default parent for components created on this context.

Types

type ComponentProperties = {
    Theme: Theme?,
    Accent: Accent?,
    Parent: Instance?,
}

type ComponentContext = ComponentProperties & Components

Function Signature

function(properties: ComponentProperties?): ComponentContext

Examples

Creating standalone components

local ctx = cascade.Component({
    Theme = cascade.Themes.Dark,
    Accent = cascade.Accents.Blue,
})

-- Returns our wrapped object and the raw Roblox instance
local object, instance = ctx:Toggle({
    Parent = someFrame,
    Value = true,
    ValueChanged = function(self, value: boolean)
        print("Value changed:", value)
    end,
})

print(object.__instance)

Shared parent

If most of your components share the same parent, you can set Parent on the context itself:

local ctx = cascade.Component({
    Theme = cascade.Themes.Dark,
    Parent = someFrame,
})

-- Both components are automatically parented to someFrame
local toggle = ctx:Toggle({ Value = false })
local slider = ctx:Slider({ Value = 0.5, Minimum = 0, Maximum = 1 })

Note

You can still override Parent for a shared component group.

Different contexts

-- This one will use the `Light` theme with the `Red` accent.
do
    local ctx = cascade.Component({
        Theme = cascade.Themes.Light,
        Accent = cascade.Accents.Red,
    })

    local toggle = ctx:Toggle({ Value = false })
end

-- This one will use the `Dark` theme with the `Blue` accent.
do
    local ctx = cascade.Component({
        Theme = cascade.Themes.Dark,
        Accent = cascade.Accents.Blue,
    })

    local toggle = ctx:Toggle({ Value = true })
end