ratatui-widgets

Using Ratatui's built-in widgets

Ratatui Widgets

Use this skill when:

Common Widgets

use ratatui::{
    layout::{Constraint, Direction, Layout},
    widgets::{Block, Borders, List, ListItem, Paragraph, Table, Row, Cell},
};

fn ui(f: &mut Frame, app: &App) {
    let chunks = Layout::default()
        .direction(Direction::Vertical)
        .constraints([
            Constraint::Length(3),
            Constraint::Min(0),
        ])
        .split(f.size());

    // Paragraph
    let paragraph = Paragraph::new("Hello, world!")
        .block(Block::default().title("Title").borders(Borders::ALL));
    f.render_widget(paragraph, chunks[0]);

    // List
    let items: Vec<ListItem> = app.items
        .iter()
        .map(|i| ListItem::new(i.as_str()))
        .collect();

    let list = List::new(items)
        .block(Block::default().title("List").borders(Borders::ALL))
        .highlight_style(Style::default().bg(Color::Gray));

    f.render_widget(list, chunks[1]);
}

Table Widget

use ratatui::widgets::{Table, Row, Cell};

let rows = vec![
    Row::new(vec!["Name", "Age", "City"]),
    Row::new(vec!["Alice", "30", "NYC"]),
    Row::new(vec!["Bob", "25", "SF"]),
];

let table = Table::new(rows)
    .block(Block::default().title("Table").borders(Borders::ALL))
    .widths(&[
        Constraint::Percentage(40),
        Constraint::Percentage(20),
        Constraint::Percentage(40),
    ]);

f.render_widget(table, area);

Related Skills