# Vela

> Tailwind-style className compilation for roblox-ts UI — React or Vide.

Source: https://docs.astra-void.xyz/vela-rbxts/

Vela adds `className` to `roblox-ts` UI elements and compiles it away. You write Tailwind-shaped
utility classes on Roblox host elements and on your own components. A TypeScript transformer rewrites
them into Roblox properties and helper instances before roblox-ts emits Luau. `p-4` becomes a
`UIPadding` child, `rounded-lg` a `UICorner`, `bg-slate-700` a `BackgroundColor3`.

Vela emits for [React](https://github.com/littensy/rbxts-react) by default, and for
[Vide](https://docs.astra-void.xyz/vela-rbxts/guides/vide.md) when your `tsconfig.json` compiles Vide JSX. Nothing survives into
the shipped game unless a class needs the player's screen or input device to resolve.

_Interactive preview: Compiled by the real Vela compiler and rendered live. The Classes tab is the source as written; the Lowered tab is what rbxtsc emits._

Every class on that card resolves at build time. **Classes** is the component as written. **Lowered**
is the output: plain Roblox properties, a few helper instances, no trace of Vela. Every preview in
these docs comes from the real compiler.

## What you get

**Static by default.** A plain string of classes lowers entirely at compile time. The `className`
attribute disappears, the element keeps its tag, and Vela's cost is paid once on your machine. Two
things opt an element into runtime work: a `className` the compiler cannot read, and
[variants](https://docs.astra-void.xyz/vela-rbxts/guides/responsive-and-input-variants.md), which depend on the player's device. A
class list that only *branches* still resolves at compile time, diagnostics intact.

**Diagnostics instead of silence.** A class Vela cannot lower is reported, not dropped.
`tracking-wide` warns that Roblox has no letter spacing. `bg-brand` says the palette needs a shade. A
typo in a theme key names the scale it searched. The
[diagnostics reference](https://docs.astra-void.xyz/vela-rbxts/reference/diagnostics.md) lists every code. A few cases still fall
through silently, and the docs flag each one where it lives.

**Editor tooling from the same compiler.** The `vela-rbxts-lsp` language server links the same Rust
crate the build uses, so completions, hover, swatches, quickfixes and squiggles agree with the
compiler by construction. See [editor setup](https://docs.astra-void.xyz/vela-rbxts/guides/editor-setup.md).

**A Roblox-shaped vocabulary.** Vela is not Tailwind parity. It implements the slice that maps onto
what Roblox gives you: colours, gradients, strokes, corners, padding, gap, sizing, position, flex
layout and typography. Everything else is rejected loudly rather than approximated. The edges are
mapped in [scope and status](https://docs.astra-void.xyz/vela-rbxts/getting-started/scope-and-status.md).

## Get started

Read these in order:

1. [Installation](https://docs.astra-void.xyz/vela-rbxts/getting-started/installation.md) — the package, the tsconfig plugin, the
   config file, and a smoke test.
2. [Your first component](https://docs.astra-void.xyz/vela-rbxts/getting-started/first-component.md) — build a panel and read what
   each class lowered to.
3. [How it works](https://docs.astra-void.xyz/vela-rbxts/getting-started/how-it-works.md) — the pipeline and the two paths a
   `className` can take.
4. [Scope and status](https://docs.astra-void.xyz/vela-rbxts/getting-started/scope-and-status.md) — what is deliberately absent,
   and the gaps that do not announce themselves.

To skip setup, the [playground](https://docs.astra-void.xyz/vela-playground/) runs the real compiler in the browser. Type class
strings and watch them lower with no project at all.

## Next

- **Building something.** [Recipes](https://docs.astra-void.xyz/vela-rbxts/guides/recipes.md) covers buttons, badges, meters, list
  rows and a dialog, each with a live preview.
- **Styling and layout.** See [theming](https://docs.astra-void.xyz/vela-rbxts/guides/theming.md),
  [layout and sizing](https://docs.astra-void.xyz/vela-rbxts/guides/layout-and-sizing.md),
  [colours and surfaces](https://docs.astra-void.xyz/vela-rbxts/guides/colors-and-surfaces.md) and
  [text and fonts](https://docs.astra-void.xyz/vela-rbxts/guides/text-and-fonts.md).
- **Writing Vide.** [Vide](https://docs.astra-void.xyz/vela-rbxts/guides/vide.md) covers the whole of the difference.
- **A class did nothing.** [Troubleshooting](https://docs.astra-void.xyz/vela-rbxts/guides/troubleshooting.md) is organised by
  symptom.
- **Looking something up.** The [utilities reference](https://docs.astra-void.xyz/vela-rbxts/reference/utilities.md) lists every
  class and the values it accepts. [Configuration](https://docs.astra-void.xyz/vela-rbxts/reference/config.md),
  [diagnostics](https://docs.astra-void.xyz/vela-rbxts/reference/diagnostics.md) and the [API](https://docs.astra-void.xyz/vela-rbxts/reference/api.md) cover
  the rest.