PeanutUI Docs

Quick Start ​

This guide gets you from an empty place to a widget on screen.

Install ​

Coming Soon...

Require the library ​

PeanutUI is a library, so where it lives depends on how you installed it:

luau
const ReplicatedStorage = game:GetService("ReplicatedStorage")
const PeanutUI = require(ReplicatedStorage.PeanutUI)  -- Or anywhere you put it

Create a Space ​

A Space is the renderer root — it is a widget that owns a Roblox LayerCollector. Space.createScreenSpace creates a ScreenGui-backed Space (a ScreenSpace), which is what puts your tree on screen:

luau
const Space = PeanutUI.Space

const space = Space.createScreenSpace("Main")

Set auto scaling (optional) ​

Auto scale will scale whole UI using reference resolution. So UI always fits on every screen. See reference here.

luau
PeanutUI.simpleScale(
    space,
    Vector2.new(844, 390),
    true
)

Define a component ​

Components are the unit of composition. PeanutUI.defineComponent wraps a function that returns a root widget, and gives you a lifecycle bucket for refs and hooks:

luau
const Hello = PeanutUI.defineComponent(function(props)
    return PeanutUI.Frame {
        size = PeanutUI.Size(200, 200),
        backgroundColor = Color3.fromRGB(30, 30, 30),
        cornerRadius = { all = PeanutUI.Unit(12) },
        padding = { all = PeanutUI.Unit(16) },
        children = {
            PeanutUI.TextLabel { text = props.text },
        },
    }
end)

Mount it ​

Create the component and parent its root widget to the Space with setParent:

luau
const root = Hello({ text = "Hello, PeanutUI!" })

root.setParent(space)

That's it — you should see a rounded dark frame with a label inside.

When to use PeanutUI ​

PeanutUI is made for big UIs. It takes a bit more to learn, and in return it stays clean and fast as your UI grows.

Use PeanutUI when:

  • Your UI is large and has lots of parts.
  • Parts come and go while the game runs.
  • You want your UI to look right on every screen.
  • Several people work on the UI together.
  • You want animations built in.

Don't use PeanutUI when:

  • Your UI is small or you're just prototyping.
  • You want the fastest way to get something on screen.
  • You're happy using plain Roblox UI on its own.

If your UI is small, a simpler library will feel nicer. PeanutUI is worth it once your UI gets big.

Next steps ​