Vela · Docs

Vela adds className to roblox-ts React elements and compiles it away. A supported utility class becomes a Roblox property or a helper instance at build time — p-4 becomes a UIPadding child, rounded-lg becomes a UICorner, bg-slate-700 becomes BackgroundColor3. Nothing about Vela survives into the shipped Lua unless a class genuinely needs to be evaluated at runtime.

It is not Tailwind parity, and it does not try to be. Vela implements a Roblox-oriented slice of the utility vocabulary, mapped onto the instances Roblox actually gives you. On the compile-time path it reports a diagnostic for most of what it cannot lower, rather than quietly dropping it — but not for all of it. A few cases still fall through silently, such as a gradient stop set to transparent or a class the runtime host cannot resolve.

<frame className="flex flex-col gap-4 p-4 w-80 rounded-lg bg-slate-800 border border-slate-700">
  <textlabel className="text-lg font-semibold text-slate-50" Text="Party" />
  <textbutton className="h-10 rounded-md bg-blue-600 text-white" Text="Invite" />
</frame>

Compiled, not interpreted

Static classes lower to Roblox props and helper instances during the roblox-ts build. No runtime cost, no generated folder.

Roblox-shaped, not Tailwind-shaped

Utilities map onto UIPadding, UIListLayout, UICorner, UIStroke, and the rest — the instances Roblox actually gives you.

Loud about its gaps

Unsupported families and unknown theme keys emit diagnostics instead of silently doing nothing.

Guides

Learn what lowers, and what doesn't.

Theming

How the Vela theme works — three families of roblox-ts expression strings, the extend-versus-replace merge rules, and what ships by default.

Layout and sizing

How Vela's flex, padding, sizing, position, and transform utilities lower to UIListLayout, UIPadding, Size, and the other Roblox layout instances.

Colors and surfaces

Color utilities and the Roblox properties they write — fills, text, strokes, corner radius, shadows, gradients, and background transparency.

Text and fonts

Text sizing, weight, alignment, wrapping and truncation — plus the host restriction the compiler does not actually enforce.

Responsive and input variants

The eight variant prefixes, the exact breakpoints, how orientation and input mode are detected, and the compile-time cost of using a variant at all.

Dynamic class names

Computing className is allowed, but the runtime resolver supports only fifteen prefixes and silently drops everything else — here is how to stay on the static path.

Editor setup

Install the Vela VS Code extension, understand exactly what the language server provides, and wire the LSP into any other editor over stdio.

Reference

Every class, value, and code.

Utility reference

Every utility class Vela supports, the exact values each one accepts, and the Roblox property or helper instance it lowers to.

Configuration

How vela.config.ts is found and loaded, the complete theme schema, the built-in defaults, and the tsconfig plugin options.

Diagnostics

Every diagnostic code Vela can emit, how it reaches your build or editor, and the two caveats that make some of them easy to miss.

API

Everything importable from vela-rbxts, the two different createTransformer functions, the published packages, and what versions Vela is tested against.

Pre-1.0, and narrow on purpose.

Packages version in lockstep. Whole Tailwind families are not implemented, a dynamic className resolves against a much smaller utility set than a static one, and per-element restrictions are enforced by the editor rather than the compiler. Read the scope before you depend on a class.

Scope and status →