widgets · ratatui's widget examples on intuiTUIve

0.0 s

Screenshots

 Block  Text  List  Table  Tabs  Scrollbar  Calendar  Popup  Borders  Custom    
┌─ Bordered ─────────────┐╭─ Styled ───────────────╮╭─ Rounded red ────────────╮
│A plain border, all four││Bold italic blue on     ││A rounded border in red,  │
│sides.                  ││black, the border and   ││its title in bold.        │
│                        ││the inside.             ││                          │
│                        ││                        ││                          │
│                        ││                        ││                          │
└────────────────────────┘╰────────────────────────╯╰──────────────────────────╯
┏━ Thick ━━━━━━━━━━━━━━━━┓╔════════ Double ════════╗╭─ Left ─────────── Right ─╮
┃A thick border.         ┃║A double border, its    ║│Titles left, right and on │
┃                        ┃║title in the middle.    ║│the bottom edge.          │
┃                        ┃║                        ║│                          │
┃                        ┃║                        ║│                          │
┃                        ┃║                        ║│                          │
┗━━━━━━━━━━━━━━━━━━━━━━━━┛╚════════════════════════╝╰─ Bottom ─────────── 1/9 ─╯
── Sides ─────────────────┌╌ Dashed ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌┐╭─ Shadow ────────────────╮ 
Only the top and the      ╎Dashes, light and heavy.╎│A shadow down the right  │▒
bottom.                   ╎                        ╎│and along the bottom.    │▒
                          ╎                        ╎│                         │▒
                          ╎                        ╎│                         │▒
                          ╎                        ╎│                         │▒
                          ╎                        ╎╰─────────────────────────╯▒
──────────────────────────└╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌┘ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
←/→ or 1-9, 0 tabs · ? keys · Ctrl+P commands · q quit                          
block
 Block  Text  List  Table  Tabs  Scrollbar  Calendar  Popup  Borders  Custom    
╭─ Centred ──────────────╮╭─ Right ────────────────╮╭─ Justified ──────────────╮
│       Each line        ││               Each line││Each line but the last  is│
│   sits in the middle   ││       sits at the right││spread to the whole width,│
│     of the panel.      ││           of the panel.││the words spaced out.     │
╰────────────────────────╯╰────────────────────────╯╰──────────────────────────╯
╭─ Wrapped ────────────────────────────────────────╮╭─ No wrap ────────────────╮
│Toasted barley salad. Toast a cup of pearl barley ││A line too long for its p…│
│in a dry pan until it smells of popcorn, then     ││                          │
│simmer it for half an hour. Drain it, dress it    ││                          │
│while warm with lemon, olive oil and a little     ││                          │
│honey, and fold in chopped parsley, cucumber and  ││                          │
│feta. It keeps for three days, and tastes better  ││                          │
│on the second.                                    ││                          │
│                                                  ││                          │
│                                                  ││                          │
╰──────────────────────────────────────────────────╯╰──────────────────────────╯
╭─ Masked ───────────────╮╭─ Hyperlink ────────────────────────────────────────╮
│Password:               ││The project's home:                                 │
│correct-horse-battery   ││rs-rich on GitHub                                   │
│                        ││                                                    │
│m shows or masks it     ││A terminal with OSC 8 links opens it.               │
╰────────────────────────╯╰────────────────────────────────────────────────────╯
←/→ or 1-9, 0 tabs · ? keys · Ctrl+P commands · q quit                          
text
 Block  Text  List  Table  Tabs  Scrollbar  Calendar  Popup  Borders  Custom    
