Info

Why "Nebula"

Performance in NebulaKit is not an optimization layer - it is a property of the architecture.

Performance in NebulaKit is not achieved through micro-optimizations or complex CSS tricks. It is a direct result of how the system is structured. Styling is resolved explicitly and early, then applied directly to the DOM as state. CSS does not compute state - it only renders it.

Styling is resolved once, not inferred repeatedly.

  • React determines styling state (theme, brand, color, variant, intent)

  • that state is written to the DOM as data attributes

  • CSS reads that state and renders the final output

This removes the need for deep selector matching, cascading overrides and runtime guessing.

Why it's fast

1. No cascade-driven logic

NebulaKit does not rely on CSS inheritance or selector chains to determine styling. There are no deep nested selectors, context-dependent overrides or implicit styling resolution. Each component resolves its state independently and explicitly.

2. CSS is a pure rendering layer

CSS variables are not used to compute logic across layers. Tokens are already resolved, variables are direct and rendering is predictable. This keeps the browser's work minimal and consistent.

3. Stable and localized updates

When a prop changes - only the affected component updates its dataset. CSS reacts locally with no global recalculation or cascade re-evaluation. This makes updates fast even in large trees.

4. No variable chains or indirection

NebulaKit avoids long chains of CSS variables referencing each other. Instead of values being resolved through multiple layers of indirection, it uses directly resolved tokens. This reduces computation and improves clarity.

5. Predictable performance at scale

Because styling does not depend on DOM depth or selector complexity, deeply nested trees remain stable, multiple styling islands do not degrade performance and adding new components does not increase rendering cost unpredictably.

In practice, this results in:

  • faster initial render

  • smoother interaction states (hover, active, selected)

  • faster theme and brand switching

  • stable performance in complex layouts

NebulaKit intentionally moves complexity out of CSS and into explicit state resolution. This means:

  • slightly more work during render (React)

  • significantly less work during styling (browser)

The result is a system that is easier to reason about, debug and scale reliably.