Styling

Every visual aspect of a RetUI application—colors, text attributes, and borders—is controlled through the retui.Style type.

Once you understand Style, you can control the appearance of every component in your application.

---

Creating a Style

Every style begins with retui.NewStyle() and then chains styling methods.

retui.NewStyle().
    Foreground(retui.Cyan).
    Background(retui.Black).
    Bold(true)

Each method returns a new Style, allowing you to chain multiple options together.

A style is typically passed to components like Text and Box.

retui.Text(
    "Hello!",
    retui.NewStyle().
        Foreground(retui.Green).
        Bold(true),
)

---

Text Attributes

RetUI supports several text attributes.

Method	Description
Bold(true)	Displays bold text
Italic(true)	Displays italic text
Underline(true)	Underlines the text

Example:

retui.Text(
    "Warning",
    retui.NewStyle().
        Bold(true).
        Underline(true),
)

---

Colors

Both foreground and background colors use the same API.

retui.NewStyle().
    Foreground(retui.Red).
    Background(retui.Black)

RetUI supports three ways to specify colors.

---

Named Colors

The simplest option is to use one of the built-in terminal colors.

retui.Black
retui.Red
retui.Green
retui.Yellow
retui.Blue
retui.Magenta
retui.Cyan
retui.White

retui.BrightBlack
retui.BrightRed
retui.BrightGreen
retui.BrightYellow
retui.BrightBlue
retui.BrightMagenta
retui.BrightCyan
retui.BrightWhite

Example:

retui.NewStyle().
    Foreground(retui.BrightCyan)

---

Hex Colors

For precise RGB colors, use hexadecimal values.

retui.NewStyle().
    Foreground(
        retui.Hex("#c7c7c7"),
    )

Hex colors are useful for matching a design system or brand colors.

---

ANSI 256 Colors

RetUI also supports the extended ANSI 256-color palette.

retui.NewStyle().
    Foreground(
        retui.ANSI256(208),
    )

Use ANSI colors when targeting terminals that support the full 256-color palette.

---

Borders

Borders are configured using the retui.Border structure.

retui.NewStyle().
    Border(
        retui.Border{
            Top:    true,
            Right:  true,
            Bottom: true,
            Left:   true,
        },
    )

You can enable any combination of sides.

Example:

retui.NewStyle().
    Border(
        retui.Border{
            Bottom: true,
        },
    )

This creates only a bottom border, which is useful for separators.

---

Border Styles

RetUI provides four built-in border character sets.

Border Style	Appearance
BorderSharp	Standard ASCII-style box
BorderRounded	Rounded corners
BorderDouble	Double-line border
BorderThick	Thick border

Example:

retui.NewStyle().
    Border(
        retui.Border{
            Top:    true,
            Right:  true,
            Bottom: true,
            Left:   true,
            Chars:  retui.BorderRounded,
        },
    )

---

Border Color and Title

Borders have their own color and optional title.

retui.NewStyle().
    Border(
        retui.Border{
            Top:    true,
            Right:  true,
            Bottom: true,
            Left:   true,

            Chars: retui.BorderRounded,
            Color: retui.Blue,
            Title: "Navigation",
        },
    )

The border color is independent of the text color.

Titles are displayed inside the top border.

---

Style Inheritance

Styles automatically flow from parent containers to their children.

If a child does not specify its own foreground or background color, it inherits the parent's style.

retui.Box(
    retui.Props{
        Direction: retui.Column,
    },

    retui.NewStyle().
        Foreground(retui.Cyan),

    retui.Text(
        "Line One",
        retui.NewStyle(),
    ),

    retui.Text(
        "Line Two",
        retui.NewStyle(),
    ),

    retui.Text(
        "Line Three",
        retui.NewStyle().
            Foreground(retui.Red),
    ),
)

In this example:

• Line One is cyan.
• Line Two is cyan.
• Line Three overrides the parent and becomes red.

The same inheritance applies to attributes like Bold.

---

Complete Example

The following component combines colors, borders, and text styling.

func AlertCard(message string) retui.Element {
    return retui.Box(
        retui.Props{
            Direction: retui.Column,
            Padding: [4]int{1, 2, 1, 2},
        },

        retui.NewStyle().
            Foreground(retui.White).
            Background(retui.Red).
            Border(
                retui.Border{
                    Top:    true,
                    Right:  true,
                    Bottom: true,
                    Left:   true,

                    Chars: retui.BorderThick,
                    Title: "Alert",
                },
            ),

        retui.Text(
            message,
            retui.NewStyle().
                Bold(true),
        ),
    )
}

This creates a bordered alert card with:

• White text
• Red background
• Thick border
• Border title
• Bold message

---

Style Summary

Feature	Method
Foreground Color	Foreground(color)
Background Color	Background(color)
Bold Text	Bold(true)
Italic Text	Italic(true)
Underlined Text	Underline(true)
Hex Color	retui.Hex("#RRGGBB")
ANSI Color	retui.ANSI256(n)
Border	Border(retui.Border{})
Border Title	Title
Border Color	Color
Border Style	BorderSharp, BorderRounded, BorderDouble, BorderThick

---

Best Practices

• Apply styles to parent containers whenever possible.
• Override styles only when a child needs a different appearance.
• Use named colors for simple applications.
• Use hex colors for custom themes.
• Reserve ANSI 256 colors for terminal-specific color palettes.

---

What's Next?

Now that you know how styling works, continue with:

1. Layout System
2. Components
3. Keyboard Events
4. Focus Management
5. State Management

Together, layout and styling give you everything needed to build attractive terminal user interfaces with RetUI.