╭─ List ───────────────────────╮╭─ Chat, bottom to top ────────────────────────╮
│  Apples                      ││                                              │
│  Barley                      ││                                              │
│> Carrots                     ││                                              │
│  Dates                       ││                                              │
│  Eggs                        ││                                              │
│  Fennel                      ││                                              │
│  Garlic                      ││                                              │
│  Honey                       ││                                              │
│  Ink for the printer         ││                                              │
│  Jam                         ││                                              │
│  Kale                        ││   Ben: Hello!                                │
│  Lemons                      ││   Ana: How was the week?                     │
│                              ││   Ben: Fine, and you?                        │
│                              ││   Ana: Dinner tonight?                       │
│                              ││   Ben: The new place on the corner has a long│
│                              ││   menu and short queues on a Tuesday.        │
│                              ││   Ana: Did you book somewhere?               │
│                              ││>> Ben: Table for four at eight, by the       │
│                              ││>> window.                                    │
│                              ││   Ana: On my way, ten minutes.               │
╰─ ↑/↓ move · Tab the chat ────╯╰─ multi-line, scroll padding ─────────────────╯
←/→ or 1-9, 0 tabs · ? keys · Ctrl+P commands · q quit                          
list
 Block  Text  List  Table  Tabs  Scrollbar  Calendar  Popup  Borders  Custom    
╭─ Table ──────────────────────────────────────────────────────────────────────╮
│   Dish                                   Course                Price     Time│
│                                                                              │
│   Lentil soup                            Starter                6.50   20 min│
│   Beetroot salad                         Starter                7.00   15 min│
│🍴 Mushroom risotto                       Main                  14.00   35 min│
│   Fish pie                               Main                  16.50   45 min│
│   Chickpea curry                         Main                  13.00   30 min│
│   Apple crumble                          Dessert                6.00   40 min│
│   Lemon tart                             Dessert                6.50   25 min│
│   Cheese board                           Dessert                9.00    5 min│
│                                                                              │
│                                                                              │
│                                                                              │
│                                                                              │
│                                                                              │
│                                                                              │
│                                                                              │
│                                                                              │
│                                                                              │
│   8 dishes                                                     78.50         │
╰─ ↑/↓ row · ←/→ cell · v the table app ───────────────────────────────────────╯
←/→ or 1-9, 0 tabs · ? keys · Ctrl+P commands · q quit                          
table
 Block  Text  List  Table  Tabs  Scrollbar  Calendar  Popup  Borders  Custom    
╭─ Table app · emerald ────────────────────────────────────────────────────────╮
│   Name               Address            Email                                │
│   Ada Marsh          4 Willow Row       ada.marsh@example.com               █│
│                      Eastbrook                                              █│
│                      EB2 7QL                                                █│
│                                                                             █│
│ █ Ben Okafor         17 Quarry Hill     ben.okafor@example.com              █│
│                      Low Fenton                                             █│
│                      LF9 1AA                                                ║│
│                                                                             ║│
│   Chloe Ruiz         2 Harbour Steps    chloe.ruiz@example.com              ║│
│                      Portwick                                               ║│
│                      PW1 3DS                                                ║│
│                                                                             ║│
│   Dev Patel          88 Mill Lane       dev.patel@example.com               ║│
│                      Crossford                                              ║│
│                      CF4 8NT                                                ║│
│                                                                             ║│
│                                                                             ║│
│                                                                             ║│
│                                                                             ║│
╰─ ↑/↓ row · ←/→ cell · c colours · v the first table ─────────────────────────╯
←/→ or 1-9, 0 tabs · ? keys · Ctrl+P commands · q quit                          
table-app
 Block  Text  List  Table  Tabs  Scrollbar  Calendar  Popup  Borders  Custom    
╭─ Default: a line between, a space each side ─────────────────────────────────╮
│ Overview │ Logs │ Metrics │ Settings                                         │
╰──────────────────────────────────────────────────────────────────────────────╯
╭─ A dot between, a space each side ───────────────────────────────────────────╮
│ Overview  •  Logs  •  Metrics  •  Settings                                   │
╰──────────────────────────────────────────────────────────────────────────────╯
╭─ Nothing between, brackets each side ────────────────────────────────────────╮
│[Overview][Logs][Metrics][Settings]                                           │
╰──────────────────────────────────────────────────────────────────────────────╯
╭─ In the middle ──────────────────────────────────────────────────────────────╮
│                     Overview │ Logs │ Metrics │ Settings                     │
╰──────────────────────────────────────────────────────────────────────────────╯
╭─ Content ────────────────────────────────────────────────────────────────────╮
│                                                                              │
│                                                                              │
│                                   Metrics                                    │
│                                                                              │
│                  The content of the selected tab, centred.                   │
│                                                                              │
│                                                                              │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯
←/→ or 1-9, 0 tabs · ? keys · Ctrl+P commands · q quit                          
tabs
 Block  Text  List  Table  Tabs  Scrollbar  Calendar  Popup  Borders  Custom    
