Component Reference

Preview

 Normal text
 Bold text
 Italic text
 Underline text
 Strikethrough

Usage

<Text Content="Hello World!" Fg="#ffffff" Bg="#000000" />
<Text Content="Bold text" Fg="#ffff64" Attributes=@(TextAttributes.Bold) />
<Text Content="Wrapped text content" Fg="#aabbcc" Wrap="true" TextAlign="center" />

Demo Source (TextDemo.razor)

<Text Content="Normal text" Fg="#ffffff" Width="40" Height="1" />
<Text Content="Bold text" Fg="#ffff64" Attributes="@(TextAttributes.Bold)" Width="40" Height="1" />
<Text Content="Italic text" Fg="#64ff64" Attributes="@(TextAttributes.Italic)" Width="40" Height="1" />
<Text Content="Underline text" Fg="#ff6464" Attributes="@(TextAttributes.Underline)" Width="40" Height="1" />
<Text Content="Strikethrough" Fg="#c8c8c8" Attributes="@(TextAttributes.Strikethrough)" Width="40" Height="1" />

Parameters

Preview

 BUILD TermBlade.Core passed  502 tests
 WARN  preview height increased
 PATH  docs/components.html
 ERROR none

Usage

<SegmentedText Width="64" Height="5" BackgroundColor="#111827" Segments="@Segments" />

@code {
    private static readonly IReadOnlyList<SegmentedTextSegment> Segments = [...];
}

Demo Source (SegmentedTextDemo.razor)

<SegmentedText Width="64" Height="5" BackgroundColor="#111827" Segments="@Segments" />

@code {
    private static readonly IReadOnlyList<SegmentedTextSegment> Segments =
    [
        new("BUILD ", "#111827", "#a6e3a1", TextAttributes.Bold),
        new("TermBlade.Core ", "#cdd6f4"),
        new("passed", "#a6e3a1", Attributes: TextAttributes.Bold),
        new("  "),
        new("502 tests", "#89b4fa"),
        new("\n"),
        new("WARN ", "#111827", "#f9e2af", TextAttributes.Bold),
        new("preview height increased", "#f9e2af"),
        new("\n"),
        new("PATH ", "#111827", "#89b4fa", TextAttributes.Bold),
        new("docs/components.html", "#cdd6f4", Attributes: TextAttributes.Underline),
        new("\n"),
        new("ERROR ", "#111827", "#f38ba8", TextAttributes.Bold),
        new("none", "#a6e3a1", Attributes: TextAttributes.Bold)
    ];
}

Parameters

Preview

  1 │ var host = Host.CreateDefaultBuilder(args)
  2 │     .UseTermBladeRazor<MyApp>()
  3 │     .Build();
  4 │
  5 │ await host.RunAsync();

Usage

<Code Width="100%" Height="18"
      Language="csharp"
      ShowLineNumbers="true"
      Content="@sourceCode" />

Demo Source (CodeDemo.razor)

<Code Width="100%" Height="100%" Language="csharp"
      ShowLineNumbers="true" Content="@CodeContent" />

@code {
    private const string CodeContent = @"var host = Host.CreateDefaultBuilder(args)
    .UseTermBladeRazor<MyApp>()
    .Build();

await host.RunAsync();";
}

Parameters

Preview

 # Markdown Demo

 • Bold, italic, inline code
 • Unicode: ✅ 🚀 ✨

 │ A blockquote example

   Console.WriteLine("Hello");

Usage

<Markdown Width="100%" FlexGrow="1"
          Content="@markdownText" />

Demo Source (MarkdownDemo.razor)

<Markdown Width="100%" Height="100%" Content="@MarkdownContent" />

