Skip to content

Previously we were rendering a Paragraph with no styling.

Let’s make some improvements:

  1. Add a Block with a rounded border and the title "Counter App".
  2. Make everything in the Paragraph have a foreground color of Color::Yellow

This is what our code will now look like:

use ratatui::{
prelude::{Alignment, Frame},
style::{Color, Style},
widgets::{Block, BorderType, Borders, Paragraph},
use crate::app::App;
pub fn render(app: &mut App, f: &mut Frame) {
Press `Esc`, `Ctrl-C` or `q` to stop running.\n\
Press `j` and `k` to increment and decrement the counter respectively.\n\
Counter: {}
.title("Counter App")

Keep in mind it won’t render until we have written the code for tui::Frame

When rendered, this is what the UI will look like:

Counter app demo