╭─ Down the right, with arrows ────────────────────────────────────────────────╮
│Line  4: the quick brown fox jumps over the lazy dog, 4 times over, and then ↑│
│Line  5: the quick brown fox jumps over the lazy dog, 5 times over, and then █│
│Line  6: the quick brown fox jumps over the lazy dog, 6 times over, and then ↓│
╰──────────────────────────────────────────────────────────────────────────────╯
╭─ Down the left, no track ────────────────────────────────────────────────────╮
│┃Line  4: the quick brown fox jumps over the lazy dog, 4 times over, and then │
│ Line  5: the quick brown fox jumps over the lazy dog, 5 times over, and then │
│ Line  6: the quick brown fox jumps over the lazy dog, 6 times over, and then │
╰──────────────────────────────────────────────────────────────────────────────╯
╭─ Along the bottom, a begin arrow and a thumb of its own ─────────────────────╮
│ the quick brown fox jumps over the lazy dog, 1 times over, and then rests in │
│ the quick brown fox jumps over the lazy dog, 2 times over, and then rests in │
│◄─────▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬─────────────────────│
╰──────────────────────────────────────────────────────────────────────────────╯
╭─ Along the bottom, a track of its own ───────────────────────────────────────╮
│ the quick brown fox jumps over the lazy dog, 1 times over, and then rests in │
│ the quick brown fox jumps over the lazy dog, 2 times over, and then rests in │
│ the quick brown fox jumps over the lazy dog, 3 times over, and then rests in │
│ the quick brown fox jumps over the lazy dog, 4 times over, and then rests in │
│-----####################################################---------------------│
╰──────────────────────────────────────────────────────────────────────────────╯
←/→ or 1-9, 0 tabs · ? keys · Ctrl+P commands · q quit                          
scrollbar
 Block  Text  List  Table  Tabs  Scrollbar  Calendar  Popup  Borders  Custom    
╭─ Surrounding days ───╮ ╭─ Sunday first ───────╮ ╭─ Events ───────────────────╮
│     October 2026     │ │    November 2026     │ │ 5 Oct Harvest fair         │
│ Mo Tu We Th Fr Sa Su │ │ Su Mo Tu We Th Fr Sa │ │16 Oct Team offsite         │
│ 28 29 30  1  2  3  4 │ │  1  2  3  4  5  6  7 │ │31 Oct Lantern night        │
│  5  6  7  8  9 10 11 │ │  8  9 10 11 12 13 14 │ │11 Nov Remembrance          │
│ 12 13 14 15 16 17 18 │ │ 15 16 17 18 19 20 21 │ │26 Nov Thanksgiving         │
│ 19 20 21 22 23 24 25 │ │ 22 23 24 25 26 27 28 │ │                            │
│ 26 27 28 29 30 31  1 │ │ 29 30                │ │                            │
│                      │ │                      │ │                            │
╰──────────────────────╯ ╰──────────────────────╯ │                            │
                                                  │                            │
                                                  │                            │
                                                  │                            │
                                                  │                            │
                                                  │                            │
                                                  │                            │
                                                  │                            │
                                                  │                            │
                                                  │                            │
                                                  │                            │
                                                  │                            │
                                                  ╰─ n/p month ────────────────╯
←/→ or 1-9, 0 tabs · ? keys · Ctrl+P commands · q quit                          
calendar
 Block  Text  List  Table  Tabs  Scrollbar  Calendar  Popup  Borders  Custom    