@code {
    private const string MarkdownContent = @"# Markdown Demo

- **Bold**, *italic*, \`inline code\`
- Unicode: ✅ 🚀 ✨

> A blockquote example

\`\`\`csharp
Console.WriteLine(""Hello"");
\`\`\`";
}

Parameters

Preview

  1 │   public string Greet(string name)
  2 │   {
  3 │ -     return $"Hello {name}";
  4 │ +     var message = $"Hello {name}!";
  5 │ +     return message;
  6 │   }

Usage

<Diff Width="100%" Height="18"
      OldText="@originalCode"
      NewText="@modifiedCode"
      ShowLineNumbers="true" />

Demo Source (DiffDemo.razor)

<Diff Width="100%" Height="100%"
      OldText="@OldText" NewText="@NewText"
      ShowLineNumbers="true" />

@code {
    private const string OldText = @"public string Greet(string name)
{
    return $""Hello {name}"";
}";
    private const string NewText = @"public string Greet(string name)
{
    var message = $""Hello {name}!"";
    return message;
}";
}

Parameters

Preview

 ████████╗██████╗ 
 ╚══██╔══╝██╔══██╗
    ██║   ██████╔╝
    ██║   ██╔══██╗
    ██║   ██████╔╝
    ╚═╝   ╚═════╝ 

Usage

<AsciiFont Width="42" Height="4"
           Text="NOVA"
           Font="block"
           Color="#c56aff"
           BackgroundColor="#1a1b26" />

Demo Source (AsciiFontDemo.razor)

<AsciiFont Width="60" Height="4"
           Text="Gallery"
           Font="block"
           Color="#c56aff" />

Parameters

Preview

  1 │
  2 │
  3 │
  4 │
  5 │

Usage

<LineNumbers Width="6" Height="16"
             LineCount="@lineCount"
             StartLine="1"
             Bg="#111827" />

Demo Source (LineNumbersDemo.razor)

<LineNumbers Width="6" Height="10"
             LineCount="10"
             StartLine="42"
             Fg="#8b949e"
             Bg="#161b22" />

Parameters

Preview

┌────────────────────────┐
│ ██  ▄▄  ░░  ▒▒  ▓▓   │
│ Custom pixel drawing   │
│ with direct buffer     │
│ access                 │
└────────────────────────┘

Usage

<FrameBuffer @ref="_frameBuffer"
             Width="100%" Height="100%"
             PixelWidth="120"
             PixelHeight="40" />

Demo Source (FrameBufferDemo.razor)

@using TermBlade.Core.Ansi
@using TermBlade.Core.Renderables

<FrameBuffer Width="100%" Height="100%"
             PixelWidth="120"
             PixelHeight="48"
             Draw="@DrawPreview" />

Parameters

Preview

╭ Release Matrix ─────────────────────╮
│ Package        │ Status  │ Coverage │
│────────────────┼─────────┼──────────│
│ TermBlade.Core │ Stable  │ 94%      │
│ Razor          │ Preview │ 88%      │
╰──────────── arrows scroll rows/cols ╯

Usage

<Table Headers="@Headers"
       Rows="@Rows"
       VisibleRowCount="10"
       MaxColumnWidth="24"
       Title=" Release Matrix " />

Demo Source (TableDemo.razor)

<Table Width="100%" Height="100%"
       Headers="@Headers"
       Rows="@Rows"
       VisibleRowCount="6"
       ShowRowSeparators="true" />

Parameters

Preview

      June 2007
 Su Mo Tu We Th Fr Sa
                 1  2
  3  4  5  6  7  8  9
 10 11 12 13 14 15 16
 17 18 19 20 21 22 23
 24 25 26 27 28 29 30

Usage

<Calendar DisplayMonth="@new DateOnly(2025, 9, 1)"
          HighlightedDate="@DateOnly.FromDateTime(DateTime.Today)"
          DayNameColor="#00c000"
          HighlightColor="#cc0000"
          ShowOtherMonthDays="false"
          Width="20" Height="8" />

Demo Source (CalendarDemo.razor)

<Calendar Width="24" Height="10"
          DisplayMonth="@new DateOnly(2026, 6, 1)"
          HighlightedDate="@new DateOnly(2026, 6, 10)"
          HighlightColor="#1f6feb"
          DayNameColor="#58a6ff" />

Parameters

Preview

 Type something here...█

Usage

<Input Value="@Name"
       ValueChanged="@(v => Name = v)"
       Placeholder="Enter your name..."
       PlaceholderColor="#666666"
       CursorColor="#ffff00"
       Fg="#ffffff" Bg="#001122"
       Width="40" Height="1"
       MaxLength="50"
       OnEnter="@(_ => Submit())" />

Demo Source (InputDemo.razor)

<Input Value=""
       Placeholder="Type something here..."
       PlaceholderColor="#666666"
       CursorColor="#ffff00"
       Fg="#ffffff" Bg="#111827"
       Width="40" Height="1" />

Parameters

Preview

┌────────────────────────────────┐
│ Line one of text               │
│ Line two continues here        │
│ Third line with more content   │
│█                               │
└────────────────────────────────┘

Usage

<Textarea Value="@content"
          ValueChanged="@OnChanged"
          WrapMode="word"
          Placeholder="Write something..."
          Fg="#e5e7eb" Bg="#111827"
          CursorColor="#f59e0b"
          Width="100%" Height="16"
          AutoFocus="true" />

Demo Source (TextareaDemo.razor)

<Textarea Value="Hello, TermBlade!"
          Placeholder="Type here..."
          Fg="#e5e7eb" Bg="#111827"
          CursorColor="#f59e0b"
          Width="40" Height="5" />

Parameters

Preview

 ────────────────────●──────────────────── 50%

Usage

<Slider Width="40" Height="1"
        Value="@volume"
        ValueChanged="@OnVolumeChanged"
        Min="0" Max="100" Step="5"
        ThumbColor="#facc15"
        AutoFocus="true" />

Demo Source (SliderDemo.razor)

<Slider Width="40" Height="1"
        Value="50"
        ThumbColor="#facc15" />

Parameters

Preview

 ▸ Option A   First option    ✓
   Option B   Second option
   Option C   Third option

Usage

<Select Width="40" Height="8"
        Options="@options"
        SelectedIndex="@selected"
        SelectedIndexChanged="@OnChanged"
        OnItemSelected="@OnPicked"
        AutoFocus="true" />

Demo Source (SelectDemo.razor)

@using TermBlade.Core.Renderables

<Select Width="40" Height="6"
        Options="@Options"
        SelectedIndex="@SelectedIndex"
        SelectedIndexChanged="@OnChanged"
        AutoFocus="false" />

@code {
    private List<SelectOption> Options { get; } =
    [
        new() { Name = "Option A", Description = "First option", Value = "a" },
        new() { Name = "Option B", Description = "Second option", Value = "b" },
        new() { Name = "Option C", Description = "Third option", Value = "c" },
    ];

    private int SelectedIndex { get; set; }

    private Task OnChanged(int index)
    {
        SelectedIndex = index;
        return Task.CompletedTask;
    }
}

Parameters

Preview

 BarChart
  █  █  █
  █  █  █  █
  █  █  █  █  █

Usage

<BarChart Width="100%" Height="8"
          Data="@Values"
          Labels="@Labels"
          BarColor="#58a6ff" />

Demo Source (BarChartDemo.razor)

<BarChart Width="100%" Height="8"
          Data="@SparkData"
          Sparkline="true"
          BarColor="#58a6ff" />

Parameters

Preview

 LineChart
  ▁▂▄▃▅▇▆█

Usage

<LineChart Width="100%" Height="12"
           Data="@ChartData"
           Title="Basic Line Chart"
           LineColor="#58a6ff" />

Demo Source (LineChartDemo.razor)

<LineChart Width="100%" Height="100%"
           Data="@ChartData"
           Title="Basic Line Chart"
           FillColor="#1f6feb" />

Parameters

Preview

 TimeSeriesLineChart
  09:00     11:00     13:00

Usage

<TimeSeriesLineChart Width="100%" Height="12"
                     Data="@TimeData"
                     TimeFormat="HH:mm" />

Demo Source (TimeSeriesLineChartDemo.razor)

<TimeSeriesLineChart Width="100%" Height="100%"
                     Data="@TimeData"
                     Title="Server Response Time"
                     TimeFormat="HH:mm" />

Parameters

Preview

 HeatMap
  Mon 02 01 05 08 07 03

Usage

<HeatMap Width="100%" Height="12"
         Data="@HeatData"
         RowLabels="@Rows"
         ColumnLabels="@Cols"
         ShowValues="true" />

Demo Source (HeatMapDemo.razor)

<HeatMap Width="100%" Height="100%"
         Data="@HeatData"
         LowColor="#0d1117"
         MidColor="#1f6feb"
         HighColor="#f0883e" />

Parameters

Preview

 CandlestickChart
  │ █ │ █ │ █ │ █

Usage

<CandlestickChart Width="100%" Height="12"
                  Data="@CandleData"
                  BullColor="#3fb950"
                  BearColor="#f85149" />

Demo Source (CandlestickChartDemo.razor)

<CandlestickChart Width="100%" Height="100%"
                  Data="@CandleData"
                  CandleWidth="3"
                  CandleGap="1" />

Parameters

Preview

 PieChart
  C# 35%  TS 25%  Python 20%

Usage

<PieChart Width="50%" Height="12"
          Data="@PieData"
          AnimationDuration="1.5" />

Demo Source (PieChartDemo.razor)

<PieChart Width="50%" Height="100%"
          Data="@PieData"
          AnimationDuration="1.5" />

Parameters

Preview

 DoughnutChart
  center label: Tasks

Usage

<DoughnutChart Width="50%" Height="12"
               Data="@DonutData"
               CenterLabel="100%"
               InnerRadius="0.5" />

Demo Source (DoughnutChartDemo.razor)

<DoughnutChart Width="50%" Height="100%"
               Data="@DonutData"
               CenterLabel="100%"
               InnerRadius="0.5" />

Parameters

Preview

├─▼ [x] src
│  ├─  [x] TermBlade.Core
│  └─  [ ] TermBlade.Razor
└─▶ [ ] samples

Usage

<TreeView Width="52" Height="12"
          Nodes="@nodes"
          CheckboxMode="true"
          Filter="@searchText"
          OnSelectionChanged="@OnSelected"
          OnNodeToggled="@OnToggled"
          OnNodeChecked="@OnChecked"
          OnNodeActivated="@OnActivated" />

Demo Source (TreeViewDemo.razor)

@using TermBlade.Core.Renderables

<TreeView Width="100%" Height="100%"
          Nodes="@Nodes"
          CheckboxMode="true"
          AutoFocus="false" />

Parameters

Preview

 ┌──────────┐┌──────────┐┌──────────┐
 │ Overview ││ Details  ││   Help   │
 └──────────┘└──────────┘└──────────┘

Usage

<TabSelect Width="50"
           Tabs="@tabNames"
           SelectedIndex="@activeTab"
           SelectedIndexChanged="@OnTabChanged"
           AutoFocus="true" />

Demo Source (TabSelectDemo.razor)

<TabSelect Width="50"
           Tabs="@Tabs"
           SelectedIndex="@SelectedIndex"
           SelectedIndexChanged="@OnTabChanged" />

@code {
    private List<string> Tabs { get; } = ["Overview", "Details", "Help"];
    private int SelectedIndex { get; set; }

    private Task OnTabChanged(int index)
    {
        SelectedIndex = index;
        return Task.CompletedTask;
    }
}

Parameters

Preview

 ┌──────────────────────────────────────────────────────────┐
 │ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐│
 │ │ Top / Left     │ │                │ │                ││
 │ │                │ │ Center         │ │                ││
 │ │                │ │                │ │ Bottom / Right ││
 │ └────────────────┘ └────────────────┘ └────────────────┘│
 └──────────────────────────────────────────────────────────┘

Usage

<Box Width="100%" Height="100%"
     BackgroundColor="#000000"
     Border="true"
     BorderStyle="rounded"
     BorderColor="#ffc800"
     Title="My Panel"
     PaddingTop="1" PaddingLeft="2">
    <Text Content="Content goes here" Fg="#ffffff" />
</Box>

Demo Source (BoxDemo.razor)

<Box Width="100%" Height="100%" Border="true"
     BorderStyle="single" BorderColor="#444444">
    <Box Width="18" Height="5" Border="true"
         BorderColor="#58a6ff">
        <Text Content="Top / Left" Fg="#ffffff"
              LayoutPosition="absolute" Left="1" Top="1"
              Width="14" Height="1" />
    </Box>
    <Box Width="18" Height="5" Border="true"
         BorderColor="#58a6ff"
         LayoutPosition="absolute" Left="22" Top="0">
        <Text Content="Center" Fg="#ffffff"
              LayoutPosition="absolute" Left="1" Top="2"
              Width="14" Height="1" />
    </Box>
    <Box Width="18" Height="5" Border="true"
         BorderColor="#58a6ff"
         LayoutPosition="absolute" Left="44" Top="0">
        <Text Content="Bottom / Right" Fg="#ffffff"
              LayoutPosition="absolute" Left="1" Top="3"
              Width="14" Height="1" />
    </Box>
</Box>

Parameters

Preview

 ┌────────────────────────▲│
 │  Scrollable content    ██
 │  that extends beyond   ██
 │  the visible area      ░░
 │  ...                   ░░
 └────────────────────────▼│

Usage

<ScrollBox Width="100%" FlexGrow="1"
           BackgroundColor="#16161e"
           Border="true"
           BorderColor="#7aa2f7"
           ContentWidth="180"
           ContentHeight="@totalHeight"
           ShowVerticalScrollbar="true"
           AutoFocus="true">
    @foreach (var item in items) {
        <Text Content="@item" Fg="#ffffff" />
    }
</ScrollBox>

Demo Source (ScrollBoxDemo.razor)

<ScrollBox Width="100%" Height="100%"
           ContentHeight="30"
           ShowVerticalScrollbar="true"
           Border="true"
           BorderColor="#7aa2f7"
           BackgroundColor="#16161e"
           TrackColor="#414868"
           ThumbColor="#7aa2f7"
           AutoFocus="false">
    <Text Width="60" Height="1" Content="Scrollable line 1" Fg="#7aa2f7" />
    <Text Width="60" Height="1" Content="Scrollable line 2" Fg="#9ece6a" />
    <Text Width="60" Height="1" Content="Scrollable line 3" Fg="#7aa2f7" />
    <!-- ... lines 4–20 ... -->
</ScrollBox>

Parameters

Preview

 ▲
 █
 █
 ░
 ░
 ░
 ▼

Usage

<ScrollBar Orientation="vertical"
           ScrollPosition="@pos"
          ScrollSize="100"
          ViewportSize="10"
          TrackColor="#333333"
          ThumbColor="#888888" />

Demo Source (ScrollBarDemo.razor)

<ScrollBar Width="1" Height="12"
           Orientation="vertical"
           ScrollPosition="35"
           ScrollSize="100"
           ViewportSize="20"
           ThumbColor="#58a6ff" />

Parameters

Preview

 ┌─ Console ──────────────┐
 │ [INFO] App started     │
 │ [WARN] Low memory      │
 │ [ERR]  Timeout at 3s   │
 └────────────────────────┘

Usage

<ConsoleOverlay @ref="_overlay"
                Position="OverlayPosition.BottomRight"
                MaxLines="10"
                MaxWidth="60" />

@code {
    _overlay.Renderable.Log("App started");
    _overlay.Renderable.Warn("Low memory");
    _overlay.Renderable.Error("Connection timeout");
    _overlay.Renderable.Clear();
}

Demo Source (ConsoleOverlayDemo.razor)

@using TermBlade.Core.Console

<ConsoleOverlay Position="OverlayPosition.TopRight"
                MaxLines="4"
                MaxWidth="38"
                Lines="@Lines" />

Parameters

Preview

 Do you want to continue?
  Yes   No 

Usage

<Confirm Message="Do you want to continue?"
         Value="@confirmed"
         ValueChanged="@OnChanged"
         OnConfirmed="@OnConfirmed"
         Width="40" Height="2"
         AutoFocus="true" />

Demo Source (ConfirmDemo.razor)

<Confirm Message="Do you want to continue?"
         Value="true"
         Width="40" Height="2"
         AutoFocus="false" />

Parameters

Preview

 ⠹ Loading data...

Usage

<Spinner Title="Loading data..."
         SpinnerColor="#58a6ff"
         Fg="#c9d1d9"
         IsSpinning="true"
         Width="40" Height="1" />

Demo Source (SpinnerDemo.razor)

<Spinner Title="Loading data..."
         SpinnerColor="#58a6ff"
         Fg="#c9d1d9"
         Width="40" Height="1" />

Parameters

Preview

 [x] Option A
 [ ] Option B
 [x] Option C
 [ ] Option D

Usage

@using TermBlade.Core.Renderables

<MultiSelect Width="40" Height="6"
             Options="@Options"
             OnSelectionChanged="@OnChanged"
             AutoFocus="true" />

Demo Source (MultiSelectDemo.razor)

@using TermBlade.Core.Renderables

<MultiSelect Width="40" Height="6"
             Options="@Options"
             AutoFocus="false" />

@code {
    private List<SelectOption> Options { get; } =
    [
        new() { Name = "Option A", Description = "First option", Value = "a" },
        new() { Name = "Option B", Description = "Second option", Value = "b" },
        new() { Name = "Option C", Description = "Third option", Value = "c" },
        new() { Name = "Option D", Description = "Fourth option", Value = "d" },
    ];
}

Parameters

Preview

 Markup
 Renders Spectre-style markup content.
 Razor demo: MarkupDemo.razor

Usage

<Markup Width="40" Height="8" />

Demo Source (MarkupDemo.razor)

@using TermBlade.Core.Renderables

<Markup Content="[green]Status[/]: all systems online" Width="48" Height="3" />

API Documentation

Razor component: TermBlade.Razor.Components.Markup. Core renderable: TermBlade.Core.Renderables.MarkupRenderable.

Preview

 Panel
 Renders a bordered panel container.
 Razor demo: PanelDemo.razor

Usage

<Panel Width="40" Height="8" />

Demo Source (PanelDemo.razor)

@using TermBlade.Core.Renderables

<Panel Title="Panel" Width="42" Height="6" BorderColor="#7dcfff"><Text Content="Panel content" Width="30" Height="1" /></Panel>

API Documentation

Razor component: TermBlade.Razor.Components.Panel. Core renderable: TermBlade.Core.Renderables.PanelRenderable.

Preview

 TextPath
 Renders a filesystem or URI path.
 Razor demo: TextPathDemo.razor

Usage

<TextPath Width="40" Height="8" />

Demo Source (TextPathDemo.razor)

@using TermBlade.Core.Renderables

<TextPath Path="src/TermBlade.Core/Renderables" Width="52" Height="1" Fg="#a6e3a1" />

API Documentation

Razor component: TermBlade.Razor.Components.TextPath. Core renderable: TermBlade.Core.Renderables.TextPathRenderable.

Preview

 Tree
 Renders a tree using the TermBlade tree view implementation.
 Razor demo: TreeDemo.razor

Usage

<Tree Width="40" Height="8" />

Demo Source (TreeDemo.razor)

@using TermBlade.Core.Renderables

<Tree Root="@Root" Width="36" Height="6" />

@code {
    private static readonly TreeNode Root = new()
    {
        Label = "workspace",
        Children =
        [
            new() { Label = "src" },
            new() { Label = "tests" },
        ],
    };
}

API Documentation

Razor component: TermBlade.Razor.Components.Tree. Core renderable: TermBlade.Core.Renderables.TreeRenderable.

Preview

 Columns
 Arranges children horizontally in columns.
 Razor demo: ColumnsDemo.razor

Usage

<Columns Width="40" Height="8" />

Demo Source (ColumnsDemo.razor)

@using TermBlade.Core.Renderables

<Columns Width="48" Height="3"><Text Content="Left" Width="16" Height="1" /><Text Content="Center" Width="16" Height="1" /><Text Content="Right" Width="16" Height="1" /></Columns>

API Documentation

Razor component: TermBlade.Razor.Components.Columns. Core renderable: TermBlade.Core.Renderables.ColumnsRenderable.

Preview

 Rule
 Renders a horizontal rule.
 Razor demo: RuleDemo.razor

Usage

<Rule Width="40" Height="8" />

Demo Source (RuleDemo.razor)

@using TermBlade.Core.Renderables

<Rule Content="Section" Width="48" Height="1" RuleCharacter="-" />

API Documentation

Razor component: TermBlade.Razor.Components.Rule. Core renderable: TermBlade.Core.Renderables.RuleRenderable.

Preview

 Grid
 Arranges child content in a grid-like container.
 Razor demo: GridDemo.razor

Usage

<Grid Width="40" Height="8" />

Demo Source (GridDemo.razor)

@using TermBlade.Core.Renderables

<Grid Width="48" Height="4"><Text Content="A1" Width="12" Height="1" /><Text Content="A2" Width="12" Height="1" /><Text Content="A3" Width="12" Height="1" /></Grid>

API Documentation

Razor component: TermBlade.Razor.Components.Grid. Core renderable: TermBlade.Core.Renderables.GridRenderable.

Preview

 Rows
 Arranges children vertically in rows.
 Razor demo: RowsDemo.razor

Usage

<Rows Width="40" Height="8" />

Demo Source (RowsDemo.razor)

@using TermBlade.Core.Renderables

<Rows Width="36" Height="4"><Text Content="Row one" Width="30" Height="1" /><Text Content="Row two" Width="30" Height="1" /></Rows>

API Documentation

Razor component: TermBlade.Razor.Components.Rows. Core renderable: TermBlade.Core.Renderables.RowsRenderable.

Preview

 Layout
 Provides a layout region container.
 Razor demo: LayoutDemo.razor

Usage

<Layout Width="40" Height="8" />

Demo Source (LayoutDemo.razor)

@using TermBlade.Core.Renderables

<Layout Width="48" Height="5"><Text Content="Main layout region" Width="34" Height="1" /></Layout>

API Documentation

Razor component: TermBlade.Razor.Components.Layout. Core renderable: TermBlade.Core.Renderables.LayoutRenderable.

Preview

 Padder
 Adds padding around child content.
 Razor demo: PadderDemo.razor

Usage

<Padder Width="40" Height="8" />

Demo Source (PadderDemo.razor)

@using TermBlade.Core.Renderables

<Padder Width="40" Height="5"><Text Content="Padded content" Width="24" Height="1" /></Padder>

API Documentation

Razor component: TermBlade.Razor.Components.Padder. Core renderable: TermBlade.Core.Renderables.PadderRenderable.

Preview

 Align
 Aligns child content inside its bounds.
 Razor demo: AlignDemo.razor

Usage

<Align Width="40" Height="8" />

Demo Source (AlignDemo.razor)

@using TermBlade.Core.Renderables

<Align Width="40" Height="5"><Text Content="Centered" Width="16" Height="1" /></Align>

API Documentation

Razor component: TermBlade.Razor.Components.Align. Core renderable: TermBlade.Core.Renderables.AlignRenderable.

Preview

 FigletText
 Renders figlet-style text.
 Razor demo: FigletTextDemo.razor

Usage

<FigletText Width="40" Height="8" />

Demo Source (FigletTextDemo.razor)

@using TermBlade.Core.Renderables

<FigletText Text="TB" Width="32" Height="3" Fg="#f9e2af" />

API Documentation

Razor component: TermBlade.Razor.Components.FigletText. Core renderable: TermBlade.Core.Renderables.FigletTextRenderable.

Preview

 BreakdownChart
 Renders proportional category values as a breakdown chart.
 Razor demo: BreakdownChartDemo.razor

Usage

<BreakdownChart Width="40" Height="8" />

Demo Source (BreakdownChartDemo.razor)

@using TermBlade.Core.Renderables

<BreakdownChart Data="@Values" Labels="@Labels" Width="48" Height="6" />

@code {
    private static readonly List<double> Values = [42, 28, 18];
    private static readonly List<string> Labels = ["Core", "Razor", "Docs"];
}

API Documentation

Razor component: TermBlade.Razor.Components.BreakdownChart. Core renderable: TermBlade.Core.Renderables.BreakdownChartRenderable.

Preview

 JsonText
 Renders formatted JSON text.
 Razor demo: JsonTextDemo.razor

Usage

<JsonText Width="40" Height="8" />

Demo Source (JsonTextDemo.razor)

@using TermBlade.Core.Renderables

<JsonText Json="@Json" Width="48" Height="6" />

@code {
    private const string Json = """{""name"":""TermBlade"",""kind"":""TUI""}""";
}

API Documentation

Razor component: TermBlade.Razor.Components.JsonText. Core renderable: TermBlade.Core.Renderables.JsonTextRenderable.

Preview

 Canvas
 Renders a terminal drawing canvas.
 Razor demo: CanvasDemo.razor

Usage

<Canvas Width="40" Height="8" />

Demo Source (CanvasDemo.razor)

@using TermBlade.Core.Renderables

<Canvas Width="32" Height="6" />

API Documentation

Razor component: TermBlade.Razor.Components.Canvas. Core renderable: TermBlade.Core.Renderables.CanvasRenderable.

Preview

 CanvasImage
 Renders image-like content on a terminal canvas.
 Razor demo: CanvasImageDemo.razor

Usage

<CanvasImage Width="40" Height="8" />

Demo Source (CanvasImageDemo.razor)

@using TermBlade.Core.Renderables

<CanvasImage Width="32" Height="6" />

API Documentation

Razor component: TermBlade.Razor.Components.CanvasImage. Core renderable: TermBlade.Core.Renderables.CanvasImageRenderable.

Preview

 Notification
 Renders a notification message.
 Razor demo: NotificationDemo.razor

Usage

<Notification Width="40" Height="8" />

Demo Source (NotificationDemo.razor)

@using TermBlade.Core.Renderables

<Notification Content="Build completed" Width="36" Height="1" Fg="#a6e3a1" />

API Documentation

Razor component: TermBlade.Razor.Components.Notification. Core renderable: TermBlade.Core.Renderables.NotificationRenderable.

Preview

 Button
 Renders a focusable button.
 Razor demo: ButtonDemo.razor

Usage

<Button Width="40" Height="8" />

Demo Source (ButtonDemo.razor)

@using TermBlade.Core.Renderables

<Button Content="Deploy" Width="18" Height="1" />

API Documentation

Razor component: TermBlade.Razor.Components.Button. Core renderable: TermBlade.Core.Renderables.ButtonRenderable.

Preview

 CalendarPicker
 Renders a calendar picker.
 Razor demo: CalendarPickerDemo.razor

Usage

<CalendarPicker Width="40" Height="8" />

Demo Source (CalendarPickerDemo.razor)

@using TermBlade.Core.Renderables

<CalendarPicker DisplayMonth="@(new DateOnly(2026, 6, 1))" Width="20" Height="8" />

API Documentation

Razor component: TermBlade.Razor.Components.CalendarPicker. Core renderable: TermBlade.Core.Renderables.CalendarPickerRenderable.

Preview

 Carousel
 Renders one selected item from a carousel.
 Razor demo: CarouselDemo.razor

Usage

<Carousel Width="40" Height="8" />

Demo Source (CarouselDemo.razor)

@using TermBlade.Core.Renderables

<Carousel Items="@Items" SelectedIndex="1" Width="32" Height="1" />

@code {
    private static readonly IReadOnlyList<string> Items = ["Alpha", "Beta", "Gamma"];
}

API Documentation

Razor component: TermBlade.Razor.Components.Carousel. Core renderable: TermBlade.Core.Renderables.CarouselRenderable.

Preview

 CheckBox
 Renders a checkbox control.
 Razor demo: CheckBoxDemo.razor

Usage

<CheckBox Width="40" Height="8" />

Demo Source (CheckBoxDemo.razor)

@using TermBlade.Core.Renderables

<CheckBox Label="Enable feature" IsChecked="true" Width="32" Height="1" />

API Documentation

Razor component: TermBlade.Razor.Components.CheckBox. Core renderable: TermBlade.Core.Renderables.CheckBoxRenderable.

Preview

 Dialog
 Renders a modal dialog container.
 Razor demo: DialogDemo.razor

Usage

<Dialog Width="40" Height="8" />

Demo Source (DialogDemo.razor)

@using TermBlade.Core.Renderables

<Dialog Width="42" Height="6"><Text Content="Dialog content" Width="30" Height="1" /></Dialog>

API Documentation

Razor component: TermBlade.Razor.Components.Dialog. Core renderable: TermBlade.Core.Renderables.DialogRenderable.

Preview

 DataGrid
 Renders tabular data as a data grid.
 Razor demo: DataGridDemo.razor

Usage

<DataGrid Width="40" Height="8" />

Demo Source (DataGridDemo.razor)

@using TermBlade.Core.Renderables

<DataGrid Columns="@Columns" Rows="@Rows" Width="52" Height="5" />

@code {
    private static readonly IReadOnlyList<string> Columns = ["Name", "Area"];
    private static readonly IReadOnlyList<IReadOnlyList<string>> Rows = [["Panel", "Widget"], ["Button", "Control"]];
}

API Documentation

Razor component: TermBlade.Razor.Components.DataGrid. Core renderable: TermBlade.Core.Renderables.DataGridRenderable.

Preview

 Expander
 Renders an expandable panel.
 Razor demo: ExpanderDemo.razor

Usage

<Expander Width="40" Height="8" />

Demo Source (ExpanderDemo.razor)

@using TermBlade.Core.Renderables

<Expander Width="42" Height="6" IsExpanded="true"><Text Content="Expanded content" Width="30" Height="1" /></Expander>

API Documentation

Razor component: TermBlade.Razor.Components.Expander. Core renderable: TermBlade.Core.Renderables.ExpanderRenderable.

Preview

 Flyout
 Renders a floating flyout panel.
 Razor demo: FlyoutDemo.razor

Usage

<Flyout Width="40" Height="8" />

Demo Source (FlyoutDemo.razor)

@using TermBlade.Core.Renderables

<Flyout Width="42" Height="6"><Text Content="Flyout content" Width="30" Height="1" /></Flyout>

API Documentation

Razor component: TermBlade.Razor.Components.Flyout. Core renderable: TermBlade.Core.Renderables.FlyoutRenderable.

Preview

 Icon
 Renders an icon glyph.
 Razor demo: IconDemo.razor

Usage

<Icon Width="40" Height="8" />

Demo Source (IconDemo.razor)

@using TermBlade.Core.Renderables

<Icon Content="*" Width="4" Height="1" Fg="#f38ba8" />

API Documentation

Razor component: TermBlade.Razor.Components.Icon. Core renderable: TermBlade.Core.Renderables.IconRenderable.

Preview

 Image
 Renders terminal image content.
 Razor demo: ImageDemo.razor

Usage

<Image Width="40" Height="8" />

Demo Source (ImageDemo.razor)

@using TermBlade.Core.Renderables

<Image Width="32" Height="6" />

API Documentation

Razor component: TermBlade.Razor.Components.Image. Core renderable: TermBlade.Core.Renderables.ImageRenderable.

Preview

 MessageBox
 Renders a modal message box.
 Razor demo: MessageBoxDemo.razor

Usage

<MessageBox Width="40" Height="8" />

Demo Source (MessageBoxDemo.razor)

@using TermBlade.Core.Renderables

<MessageBox Width="42" Height="6"><Text Content="Message text" Width="30" Height="1" /></MessageBox>

API Documentation

Razor component: TermBlade.Razor.Components.MessageBox. Core renderable: TermBlade.Core.Renderables.MessageBoxRenderable.

Preview

 NumericUpDown
 Renders a numeric up/down control.
 Razor demo: NumericUpDownDemo.razor

Usage

<NumericUpDown Width="40" Height="8" />

Demo Source (NumericUpDownDemo.razor)

@using TermBlade.Core.Renderables

<NumericUpDown Value="42" Step="2" Width="20" Height="1" />

API Documentation

Razor component: TermBlade.Razor.Components.NumericUpDown. Core renderable: TermBlade.Core.Renderables.NumericUpDownRenderable.

Preview

 ProgressBar
 Renders a progress bar.
 Razor demo: ProgressBarDemo.razor

Usage

<ProgressBar Width="40" Height="8" />