Skip to main content

About

This is a collection of React components for building Roblox Studio plugins. These include common user interface components found in Studio and are made to closely match the look and functionality of their built-in counterparts, including synchronizing with the user's selected theme.

These components are built for react-lua, Roblox's translation of ReactJS v17 into Luau. A prior version of this project (before v1.0.0) used Roact and had multiple API differences. For more information, see the Changelog.

note

These components are only suitable for use in plugins. This is because they rely on plugin- or Studio-only APIs.

Why recreate the Studio interface?​

Closely replicating the built-in user interface has two main advantages:

  1. Roblox Studio users recognise these components and know how to use them.
  2. Less adjustment required when switching between third-party and built-in interfaces.

The design of some built-in user interface components has changed in the lifetime of this project. In some cases, these changes had negative implications for accessiblity or consistency so their previous versions are used here instead.

Plugins created with StudioComponents​

With wider adoption, using these components to build a plugin will also align it with other third-party plugins in appearance, familiarity, and usability.

Some plugins created with StudioComponents include:

  • Archimedes 3, a popular building plugin used to create smooth arcs
  • Collision Groups Editor, an alternative to the built-in editor for Collision Groups
  • Layers, a tool for working with logical sections of 3D models
  • Benchmarker, a performance benchmarking tool for Luau code
  • LampLight, a tool for baking Global Illumination bounce lighting into scenes
  • MeshVox, a smooth terrain importing and stamping tool
info

Some of these plugins were built with the earlier Roact version (version 0.x, before react-lua was adopted) or the Fusion port of it.

Migrating from Roact StudioComponents​

Existing users of the Roact version looking to migrate their project to React and the current version of StudioComponents should:

  1. Follow the react-lua guide for migrating from Roact
  2. Follow this project's installation guide
  3. Address any API differences between legacy StudioComponents and this version