╭─ Behind ─────────────────────────────────────────────────────────────────────╮
│This panel sits under the pop-up. Press p to open it: a box of 60% by 20% of  │
│the screen, centred, with a shadow over what is below.                        │
│                                                                              │
│                                                                              │
│                                                                              │
│                                                                              │
│                                                                              │
│                                                                              │
│               ╭─────────────────── Popup ────────────────────╮               │
│               │A pop-up over the blue panel, with a shadow.  │               │
│               │p or Esc closes it.                           │               │
│               ╰──────────────────────────────────────────────╯               │
│                                                                              │
│                                                                              │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯
╭───────────────╮   ╭───────────────╮   ╭───────────────╮   ╭─────────────────╮ 
│     Light     │░  │    Medium     │▒  │     Dark      │▓  │       Dim       │ 
│               │░  │               │▒  │               │▓  │                 │ 
╰───────────────╯░  ╰───────────────╯▒  ╰───────────────╯▓  ╰─────────────────╯ 
 ░░░░░░░░░░░░░░░░░   ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒   ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓                      
←/→ or 1-9, 0 tabs · ? keys · Ctrl+P commands · q quit                          
popup
 Block  Text  List  Table  Tabs  Scrollbar  Calendar  Popup  Borders  Custom    
╭─ Top left ───────────────────────────┬─ Top right ───────────────────────────╮
│Four panes share their borders.       │The lines join where they meet.        │
│                                      │                                       │
│                                      │                                       │
│                                      │                                       │
│                                      │                                       │
│                                      │                                       │
│                                      │                                       │
│                                      │                                       │
│                                      │                                       │
┢━ Bottom left ━━━━━━━━━━━━━━━━━━━━━━━━╅─ Bottom right ────────────────────────┤
┃The pane with the focus is drawn      ┃↑/↓, Tab or a click pick a pane.       │
┃thick.                                ┃                                       │
┃                                      ┃                                       │
┃                                      ┃                                       │
┃                                      ┃                                       │
┃                                      ┃                                       │
┃                                      ┃                                       │
┃                                      ┃                                       │
┃                                      ┃                                       │
┃                                      ┃                                       │
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┹───────────────────────────────────────╯
←/→ or 1-9, 0 tabs · ? keys · Ctrl+P commands · q quit                          
borders
 Block  Text  List  Table  Tabs  Scrollbar  Calendar  Popup  Borders  Custom    
                                                                                
  Three stock buttons, each with a look of its own from theme styles: a face,   
  a lit top edge and a shaded bottom one, picked while it has the focus or the  
  pointer, and pressed while a button is held on it.                            
                                                                                
              ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔   ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔   ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔               
                    Red              Green             Blue                     
              ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁   ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁   ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁               
                                                                                
                             Green pressed, 1 time.                             
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                
←/→ or 1-9, 0 tabs · ? keys · Ctrl+P commands · q quit                          
custom
 Block  Text  List  Table  Tabs  Scrollbar  Calendar  Popup  Borders  Custom    
                                                                                
  Three stock buttons, each with a look of its own from theme styles: a face,   
  a lit top edge and a shaded bottom one, picked while it has the focus or the  
  pointer, a╭─ Help ───────────────────────────────────────────────╮            
            │? Search keys ›                                       │            
            │custom                                                │            
            │  ↓  the next button                                  │            
            │  ↑  the button before                                │            
            │                                                      │            
            │  ←  the tab before                                   │            
            │  →  the next tab                                     │            
            │  q  quit                                             │            
            │  1  the Block tab                                    │            
            │  2  the Text tab                                     │            
            │  3  the List tab                                     │            
            │  4  the Table tab                                    │            
            │  5  the Tabs tab                                     │            
            │  15 keys · more below · type to search · ↑↓ scroll · │            
            ╰──────────────────────────────────────────────────────╯            
                                                                                
                                                                                
                                                                                
←/→ or 1-9, 0 tabs · ? keys · Ctrl+P commands · q quit                          
keys