menu_bookDocumentation

Styling Panels - s&box UI Documentation

calendar_today May 5, 2026 schedule ~1 min read person patrickjr verified 50

Styling Panels

Style your UI panels using SCSS-like stylesheets or direct code styling.

Using Stylesheets

Create .scss files alongside your .razor files:

CODE

Health.razor
Health.razor.scss  // Automatically included

Or specify a different location:

CSHARP

[StyleSheet("main.scss")]
public class MyPanel : Panel { }

Import from other stylesheets:

SCSS

@import "buttons.scss";

Styling Directly

Styling the Element

CSHARP

myPanel.Style.Width = Length.Pixels( 100 );
myPanel.Style.Height = Length.Percent( 50 );
myPanel.Style.BackgroundColor = Color.Red;

Style Block

CSHARP

myPanel.Style.Set( "border-radius", "10px" );
myPanel.Style.Set( "padding", "20px" );

Styling in Code

Modify styles dynamically:

CSHARP

public override void Tick()
{
    // Animate width based on progress
    myPanel.Style.Width = Length.Percent( Progress * 100f );
}

Common Properties

Width/Height — Pixels, percent, or viewport units
BackgroundColor — Solid colors or gradients
BorderRadius — Rounded corners
Padding/Margin — Spacing
FontSize — Text size
Opacity — Transparency

Responsive Design

Use relative units:

SCSS

.panel {
    width: 50%;          // Half parent width
    height: 100vh;       // Full viewport height
    font-size: 2vw;      // Scale with viewport
}

link

Source

https://sbox.game/dev/doc/ui/styling-panels.md open_in_new

Styling Panels - s&box UI Documentation

Styling Panels

Using Stylesheets

Styling Directly

Styling the Element

Style Block

Styling in Code

Common Properties

Responsive Design

auto_awesome More in Documentation

Building a Networked Radio System with 3D Audio and Sync

Input System Overview: Button Queries, Analog Input, and Escape Override

Component Interfaces: ExecuteInEditor, ICollisionListener, IDamageable in s&box