feat: impl WidgetRef for Fn(Rect, &mut Buffer)

This allows you to treat any function that takes a `Rect` and a mutable reference a `Buffer` as a widget in situations where you don't want to create a new type for a widget. Example: ```rust fn hello(area: Rect, buf: &mut Buffer) { Line::raw("Hello").render(area, buf); } frame.render_widget(&hello, frame.size()); frame.render_widget_ref(hello, frame.size()); ``` Related to: <https://forum.ratatui.rs/t/idea-functionwidget-was-thoughts-on-tui-react/59/2>
refactor: expand glob imports (#1152 )
2024-05-29 16:44:01 -07:00 · 2024-05-29 04:42:29 -07:00 · 2024-05-28 13:23:39 -07:00 · 2024-05-27 11:07:27 -07:00 · 2024-05-26 19:50:10 +02:00 · 2024-05-26 19:44:46 +02:00
222 changed files with 61664 additions and 10617 deletions
--- a/.cz.toml
+++ b/.cz.toml
@@ -0,0 +1,78 @@
+# configuration for https://github.com/commitizen/cz-cli
+
+[tool.commitizen]
+name = "cz_customize"
+tag_format = "$version"
+version_type = "semver"
+version_provider = "cargo"
+update_changelog_on_bump = true
+major_version_zero = true
+use_shortcuts = true
+
+[tool.commitizen.customize]
+message_template = """{{change_type}}({{scope}}): {{subject}}
+
+{% if body %}\
+{{body}}\
+{% endif %}
+
+{%if is_breaking_change %}\
+BREAKING_CHANGE: \
+{% endif %}\
+{{footer}}\
+"""
+example = "feature: this feature enable customize through config file"
+schema = "<type>(<scope>): <subject>\n\n<body>\n\n<footer>"
+schema_pattern = "(build|chore|ci|docs|feat|fix|perf|refactor|revert|style|test)\\(\\w+\\):\\s(?P<subject>.*)(\\n\\n(?P<body>.*))?(\\n\\n(?P<footer>.*))?"
+
+# The order needs to be preserved, as it influences the order when executing cz commit/cz c
+
+# Change types
+[[tool.commitizen.customize.questions]]
+type = "list"
+name = "change_type"
+choices = [
+    { value = "build", name = "build: Changes that affect the build system or external dependencies (example scopes: pip, docker, npm)", key = "b" },
+    { value = "chore", name = "chore: A modification that generally does not fall into any other category", key = "c" },
+    { value = "ci", name = "ci: Changes to our CI configuration files and scripts (example scopes: GitLabCI)", key = "i" },
+    { value = "docs", name = "docs: Documentation only changes", key = "d" },
+    { value = "feat", name = "feat: A new feature.", key = "f" },
+    { value = "fix", name = "fix: A bug fix.", key = "x" },
+    { value = "perf", name = "perf: A code change that improves performance", key = "p" },
+    { value = "refactor", name = "refactor: A code change that neither fixes a bug nor adds a feature", key = "r" },
+    { value = "revert", name = "revert: Revert previous commits", key = "v" },
+    { value = "style", name = "style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)", key = "s" },
+    { value = "test", name = "test: Adding missing or correcting existing tests", key = "t" },
+]
+message = "Select the type of change you are committing"
+
+# The scope of the change, can be a file, class name or other context
+[[tool.commitizen.customize.questions]]
+type = "input"
+name = "scope"
+message = "What is the scope of this change? (class or file name): (press [enter] to skip)\n"
+
+# Summary of the changes
+[[tool.commitizen.customize.questions]]
+"type" = "input"
+"name" = "subject"
+"message" = "Write a short and imperative summary of the code changes: (lower case and no period)\n"
+
+# The commit body, elaborate the changes if need be.
+[[tool.commitizen.customize.questions]]
+type = "input"
+name = "body"
+message = "Provide additional contextual information about the code changes: (press [enter] to skip)\n"
+
+# Specify if the changes are breaking
+[[tool.commitizen.customize.questions]]
+type = "confirm"
+name = "is_breaking_change"
+message = "Is this a BREAKING CHANGE?"
+default = false
+
+# Reference closing issues and share other
+[[tool.commitizen.customize.questions]]
+type = "input"
+name = "footer"
+message = "Footer. Information about Breaking Changes and reference issues that this commit closes: (press [enter] to skip)"
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,17 @@
+# configuration for https://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.rs]
+indent_style = space
+indent_size = 4
+
+[*.yml]
+indent_style = space
+indent_size = 2
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -0,0 +1,11 @@
+# See https://help.github.com/articles/about-codeowners/
+# for more info about CODEOWNERS file
+
+# It uses the same pattern rule for gitignore file
+# https://git-scm.com/docs/gitignore#_pattern_format
+
+# Maintainers
+* @orhun @joshka @kdheepak @Valentin271 @EdJoPaTo
+
+# Past maintainers
+# @mindoodoo @sayanarijit
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,60 @@
+---
+name: Bug report
+about: Create an issue about a bug you encountered
+title: ''
+labels: bug
+assignees: ''
+---
+
+<!--
+Hi there, sorry `ratatui` is not working as expected.
+Please fill this bug report conscientiously.
+A detailed and complete issue is more likely to be processed quickly.
+-->
+
+## Description
+<!--
+A clear and concise description of what the bug is.
+-->
+
+
+## To Reproduce
+<!--
+Try to reduce the issue to a simple code sample exhibiting the problem.
+Ideally, fork the project and add a test or an example.
+-->
+
+
+## Expected behavior
+<!--
+A clear and concise description of what you expected to happen.
+-->
+
+
+## Screenshots
+<!--
+If applicable, add screenshots, gifs or videos to help explain your problem.
+-->
+
+
+## Environment
+<!--
+Add a description of the systems where you are observing the issue. For example:
+- OS: Linux
+- Terminal Emulator: xterm
+- Font: Inconsolata (Patched)
+- Crate version: 0.7
+- Backend: termion
+-->
+
+- OS:
+- Terminal Emulator:
+- Font:
+- Crate version:
+- Backend:
+
+## Additional context
+<!--
+Add any other context about the problem here.
+If you already looked into the issue, include all the leads you have explored.
+-->
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Discord Chat
+    url: https://discord.gg/pMCEU9hNEj
+    about: Ask questions about ratatui on Discord
+  - name: Matrix Chat
+    url: https://matrix.to/#/#ratatui:matrix.org
+    about: Ask questions about ratatui on Matrix
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,32 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+## Problem
+<!--
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+-->
+
+## Solution
+<!--
+A clear and concise description of what you want to happen.
+Things to consider:
+- backward compatibility
+- ease of use of the API (https://rust-lang.github.io/api-guidelines/)
+- consistency with the rest of the crate
+-->
+
+## Alternatives
+<!--
+A clear and concise description of any alternative solutions or features you've considered.
+-->
+
+## Additional context
+<!--
+Add any other context or screenshots about the feature request here.
+-->
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -0,0 +1,18 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  # Maintain dependencies for Cargo
+  - package-ecosystem: "cargo"
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"
+  # Maintain dependencies for GitHub Actions
+  - package-ecosystem: github-actions
+    directory: "/"
+    schedule:
+      interval: weekly
+    open-pull-requests-limit: 10
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -0,0 +1 @@
+<!-- Please read CONTRIBUTING.md before submitting any pull request. -->
--- a/.github/workflows/calculate-alpha-release.bash
+++ b/.github/workflows/calculate-alpha-release.bash
@@ -0,0 +1,52 @@
+#!/bin/bash
+
+# Exit on error. Append "|| true" if you expect an error.
+set -o errexit
+# Exit on error inside any functions or subshells.
+set -o errtrace
+# Do not allow use of undefined vars. Use ${VAR:-} to use an undefined VAR
+set -o nounset
+# Catch the error in case mysqldump fails (but gzip succeeds) in `mysqldump |gzip`
+set -o pipefail
+# Turn on traces, useful while debugging but commented out by default
+# set -o xtrace
+
+last_release="$(git tag --sort=committerdate | grep -P "v0+\.\d+\.\d+$" | tail -1)"
+echo "🐭 Last release: ${last_release}"
+
+# detect breaking changes
+if [ -n "$(git log --oneline ${last_release}..HEAD | grep '!:')" ]; then
+    echo "🐭 Breaking changes detected since ${last_release}"
+    git log --oneline ${last_release}..HEAD | grep '!:'
+    # increment the minor version
+    minor="${last_release##v0.}"
+    minor="${minor%.*}"
+    next_minor="$((minor + 1))"
+    next_release="v0.${next_minor}.0"
+else
+    # increment the patch version
+    patch="${last_release##*.}"
+    next_patch="$((patch + 1))"
+    next_release="${last_release/%${patch}/${next_patch}}"
+fi
+echo "🐭 Next release: ${next_release}"
+
+suffix="alpha"
+last_tag="$(git tag --sort=committerdate | tail -1)"
+if [[ "${last_tag}" = "${next_release}-${suffix}"* ]]; then
+    echo "🐭 Last alpha release: ${last_tag}"
+    # increment the alpha version
+    # e.g. v0.22.1-alpha.12 -> v0.22.1-alpha.13
+    alpha="${last_tag##*-${suffix}.}"
+    next_alpha="$((alpha + 1))"
+    next_tag="${last_tag/%${alpha}/${next_alpha}}"
+else
+    # increment the patch and start the alpha version from 0
+    # e.g. v0.22.0 -> v0.22.1-alpha.0
+    next_tag="${next_release}-${suffix}.0"
+fi
+# update the crate version
+msg="# crate version"
+sed -E -i "s/^version = .* ${msg}$/version = \"${next_tag#v}\" ${msg}/" Cargo.toml
+echo "NEXT_TAG=${next_tag}" >> $GITHUB_ENV
+echo "🐭 Next alpha release: ${next_tag}"
--- a/.github/workflows/cd.yml
+++ b/.github/workflows/cd.yml
@@ -0,0 +1,66 @@
+name: Continuous Deployment
+
+on:
+  workflow_dispatch:
+  schedule:
+    # At 00:00 on Saturday
+    # https://crontab.guru/#0_0_*_*_6
+    - cron: "0 0 * * 6"
+  push:
+    tags:
+      - "v*.*.*"
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  publish-alpha:
+    name: Create an alpha release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    if: ${{ !startsWith(github.event.ref, 'refs/tags/v') }}
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Calculate the next release
+        run: .github/workflows/calculate-alpha-release.bash
+
+      - name: Publish on crates.io
+        uses: actions-rs/cargo@v1
+        with:
+          command: publish
+          args: --allow-dirty --token ${{ secrets.CARGO_TOKEN }}
+
+      - name: Generate a changelog
+        uses: orhun/git-cliff-action@v3
+        with:
+          config: cliff.toml
+          args: --unreleased --tag ${{ env.NEXT_TAG }} --strip header
+        env:
+          OUTPUT: BODY.md
+
+      - name: Publish on GitHub
+        uses: ncipollo/release-action@v1
+        with:
+          tag: ${{ env.NEXT_TAG }}
+          prerelease: true
+          bodyFile: BODY.md
+
+  publish-stable:
+    name: Create a stable release
+    runs-on: ubuntu-latest
+    if: ${{ startsWith(github.event.ref, 'refs/tags/v') }}
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4
+
+      - name: Publish on crates.io
+        uses: actions-rs/cargo@v1
+        with:
+          command: publish
+          args: --token ${{ secrets.CARGO_TOKEN }}
--- a/.github/workflows/check-pr.yml
+++ b/.github/workflows/check-pr.yml
@@ -0,0 +1,86 @@
+name: Check Pull Requests
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - synchronize
+      - labeled
+      - unlabeled
+  merge_group:
+
+permissions:
+  pull-requests: write
+
+jobs:
+  check-title:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check PR title
+        if: github.event_name == 'pull_request_target'
+        uses: amannn/action-semantic-pull-request@v5
+        id: check_pr_title
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      # Add comment indicating we require pull request titles to follow conventional commits specification
+      - uses: marocchino/sticky-pull-request-comment@v2
+        if: always() && (steps.check_pr_title.outputs.error_message != null)
+        with:
+          header: pr-title-lint-error
+          message: |
+            Thank you for opening this pull request!
+
+            We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.
+
+            Details:
+
+            > ${{ steps.check_pr_title.outputs.error_message }}
+
+      # Delete a previous comment when the issue has been resolved
+      - if: ${{ steps.check_pr_title.outputs.error_message == null }}
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: pr-title-lint-error
+          delete: true
+
+  check-breaking-change-label:
+    runs-on: ubuntu-latest
+    env:
+      # use an environment variable to pass untrusted input to the script
+      # see https://securitylab.github.com/research/github-actions-untrusted-input/
+      PR_TITLE: ${{ github.event.pull_request.title }}
+    steps:
+    - name: Check breaking change label
+      id: check_breaking_change
+      run: |
+        pattern='^(build|chore|ci|docs|feat|fix|perf|refactor|revert|style|test)(\(\w+\))?!:'
+        # Check if pattern matches
+        if echo "${PR_TITLE}" | grep -qE "$pattern"; then
+          echo "breaking_change=true" >> $GITHUB_OUTPUT
+        else
+          echo "breaking_change=false" >> $GITHUB_OUTPUT
+        fi
+    - name: Add label
+      if: steps.check_breaking_change.outputs.breaking_change == 'true'
+      uses: actions/github-script@v7
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        script: |
+          github.rest.issues.addLabels({
+            issue_number: context.issue.number,
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            labels: ['breaking change']
+          })
+
+  do-not-merge:
+    if: ${{ contains(github.event.*.labels.*.name, 'do not merge') }}
+    name: Prevent Merging
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for label
+        run: |
+          echo "Pull request is labeled as 'do not merge'"
+          echo "This workflow fails so that the pull request cannot be merged"
+          exit 1
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,160 @@
+name: Continuous Integration
+
+on:
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+  merge_group:
+
+# ensure that the workflow is only triggered once per PR,  subsequent pushes to the PR will cancel
+# and restart the workflow. See https://docs.github.com/en/actions/using-jobs/using-concurrency
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+env:
+  # don't install husky hooks during CI as they are only needed for for pre-push
+  CARGO_HUSKY_DONT_INSTALL_HOOKS: true
+
+# lint, clippy and coveraget jobs are intentionally early in the workflow to catch simple
+# formatting, typos, and missing tests as early as possible. This allows us to fix these and
+# resubmit the PR without having to wait for the comprehensive matrix of tests to complete.
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Rust nightly
+        uses: dtolnay/rust-toolchain@nightly
+        with:
+          components: rustfmt
+      - name: Install cargo-make
+        uses: taiki-e/install-action@cargo-make
+      - name: Cache Cargo dependencies
+        uses: Swatinem/rust-cache@v2
+      - name: Check formatting
+        run: cargo make lint-format
+      - name: Check documentation
+        run: cargo make lint-docs
+      - name: Check typos
+        uses: crate-ci/typos@master
+      - name: Lint dependencies
+        uses: EmbarkStudios/cargo-deny-action@v1
+
+  clippy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          components: clippy
+      - name: Install cargo-make
+        uses: taiki-e/install-action@cargo-make
+      - name: Cache Cargo dependencies
+        uses: Swatinem/rust-cache@v2
+      - name: Run cargo make clippy-all
+        run: cargo make clippy
+
+  coverage:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          components: llvm-tools
+      - name: Install cargo-llvm-cov and cargo-make
+        uses: taiki-e/install-action@v2
+        with:
+          tool: cargo-llvm-cov,cargo-make
+      - name: Cache Cargo dependencies
+        uses: Swatinem/rust-cache@v2
+      - name: Generate coverage
+        run: cargo make coverage
+      - name: Upload to codecov.io
+        uses: codecov/codecov-action@v4
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: true
+
+  check:
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, windows-latest, macos-latest]
+        toolchain: ["1.74.0", "stable"]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Rust {{ matrix.toolchain }}
+        uses: dtolnay/rust-toolchain@master
+        with:
+          toolchain: ${{ matrix.toolchain }}
+      - name: Install cargo-make
+        uses: taiki-e/install-action@cargo-make
+      - name: Cache Cargo dependencies
+        uses: Swatinem/rust-cache@v2
+      - name: Run cargo make check
+        run: cargo make check
+        env:
+          RUST_BACKTRACE: full
+
+  test-doc:
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, windows-latest, macos-latest]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+      - name: Install cargo-make
+        uses: taiki-e/install-action@cargo-make
+      - name: Cache Cargo dependencies
+        uses: Swatinem/rust-cache@v2
+      - name: Test docs
+        run: cargo make test-doc
+        env:
+          RUST_BACKTRACE: full
+
+  test:
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, windows-latest, macos-latest]
+        toolchain: ["1.74.0", "stable"]
+        backend: [crossterm, termion, termwiz]
+        exclude:
+          # termion is not supported on windows
+          - os: windows-latest
+            backend: termion
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Rust ${{ matrix.toolchain }}}
+        uses: dtolnay/rust-toolchain@master
+        with:
+          toolchain: ${{ matrix.toolchain }}
+      - name: Install cargo-make
+        uses: taiki-e/install-action@cargo-make
+      - name: Install cargo-nextest
+        uses: taiki-e/install-action@nextest
+      - name: Cache Cargo dependencies
+        uses: Swatinem/rust-cache@v2
+      - name: Test ${{ matrix.backend }}
+        run: cargo make test-backend ${{ matrix.backend }}
+        env:
+          RUST_BACKTRACE: full
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ Cargo.lock
 *.log
 *.rs.rustfmt
 .gdb_history
+.idea/
--- a/.markdownlint.yaml
+++ b/.markdownlint.yaml
@@ -0,0 +1,15 @@
+# configuration for https://github.com/DavidAnson/markdownlint
+
+first-line-heading: false
+no-inline-html:
+  allowed_elements:
+    - img
+    - details
+    - summary
+    - div
+    - br
+line-length:
+  line_length: 100
+
+# to support repeated headers in the changelog
+no-duplicate-heading: false
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,22 +0,0 @@
-language: rust
-
-rust:
-  - stable
-  - beta
-  - nightly
-
-env:
-  - NO_RUSTUP=1
-
-cache: cargo
-
-matrix:
-  allow_failures:
-    - rust: nightly
-    - rust: beta
-
-before_script:
-  - ./scripts/travis/before_script.sh
-
-script:
-  - ./scripts/travis/script.sh
--- a/BREAKING-CHANGES.md
+++ b/BREAKING-CHANGES.md
@@ -0,0 +1,535 @@
+# Breaking Changes
+
+This document contains a list of breaking changes in each version and some notes to help migrate
+between versions. It is compiled manually from the commit history and changelog. We also tag PRs on
+GitHub with a [breaking change] label.
+
+[breaking change]: (https://github.com/ratatui-org/ratatui/issues?q=label%3A%22breaking+change%22)
+
+## Summary
+
+This is a quick summary of the sections below:
+
+- [Unreleased](#unreleased)
+  - `Rect::inner` takes `Margin` directly instead of reference
+  - `Buffer::filled` takes `Cell` directly instead of reference
+  - `Stylize::bg()` now accepts `Into<Color>`
+  - Removed deprecated `List::start_corner`
+- [v0.26.0](#v0260)
+  - `Flex::Start` is the new default flex mode for `Layout`
+  - `patch_style` & `reset_style` now consume and return `Self`
+  - Removed deprecated `Block::title_on_bottom`
+  - `Line` now has an extra `style` field which applies the style to the entire line
+  - `Block` style methods cannot be created in a const context
+  - `Tabs::new()` now accepts `IntoIterator<Item: Into<Line<'a>>>`
+  - `Table::new` now accepts `IntoIterator<Item: Into<Row<'a>>>`.
+- [v0.25.0](#v0250)
+  - Removed `Axis::title_style` and `Buffer::set_background`
+  - `List::new()` now accepts `IntoIterator<Item = Into<ListItem<'a>>>`
+  - `Table::new()` now requires specifying the widths
+  - `Table::widths()` now accepts `IntoIterator<Item = AsRef<Constraint>>`
+  - Layout::new() now accepts direction and constraint parameters
+  - The default `Tabs::highlight_style` is now `Style::new().reversed()`
+- [v0.24.0](#v0240)
+  - MSRV is now 1.70.0
+  - `ScrollbarState`: `position`, `content_length`, and `viewport_content_length` are now `usize`
+  - `BorderType`: `line_symbols` is now `border_symbols` and returns `symbols::border::set`
+  - `Frame<'a, B: Backend>` is now `Frame<'a>`
+  - `Stylize` shorthands for `String` now consume the value and return `Span<'static>`
+  - `Spans` is removed
+- [v0.23.0](#v0230)
+  - `Scrollbar`: `track_symbol` now takes `Option<&str>`
+  - `Scrollbar`: symbols moved to `symbols` module
+  - MSRV is now 1.67.0
+- [v0.22.0](#v0220)
+  - `serde` representation of `Borders` and `Modifiers` has changed
+- [v0.21.0](#v0210)
+  - MSRV is now 1.65.0
+  - `terminal::ViewPort` is now an enum
+  - `"".as_ref()` must be annotated to implement `Into<Text<'a>>`
+  - `Marker::Block` renders as a block char instead of a bar char
+- [v0.20.0](#v0200)
+  - MSRV is now 1.63.0
+  - `List` no longer ignores empty strings
+
+## Unreleased
+
+### `Rect::inner` takes `Margin` directly instead of reference ([#1008])
+
+[#1008]: https://github.com/ratatui-org/ratatui/pull/1008
+
+`Margin` needs to be passed without reference now.
+
+```diff
+-let area = area.inner(&Margin {
+let area = area.inner(Margin {
+     vertical: 0,
+     horizontal: 2,
+ });
+```
+
+### `Buffer::filled` takes `Cell` directly instead of reference ([#1148])
+
+[#1148]: https://github.com/ratatui-org/ratatui/pull/1148
+
+`Buffer::filled` moves the `Cell` instead of taking a reference.
+
+```diff
+-Buffer::filled(area, &Cell::new("X"));
+Buffer::filled(area, Cell::new("X"));
+```
+
+### `Stylize::bg()` now accepts `Into<Color>` ([#1103])
+
+[#1103]: https://github.com/ratatui-org/ratatui/pull/1103
+
+Previously, `Stylize::bg()` accepted `Color` but now accepts `Into<Color>`. This allows more
+flexible types from calling scopes, though it can break some type inference in the calling scope.
+
+### Remove deprecated `List::start_corner` and `layout::Corner` ([#757])
+
+[#757]: https://github.com/ratatui-org/ratatui/pull/757
+
+`List::start_corner` was deprecated in v0.25. Use `List::direction` and `ListDirection` instead.
+
+```diff
+- list.start_corner(Corner::TopLeft);
+- list.start_corner(Corner::TopRight);
+// This is not an error, BottomRight rendered top to bottom previously
+- list.start_corner(Corner::BottomRight);
+// all becomes
+ list.direction(ListDirection::TopToBottom);
+```
+
+```diff
+- list.start_corner(Corner::BottomLeft);
+// becomes
+ list.direction(ListDirection::BottomToTop);
+```
+
+`layout::Corner` was removed entirely.
+
+## [v0.26.0](https://github.com/ratatui-org/ratatui/releases/tag/v0.26.0)
+
+### `Flex::Start` is the new default flex mode for `Layout` ([#881])
+
+[#881]: https://github.com/ratatui-org/ratatui/pull/881
+
+Previously, constraints would stretch to fill all available space, violating constraints if
+necessary.
+
+With v0.26.0, `Flex` modes are introduced, and the default is `Flex::Start`, which will align
+areas associated with constraints to be beginning of the area. With v0.26.0, additionally,
+`Min` constraints grow to fill excess space. These changes will allow users to build layouts
+more easily.
+
+With v0.26.0, users will most likely not need to change what constraints they use to create
+existing layouts with `Flex::Start`. However, to get old behavior, use `Flex::Legacy`.
+
+```diff
+- let rects = Layout::horizontal([Length(1), Length(2)]).split(area);
+// becomes
+ let rects = Layout::horizontal([Length(1), Length(2)]).flex(Flex::Legacy).split(area);
+```
+
+### `Table::new()` now accepts `IntoIterator<Item: Into<Row<'a>>>` ([#774])
+
+[#774]: https://github.com/ratatui-org/ratatui/pull/774
+
+Previously, `Table::new()` accepted `IntoIterator<Item=Row<'a>>`. The argument change to
+`IntoIterator<Item: Into<Row<'a>>>`, This allows more flexible types from calling scopes, though it
+can some break type inference in the calling scope for empty containers.
+
+This can be resolved either by providing an explicit type (e.g. `Vec::<Row>::new()`), or by using
+`Table::default()`.
+
+```diff
+- let table = Table::new(vec![], widths);
+// becomes
+ let table = Table::default().widths(widths);
+```
+
+### `Tabs::new()` now accepts `IntoIterator<Item: Into<Line<'a>>>` ([#776])
+
+[#776]: https://github.com/ratatui-org/ratatui/pull/776
+
+Previously, `Tabs::new()` accepted `Vec<T>` where `T: Into<Line<'a>>`. This allows more flexible
+types from calling scopes, though it can break some type inference in the calling scope.
+
+This typically occurs when collecting an iterator prior to calling `Tabs::new`, and can be resolved
+by removing the call to `.collect()`.
+
+```diff
+- let tabs = Tabs::new((0.3).map(|i| format!("{i}")).collect());
+// becomes
+ let tabs = Tabs::new((0.3).map(|i| format!("{i}")));
+```
+
+### Table::default() now sets segment_size to None and column_spacing to ([#751])
+
+[#751]: https://github.com/ratatui-org/ratatui/pull/751
+
+The default() implementation of Table now sets the column_spacing field to 1 and the segment_size
+field to `SegmentSize::None`. This will affect the rendering of a small amount of apps.
+
+To use the previous default values, call `table.segment_size(Default::default())` and
+`table.column_spacing(0)`.
+
+### `patch_style` & `reset_style` now consumes and returns `Self` ([#754])
+
+[#754]: https://github.com/ratatui-org/ratatui/pull/754
+
+Previously, `patch_style` and `reset_style` in `Text`, `Line` and `Span` were using a mutable
+reference to `Self`. To be more consistent with the rest of `ratatui`, which is using fluent
+setters, these now take ownership of `Self` and return it.
+
+The following example shows how to migrate for `Line`, but the same applies for `Text` and `Span`.
+
+```diff
+- let mut line = Line::from("foobar");
+- line.patch_style(style);
+// becomes
+ let line = Line::new("foobar").patch_style(style);
+```
+
+### Remove deprecated `Block::title_on_bottom` ([#757])
+
+[#757]: https://github.com/ratatui-org/ratatui/pull/757
+
+`Block::title_on_bottom` was deprecated in v0.22. Use `Block::title` and `Title::position` instead.
+
+```diff
+- block.title("foobar").title_on_bottom();
+ block.title(Title::from("foobar").position(Position::Bottom));
+```
+
+### `Block` style methods cannot be used in a const context ([#720])
+
+[#720]: https://github.com/ratatui-org/ratatui/pull/720
+
+Previously the `style()`, `border_style()` and `title_style()` methods could be used to create a
+`Block` in a constant context. These now accept `Into<Style>` instead of `Style`. These methods no
+longer can be called from a constant context.
+
+### `Line` now has a `style` field that applies to the entire line ([#708])
+
+[#708]: https://github.com/ratatui-org/ratatui/pull/708
+
+Previously the style of a `Line` was stored in the `Span`s that make up the line. Now the `Line`
+itself has a `style` field, which can be set with the `Line::styled` method. Any code that creates
+`Line`s using the struct initializer instead of constructors will fail to compile due to the added
+field. This can be easily fixed by adding `..Default::default()` to the field list or by using a
+constructor method (`Line::styled()`, `Line::raw()`) or conversion method (`Line::from()`).
+
+Each `Span` contained within the line will no longer have the style that is applied to the line in
+the `Span::style` field.
+
+```diff
+  let line = Line {
+      spans: vec!["".into()],
+      alignment: Alignment::Left,
+     ..Default::default()
+  };
+
+  // or
+
+  let line = Line::raw(vec!["".into()])
+      .alignment(Alignment::Left);
+```
+
+## [v0.25.0](https://github.com/ratatui-org/ratatui/releases/tag/v0.25.0)
+
+### Removed `Axis::title_style` and `Buffer::set_background` ([#691])
+
+[#691]: https://github.com/ratatui-org/ratatui/pull/691
+
+These items were deprecated since 0.10.
+
+- You should use styling capabilities of [`text::Line`] given as argument of [`Axis::title`]
+  instead of `Axis::title_style`
+- You should use styling capabilities of [`Buffer::set_style`] instead of `Buffer::set_background`
+
+[`text::Line`]: https://docs.rs/ratatui/latest/ratatui/text/struct.Line.html
+[`Axis::title`]: https://docs.rs/ratatui/latest/ratatui/widgets/struct.Axis.html#method.title
+[`Buffer::set_style`]: https://docs.rs/ratatui/latest/ratatui/buffer/struct.Buffer.html#method.set_style
+
+### `List::new()` now accepts `IntoIterator<Item = Into<ListItem<'a>>>` ([#672])
+
+[#672]: https://github.com/ratatui-org/ratatui/pull/672
+
+Previously `List::new()` took `Into<Vec<ListItem<'a>>>`. This change will throw a compilation
+error for `IntoIterator`s with an indeterminate item (e.g. empty vecs).
+
+E.g.
+
+```diff
+- let list = List::new(vec![]);
+// becomes
+ let list = List::default();
+```
+
+### The default `Tabs::highlight_style` is now `Style::new().reversed()` ([#635])
+
+[#635]: https://github.com/ratatui-org/ratatui/pull/635
+
+Previously the default highlight style for tabs was `Style::default()`, which meant that a `Tabs`
+widget in the default configuration would not show any indication of the selected tab.
+
+### The default `Tabs::highlight_style` is now `Style::new().reversed()` ([#635])
+
+Previously the default highlight style for tabs was `Style::default()`, which meant that a `Tabs`
+widget in the default configuration would not show any indication of the selected tab.
+
+### `Table::new()` now requires specifying the widths of the columns ([#664])
+
+[#664]: https://github.com/ratatui-org/ratatui/pull/664
+
+Previously `Table`s could be constructed without `widths`. In almost all cases this is an error.
+A new `widths` parameter is now mandatory on `Table::new()`. Existing code of the form:
+
+```diff
+- Table::new(rows).widths(widths)
+```
+
+Should be updated to:
+
+```diff
+ Table::new(rows, widths)
+```
+
+For ease of automated replacement in cases where the amount of code broken by this change is large
+or complex, it may be convenient to replace `Table::new` with `Table::default().rows`.
+
+```diff
+- Table::new(rows).block(block).widths(widths);
+// becomes
+ Table::default().rows(rows).widths(widths)
+```
+
+### `Table::widths()` now accepts `IntoIterator<Item = AsRef<Constraint>>` ([#663])
+
+[#663]: https://github.com/ratatui-org/ratatui/pull/663
+
+Previously `Table::widths()` took a slice (`&'a [Constraint]`). This change will introduce clippy
+`needless_borrow` warnings for places where slices are passed to this method. To fix these, remove
+the `&`.
+
+E.g.
+
+```diff
+- let table = Table::new(rows).widths(&[Constraint::Length(1)]);
+// becomes
+ let table = Table::new(rows, [Constraint::Length(1)]);
+```
+
+### Layout::new() now accepts direction and constraint parameters ([#557])
+
+[#557]: https://github.com/ratatui-org/ratatui/pull/557
+
+Previously layout new took no parameters. Existing code should either use `Layout::default()` or
+the new constructor.
+
+```rust
+let layout = layout::new()
+  .direction(Direction::Vertical)
+  .constraints([Constraint::Min(1), Constraint::Max(2)]);
+// becomes either
+let layout = layout::default()
+  .direction(Direction::Vertical)
+  .constraints([Constraint::Min(1), Constraint::Max(2)]);
+// or
+let layout = layout::new(Direction::Vertical, [Constraint::Min(1), Constraint::Max(2)]);
+```
+
+## [v0.24.0](https://github.com/ratatui-org/ratatui/releases/tag/v0.24.0)
+
+### `ScrollbarState` field type changed from `u16` to `usize` ([#456])
+
+[#456]: https://github.com/ratatui-org/ratatui/pull/456
+
+In order to support larger content lengths, the `position`, `content_length` and
+`viewport_content_length` methods on `ScrollbarState` now take `usize` instead of `u16`
+
+### `BorderType::line_symbols` renamed to `border_symbols` ([#529])
+
+[#529]: https://github.com/ratatui-org/ratatui/issues/529
+
+Applications can now set custom borders on a `Block` by calling `border_set()`. The
+`BorderType::line_symbols()` is renamed to `border_symbols()` and now returns a new struct
+`symbols::border::Set`. E.g.:
+
+```diff
+- let line_set: symbols::line::Set = BorderType::line_symbols(BorderType::Plain);
+// becomes
+ let border_set: symbols::border::Set = BorderType::border_symbols(BorderType::Plain);
+```
+
+### Generic `Backend` parameter removed from `Frame` ([#530])
+
+[#530]: https://github.com/ratatui-org/ratatui/issues/530
+
+`Frame` is no longer generic over Backend. Code that accepted `Frame<Backend>` will now need to
+accept `Frame`. To migrate existing code, remove any generic parameters from code that uses an
+instance of a Frame. E.g.:
+
+```diff
+- fn ui<B: Backend>(frame: &mut Frame<B>) { ... }
+// becomes
+ fn ui(frame: Frame) { ... }
+```
+
+### `Stylize` shorthands now consume rather than borrow `String` ([#466])
+
+[#466]: https://github.com/ratatui-org/ratatui/issues/466
+
+In order to support using `Stylize` shorthands (e.g. `"foo".red()`) on temporary `String` values, a
+new implementation of `Stylize` was added that returns a `Span<'static>`. This causes the value to
+be consumed rather than borrowed. Existing code that expects to use the string after a call will no
+longer compile. E.g.
+
+```diff
+- let s = String::new("foo");
+- let span1 = s.red();
+- let span2 = s.blue(); // will no longer compile as s is consumed by the previous line
+// becomes
+ let span1 = s.clone().red();
+ let span2 = s.blue();
+```
+
+### Deprecated `Spans` type removed (replaced with `Line`) ([#426])
+
+[#426]: https://github.com/ratatui-org/ratatui/issues/426
+
+`Spans` was replaced with `Line` in 0.21.0. `Buffer::set_spans` was replaced with
+`Buffer::set_line`.
+
+```diff
+- let spans = Spans::from(some_string_str_span_or_vec_span);
+- buffer.set_spans(0, 0, spans, 10);
+// becomes
+ let line - Line::from(some_string_str_span_or_vec_span);
+ buffer.set_line(0, 0, line, 10);
+```
+
+## [v0.23.0](https://github.com/ratatui-org/ratatui/releases/tag/v0.23.0)
+
+### `Scrollbar::track_symbol()` now takes an `Option<&str>` instead of `&str` ([#360])
+
+[#360]: https://github.com/ratatui-org/ratatui/issues/360
+
+The track symbol of `Scrollbar` is now optional, this method now takes an optional value.
+
+```diff
+- let scrollbar = Scrollbar::default().track_symbol("|");
+// becomes
+ let scrollbar = Scrollbar::default().track_symbol(Some("|"));
+```
+
+### `Scrollbar` symbols moved to `symbols::scrollbar` and `widgets::scrollbar` module is private ([#330])
+
+[#330]: https://github.com/ratatui-org/ratatui/issues/330
+
+The symbols for defining scrollbars have been moved to the `symbols` module from the
+`widgets::scrollbar` module which is no longer public. To update your code update any imports to the
+new module locations. E.g.:
+
+```diff
+- use ratatui::{widgets::scrollbar::{Scrollbar, Set}};
+// becomes
+ use ratatui::{widgets::Scrollbar, symbols::scrollbar::Set}
+```
+
+### MSRV updated to 1.67 ([#361])
+
+[#361]: https://github.com/ratatui-org/ratatui/issues/361
+
+The MSRV of ratatui is now 1.67 due to an MSRV update in a dependency (`time`).
+
+## [v0.22.0](https://github.com/ratatui-org/ratatui/releases/tag/v0.22.0)
+
+### `bitflags` updated to 2.3 ([#205])
+
+[#205]: https://github.com/ratatui-org/ratatui/issues/205
+
+The `serde` representation of `bitflags` has changed. Any existing serialized types that have Borders or
+Modifiers will need to be re-serialized. This is documented in the [`bitflags`
+changelog](https://github.com/bitflags/bitflags/blob/main/CHANGELOG.md#200-rc2)..
+
+## [v0.21.0](https://github.com/ratatui-org/ratatui/releases/tag/v0.21.0)
+
+### MSRV is 1.65.0 ([#171])
+
+[#171]: https://github.com/ratatui-org/ratatui/issues/171
+
+The minimum supported rust version is now 1.65.0.
+
+### `Terminal::with_options()` stabilized to allow configuring the viewport ([#114])
+
+[#114]: https://github.com/ratatui-org/ratatui/issues/114
+
+In order to support inline viewports, the unstable method `Terminal::with_options()` was stabilized
+and `ViewPort` was changed from a struct to an enum.
+
+```diff
+let terminal = Terminal::with_options(backend, TerminalOptions {
+-    viewport: Viewport::fixed(area),
+});
+// becomes
+let terminal = Terminal::with_options(backend, TerminalOptions {
+    viewport: Viewport::Fixed(area),
+});
+```
+
+### Code that binds `Into<Text<'a>>` now requires type annotations ([#168])
+
+[#168]: https://github.com/ratatui-org/ratatui/issues/168
+
+A new type `Masked` was introduced that implements `From<Text<'a>>`. This causes any code that
+previously did not need to use type annotations to fail to compile. To fix this, annotate or call
+`to_string()` / `to_owned()` / `as_str()` on the value. E.g.:
+
+```diff
+- let paragraph = Paragraph::new("".as_ref());
+// becomes
+ let paragraph = Paragraph::new("".as_str());
+```
+
+### `Marker::Block` now renders as a block rather than a bar character ([#133])
+
+[#133]: https://github.com/ratatui-org/ratatui/issues/133
+
+Code using the `Block` marker that previously rendered using a half block character (`'▀'``) now
+renders using the full block character (`'█'`). A new marker variant`Bar` is introduced to replace
+the existing code.
+
+```diff
+- let canvas = Canvas::default().marker(Marker::Block);
+// becomes
+ let canvas = Canvas::default().marker(Marker::Bar);
+```
+
+## [v0.20.0](https://github.com/ratatui-org/ratatui/releases/tag/v0.20.0)
+
+v0.20.0 was the first release of Ratatui - versions prior to this were release as tui-rs. See the
+[Changelog](./CHANGELOG.md) for more details.
+
+### MSRV is update to 1.63.0 ([#80])
+
+[#80]: https://github.com/ratatui-org/ratatui/issues/80
+
+The minimum supported rust version is 1.63.0
+
+### List no longer ignores empty string in items ([#42])
+
+[#42]: https://github.com/ratatui-org/ratatui/issues/42
+
+The following code now renders 3 items instead of 2. Code which relies on the previous behavior will
+need to manually filter empty items prior to display.
+
+```rust
+let items = vec![
+    ListItem::new("line one"),
+    ListItem::new(""),
+    ListItem::new("line four"),
+];
+```
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -0,0 +1,211 @@
+# Contribution guidelines
+
+First off, thank you for considering contributing to Ratatui.
+
+If your contribution is not straightforward, please first discuss the change you wish to make by
+creating a new issue before making the change, or starting a discussion on
+[discord](https://discord.gg/pMCEU9hNEj).
+
+## Reporting issues
+
+Before reporting an issue on the [issue tracker](https://github.com/ratatui-org/ratatui/issues),
+please check that it has not already been reported by searching for some related keywords. Please
+also check [`tui-rs` issues](https://github.com/fdehau/tui-rs/issues/) and link any related issues
+found.
+
+## Pull requests
+
+All contributions are obviously welcome. Please include as many details as possible in your PR
+description to help the reviewer (follow the provided template). Make sure to highlight changes
+which may need additional attention or you are uncertain about. Any idea with a large scale impact
+on the crate or its users should ideally be discussed in a "Feature Request" issue beforehand.
+
+### Keep PRs small, intentional and focused
+
+Try to do one pull request per change. The time taken to review a PR grows exponential with the size
+of the change. Small focused PRs will generally be much more faster to review. PRs that include both
+refactoring (or reformatting) with actual changes are more difficult to review as every line of the
+change becomes a place where a bug may have been introduced. Consider splitting refactoring /
+reformatting changes into a separate PR from those that make a behavioral change, as the tests help
+guarantee that the behavior is unchanged.
+
+### Code formatting
+
+Run `cargo make format` before committing to ensure that code is consistently formatted with
+rustfmt. Configuration is in [rustfmt.toml](./rustfmt.toml).
+
+### Search `tui-rs` for similar work
+
+The original fork of Ratatui, [`tui-rs`](https://github.com/fdehau/tui-rs/), has a large amount of
+history of the project. Please search, read, link, and summarize any relevant
+[issues](https://github.com/fdehau/tui-rs/issues/),
+[discussions](https://github.com/fdehau/tui-rs/discussions/) and [pull
+requests](https://github.com/fdehau/tui-rs/pulls).
+
+### Use conventional commits
+
+We use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) and check for them as
+a lint build step. To help adhere to the format, we recommend to install
+[Commitizen](https://commitizen-tools.github.io/commitizen/). By using this tool you automatically
+follow the configuration defined in [.cz.toml](.cz.toml). Your commit messages should have enough
+information to help someone reading the [CHANGELOG](./CHANGELOG.md) understand what is new just from
+the title. The summary helps expand on that to provide information that helps provide more context,
+describes the nature of the problem that the commit is solving and any unintuitive effects of the
+change. It's rare that code changes can easily communicate intent, so make sure this is clearly
+documented.
+
+### Run CI tests before pushing a PR
+
+Running `cargo make ci` before pushing will perform the same checks that we do in the CI process.
+It's not mandatory to do this before pushing, however it may save you time to do so instead of
+waiting for GitHub to run the checks.
+
+### Sign your commits
+
+We use commit signature verification, which will block commits from being merged via the UI unless
+they are signed. To set up your machine to sign commits, see [managing commit signature
+verification](https://docs.github.com/en/authentication/managing-commit-signature-verification/about-commit-signature-verification)
+in GitHub docs.
+
+## Implementation Guidelines
+
+### Setup
+
+Clone the repo and build it using [cargo-make](https://sagiegurari.github.io/cargo-make/)
+
+Ratatui is an ordinary Rust project where common tasks are managed with
+[cargo-make](https://github.com/sagiegurari/cargo-make/). It wraps common `cargo` commands with sane
+defaults depending on your platform of choice. Building the project should be as easy as running
+`cargo make build`.
+
+```shell
+git clone https://github.com/ratatui-org/ratatui.git
+cd ratatui
+cargo make build
+```
+
+### Tests
+
+The [test coverage](https://app.codecov.io/gh/ratatui-org/ratatui) of the crate is reasonably
+good, but this can always be improved. Focus on keeping the tests simple and obvious and write unit
+tests for all new or modified code. Beside the usual doc and unit tests, one of the most valuable
+test you can write for Ratatui is a test against the `TestBackend`. It allows you to assert the
+content of the output buffer that would have been flushed to the terminal after a given draw call.
+See `widgets_block_renders` in [tests/widgets_block.rs](./tests/widget_block.rs) for an example.
+
+When writing tests, generally prefer to write unit tests and doc tests directly in the code file
+being tested rather than integration tests in the `tests/` folder.
+
+If an area that you're making a change in is not tested, write tests to characterize the existing
+behavior before changing it. This helps ensure that we don't introduce bugs to existing software
+using Ratatui (and helps make it easy to migrate apps still using `tui-rs`).
+
+For coverage, we have two [bacon](https://dystroy.org/bacon/) jobs (one for all tests, and one for
+unit tests, keyboard shortcuts `v` and `u` respectively) that run
+[cargo-llvm-cov](https://github.com/taiki-e/cargo-llvm-cov) to report the coverage. Several plugins
+exist to show coverage directly in your editor. E.g.:
+
+- <https://marketplace.visualstudio.com/items?itemName=ryanluker.vscode-coverage-gutters>
+- <https://github.com/alepez/vim-llvmcov>
+
+### Documentation
+
+Here are some guidelines for writing documentation in Ratatui.
+
+Every public API **must** be documented.
+
+Keep in mind that Ratatui tends to attract beginner Rust users that may not be familiar with Rust
+concepts.
+
+#### Content
+
+The main doc comment should talk about the general features that the widget supports and introduce
+the concepts pointing to the various methods. Focus on interaction with various features and giving
+enough information that helps understand why you might want something.
+
+Examples should help users understand a particular usage, not test a feature. They should be as
+simple as possible. Prefer hiding imports and using wildcards to keep things concise. Some imports
+may still be shown to demonstrate a particular non-obvious import (e.g. `Stylize` trait to use style
+methods). Speaking of `Stylize`, you should use it over the more verbose style setters:
+
+```rust
+let style = Style::new().red().bold();
+// not
+let style = Style::default().fg(Color::Red).add_modifier(Modifiers::BOLD);
+```
+
+#### Format
+
+- First line is summary, second is blank, third onward is more detail
+
+```rust
+/// Summary
+///
+/// A detailed description
+/// with examples.
+fn foo() {}
+```
+
+- Max line length is 100 characters
+See [vscode rewrap extension](https://marketplace.visualstudio.com/items?itemName=stkb.rewrap)
+
+- Doc comments are above macros
+i.e.
+
+```rust
+/// doc comment
+#[derive(Debug)]
+struct Foo {}
+```
+
+- Code items should be between backticks
+i.e. ``[`Block`]``, **NOT** ``[Block]``
+
+### Deprecation notice
+
+We generally want to wait at least two versions before removing deprecated items so users have
+time to update. However, if a deprecation is blocking for us to implement a new feature we may
+*consider* removing it in a one version notice.
+
+### Use of unsafe for optimization purposes
+
+We don't currently use any unsafe code in Ratatui, and would like to keep it that way. However there
+may be specific cases that this becomes necessary in order to avoid slowness. Please see [this
+discussion](https://github.com/ratatui-org/ratatui/discussions/66) for more about the decision.
+
+## Continuous Integration
+
+We use Github Actions for the CI where we perform the following checks:
+
+- The code should compile on `stable` and the Minimum Supported Rust Version (MSRV).
+- The tests (docs, lib, tests and examples) should pass.
+- The code should conform to the default format enforced by `rustfmt`.
+- The code should not contain common style issues `clippy`.
+
+You can also check most of those things yourself locally using `cargo make ci` which will offer you
+a shorter feedback loop than pushing to github.
+
+## Relationship with `tui-rs`
+
+This project was forked from [`tui-rs`](https://github.com/fdehau/tui-rs/) in February 2023, with the
+[blessing of the original author](https://github.com/fdehau/tui-rs/issues/654), Florian Dehau
+([@fdehau](https://github.com/fdehau)).
+
+The original repository contains all the issues, PRs and discussion that were raised originally, and
+it is useful to refer to when contributing code, documentation, or issues with Ratatui.
+
+We imported all the PRs from the original repository and implemented many of the smaller ones and
+made notes on the leftovers. These are marked as draft PRs and labelled as [imported from
+tui](https://github.com/ratatui-org/ratatui/pulls?q=is%3Apr+is%3Aopen+label%3A%22imported+from+tui%22).
+We have documented the current state of those PRs, and anyone is welcome to pick them up and
+continue the work on them.
+
+We have not imported all issues opened on the previous repository. For that reason, anyone wanting
+to **work on or discuss** an issue will have to follow the following workflow:
+
+- Recreate the issue
+- Start by referencing the **original issue**: ```Referencing issue #[<issue number>](<original
+  issue link>)```
+- Then, paste the original issues **opening** text
+
+You can then resume the conversation by replying to this new issue you have created.
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,91 +1,353 @@
 [package]
-name = "tui"
-version = "0.2.2"
-authors = ["Florian Dehau <work@fdehau.com>"]
-description = """
-A library to build rich terminal user interfaces or dashboards
-"""
+name = "ratatui"
+version = "0.26.3" # crate version
+authors = ["Florian Dehau <work@fdehau.com>", "The Ratatui Developers"]
+description = "A library that's all about cooking up terminal user interfaces"
+documentation = "https://docs.rs/ratatui/latest/ratatui/"
+repository = "https://github.com/ratatui-org/ratatui"
+homepage = "https://ratatui.rs"
 keywords = ["tui", "terminal", "dashboard"]
-repository = "https://github.com/fdehau/tui-rs"
+categories = ["command-line-interface"]
+readme = "README.md"
 license = "MIT"
-exclude = ["docs/*", ".travis.yml"]
+exclude = [
+  "assets/*",
+  ".github",
+  "Makefile.toml",
+  "CONTRIBUTING.md",
+  "*.log",
+  "tags",
+]
+autoexamples = true
+edition = "2021"
+rust-version = "1.74.0"

 [badges]
-travis-ci = { repository = "fdehau/tui-rs" }
-
-[features]
-default = ["termion"]

 [dependencies]
-bitflags = "1.0.1"
-cassowary = "0.3.0"
-log = "0.4.1"
-unicode-segmentation = "1.2.0"
-unicode-width = "0.1.4"
-termion = { version = "1.5.1", optional = true }
-rustbox = { version = "0.11.0", optional = true }
+bitflags = "2.3"
+cassowary = "0.3"
+compact_str = "0.7.1"
+crossterm = { version = "0.27", optional = true }
+document-features = { version = "0.2.7", optional = true }
+itertools = "0.12"
+lru = "0.12.0"
+paste = "1.0.2"
+serde = { version = "1", optional = true, features = ["derive"] }
+stability = "0.2.0"
+strum = { version = "0.26", features = ["derive"] }
+termion = { version = "3.0", optional = true }
+termwiz = { version = "0.22.0", optional = true }
+time = { version = "0.3.11", optional = true, features = ["local-offset"] }
+unicode-segmentation = "1.10"
+unicode-truncate = "1"
+unicode-width = "0.1"

 [dev-dependencies]
-stderrlog = "0.3.0"
-rand = "0.4.2"
+anyhow = "1.0.71"
+argh = "0.1.12"
+better-panic = "0.3.0"
+color-eyre = "0.6.2"
+criterion = { version = "0.5.1", features = ["html_reports"] }
+derive_builder = "0.20.0"
+fakeit = "1.1"
+font8x8 = "0.3.1"
+indoc = "2"
+palette = "0.7.3"
+pretty_assertions = "1.4.0"
+rand = "0.8.5"
+rand_chacha = "0.3.1"
+rstest = "0.19.0"
+serde_json = "1.0.109"
+
+[lints.rust]
+unsafe_code = "forbid"
+
+[lints.clippy]
+cargo = { level = "warn", priority = -1 }
+pedantic = { level = "warn", priority = -1 }
+cast_possible_truncation = "allow"
+cast_possible_wrap = "allow"
+cast_precision_loss = "allow"
+cast_sign_loss = "allow"
+missing_errors_doc = "allow"
+missing_panics_doc = "allow"
+module_name_repetitions = "allow"
+must_use_candidate = "allow"
+
+# nursery or restricted
+as_underscore = "warn"
+deref_by_slicing = "warn"
+else_if_without_else = "warn"
+empty_line_after_doc_comments = "warn"
+equatable_if_let = "warn"
+fn_to_numeric_cast_any = "warn"
+format_push_string = "warn"
+map_err_ignore = "warn"
+missing_const_for_fn = "warn"
+mixed_read_write_in_expression = "warn"
+mod_module_files = "warn"
+needless_pass_by_ref_mut = "warn"
+needless_raw_strings = "warn"
+or_fun_call = "warn"
+redundant_type_annotations = "warn"
+rest_pat_in_fully_bound_structs = "warn"
+string_lit_chars_any = "warn"
+string_slice = "warn"
+string_to_string = "warn"
+unnecessary_self_imports = "warn"
+use_self = "warn"
+
+[features]
+#! The crate provides a set of optional features that can be enabled in your `cargo.toml` file.
+#!
+## By default, we enable the crossterm backend as this is a reasonable choice for most applications
+## as it is supported on Linux/Mac/Windows systems. We also enable the `underline-color` feature
+## which allows you to set the underline color of text.
+default = ["crossterm", "underline-color"]
+#! Generally an application will only use one backend, so you should only enable one of the following features:
+## enables the [`CrosstermBackend`](backend::CrosstermBackend) backend and adds a dependency on [`crossterm`].
+crossterm = ["dep:crossterm"]
+## enables the [`TermionBackend`](backend::TermionBackend) backend and adds a dependency on [`termion`].
+termion = ["dep:termion"]
+## enables the [`TermwizBackend`](backend::TermwizBackend) backend and adds a dependency on [`termwiz`].
+termwiz = ["dep:termwiz"]
+
+#! The following optional features are available for all backends:
+## enables serialization and deserialization of style and color types using the [`serde`] crate.
+## This is useful if you want to save themes to a file.
+serde = ["dep:serde", "bitflags/serde", "compact_str/serde"]
+
+## enables the [`border!`] macro.
+macros = []
+
+## enables all widgets.
+all-widgets = ["widget-calendar"]
+
+#! Widgets that add dependencies are gated behind feature flags to prevent unused transitive
+#! dependencies. The available features are:
+## enables the [`calendar`](widgets::calendar) widget module and adds a dependency on [`time`].
+widget-calendar = ["dep:time"]
+
+#! The following optional features are only available for some backends:
+
+## enables the backend code that sets the underline color.
+## Underline color is only supported by the [`CrosstermBackend`](backend::CrosstermBackend) backend,
+## and is not supported on Windows 7.
+underline-color = ["dep:crossterm"]
+
+#! The following features are unstable and may change in the future:
+
+## Enable all unstable features.
+unstable = ["unstable-rendered-line-info", "unstable-widget-ref"]
+
+## Enables the [`Paragraph::line_count`](widgets::Paragraph::line_count)
+## [`Paragraph::line_width`](widgets::Paragraph::line_width) methods
+## which are experimental and may change in the future.
+## See [Issue 293](https://github.com/ratatui-org/ratatui/issues/293) for more details.
+unstable-rendered-line-info = []
+
+## Enables the [`WidgetRef`](widgets::WidgetRef) and [`StatefulWidgetRef`](widgets::StatefulWidgetRef) traits which are experimental and may change in
+## the future.
+unstable-widget-ref = []
+
+[package.metadata.docs.rs]
+all-features = true
+# see https://doc.rust-lang.org/nightly/rustdoc/scraped-examples.html
+cargo-args = ["-Zunstable-options", "-Zrustdoc-scrape-examples"]
+rustdoc-args = ["--cfg", "docsrs"]
+
+# Improve benchmark consistency
+[profile.bench]
+codegen-units = 1
+lto = true
+
+[[bench]]
+name = "barchart"
+harness = false
+
+[[bench]]
+name = "block"
+harness = false
+
+[[bench]]
+name = "line"
+harness = false
+
+[[bench]]
+name = "list"
+harness = false
+
+[lib]
+bench = false
+
+[[bench]]
+name = "paragraph"
+harness = false
+
+[[bench]]
+name = "sparkline"
+harness = false
+

 [[example]]
 name = "barchart"
-path = "examples/barchart.rs"
+required-features = ["crossterm"]
+doc-scrape-examples = true

 [[example]]
 name = "block"
-path = "examples/block.rs"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[example]]
+name = "calendar"
+required-features = ["crossterm", "widget-calendar"]
+doc-scrape-examples = true

 [[example]]
 name = "canvas"
-path = "examples/canvas.rs"
+required-features = ["crossterm"]
+doc-scrape-examples = true

 [[example]]
 name = "chart"
-path = "examples/chart.rs"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[example]]
+name = "colors"
+required-features = ["crossterm"]
+# this example is a bit verbose, so we don't want to include it in the docs
+doc-scrape-examples = false
+
+[[example]]
+name = "colors_rgb"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[example]]
+name = "constraint-explorer"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[example]]
+name = "constraints"
+required-features = ["crossterm"]
+doc-scrape-examples = false

 [[example]]
 name = "custom_widget"
-path = "examples/custom_widget.rs"
+required-features = ["crossterm"]
+doc-scrape-examples = true

 [[example]]
 name = "demo"
-path = "examples/demo.rs"
+# this runs for all of the terminal backends, so it can't be built using --all-features or scraped
+doc-scrape-examples = false
+
+[[example]]
+name = "demo2"
+required-features = ["crossterm", "widget-calendar"]
+doc-scrape-examples = true
+
+[[example]]
+name = "docsrs"
+required-features = ["crossterm"]
+doc-scrape-examples = false
+
+[[example]]
+name = "flex"
+required-features = ["crossterm"]
+doc-scrape-examples = true

 [[example]]
 name = "gauge"
-path = "examples/gauge.rs"
+required-features = ["crossterm"]
+doc-scrape-examples = true

 [[example]]
-name = "list"
-path = "examples/list.rs"
+name = "hello_world"
+required-features = ["crossterm"]
+doc-scrape-examples = true

 [[example]]
-name = "paragraph"
-path = "examples/paragraph.rs"
-
-[[example]]
-name = "rustbox"
-path = "examples/rustbox.rs"
-required-features = ["rustbox"]
-
-[[example]]
-name = "sparkline"
-path = "examples/sparkline.rs"
-
-[[example]]
-name = "table"
-path = "examples/table.rs"
-
-[[example]]
-name = "tabs"
-path = "examples/tabs.rs"
-
-[[example]]
-name = "user_input"
-path = "examples/user_input.rs"
+name = "inline"
+required-features = ["crossterm"]
+doc-scrape-examples = true

 [[example]]
 name = "layout"
-path = "examples/layout.rs"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[example]]
+name = "line_gauge"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[example]]
+name = "list"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[example]]
+name = "minimal"
+required-features = ["crossterm"]
+# prefer to show the more featureful examples in the docs
+doc-scrape-examples = false
+
+[[example]]
+name = "modifiers"
+required-features = ["crossterm"]
+# this example is a bit verbose, so we don't want to include it in the docs
+doc-scrape-examples = false
+
+[[example]]
+name = "panic"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[example]]
+name = "paragraph"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[example]]
+name = "popup"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[example]]
+name = "ratatui-logo"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[example]]
+name = "scrollbar"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[example]]
+name = "sparkline"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[example]]
+name = "table"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[example]]
+name = "tabs"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[example]]
+name = "user_input"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[test]]
+name = "state_serde"
+required-features = ["serde"]
--- a/FUNDING.json
+++ b/FUNDING.json
@@ -0,0 +1,7 @@
+{
+  "drips": {
+    "ethereum": {
+      "ownedBy": "0x6053C8984f4F214Ad12c4653F28514E1E09213B5"
+    }
+  }
+}
--- a/3
+++ b/3
@@ -1,6 +1,7 @@
 The MIT License (MIT)

-Copyright (c) 2016 Florian Dehau
+Copyright (c) 2016-2022 Florian Dehau
+Copyright (c) 2023-2024 The Ratatui Developers

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/111
+++ b/111
@@ -1,111 +0,0 @@
-# Makefile for the tui-rs project (https://github.com/fdehau/tui-rs)
-
-
-# ================================ Cargo ======================================
-
-
-RUST_CHANNEL ?= stable
-CARGO_FLAGS =
-RUSTUP_INSTALLED = $(shell command -v rustup 2> /dev/null)
-
-ifndef RUSTUP_INSTALLED
-  CARGO = cargo
-else
-  ifdef CI
-    CARGO = cargo
-  else
-    CARGO = rustup run $(RUST_CHANNEL) cargo
-  endif
-endif
-
-
-# ================================ Help =======================================
-
-
-help: ## Print all the available commands
-	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | \
-	  awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}'
-
-
-# ================================ Tools ======================================
-
-
-install-tools: install-rustfmt install-clippy ## Install tools dependencies
-
-INSTALL_RUSTFMT = ./scripts/tools/install.sh --name=rustfmt-nightly
-ifndef CI
-  INSTALL_RUSTFMT += --channel=nightly
-endif
-install-rustfmt: ## Intall rustfmt
-	$(INSTALL_RUSTFMT)
-
-INSTALL_CLIPPY = ./scripts/tools/install.sh --name=clippy
-ifndef CI
-  INSTALL_CLIPPY += --channel=nightly
-endif
-install-clippy: ## Intall rustfmt
-	$(INSTALL_CLIPPY)
-
-
-# =============================== Build =======================================
-
-check: ## Validate the project code
-	$(CARGO) check
-
-build: ## Build the project in debug mode
-	$(CARGO) build $(CARGO_FLAGS)
-
-release: CARGO_FLAGS += --release
-release: build ## Build the project in release mode
-
-
-# ================================ Lint =======================================
-
-RUSTFMT_WRITEMODE ?= 'diff'
-
-lint: fmt clippy ## Lint project files
-
-fmt: ## Check the format of the source code
-	cargo fmt -- --write-mode=$(RUSTFMT_WRITEMODE)
-
-clippy: RUST_CHANNEL = nightly
-clippy: ## Check the style of the source code and catch common errors
-	$(CARGO) clippy --features="termion rustbox"
-
-
-# ================================ Test =======================================
-
-
-test: ## Run the tests
-	$(CARGO) test
-
-# ================================ Doc ========================================
-
-
-doc: ## Build the documentation (available at ./target/doc)
-	$(CARGO) doc
-
-
-# ================================= Watch =====================================
-
-# Requires watchman and watchman-make (https://facebook.github.io/watchman/docs/install.html)
-
-watch: ## Watch file changes and build the project if any
-	watchman-make -p 'src/**/*.rs' -t check build
-
-watch-test: ## Watch files changes and run the tests if any
-	watchman-make -p 'src/**/*.rs' 'tests/**/*.rs' 'examples/**/*.rs' -t test
-
-watch-doc: ## Watch file changes and rebuild the documentation if any
-	watchman-make -p 'src/**/*.rs' -t doc
-
-# ================================= Pipelines =================================
-
-stable: RUST_CHANNEL = stable
-stable: build test ## Run build and tests for stable
-
-beta: RUST_CHANNEL = beta
-beta: build test ## Run build and tests for beta
-
-nightly: RUST_CHANNEL = nightly
-nightly: install-tools build lint test ## Run build, lint and tests for nightly
--- a/Makefile.toml
+++ b/Makefile.toml
@@ -0,0 +1,175 @@
+# configuration for https://github.com/sagiegurari/cargo-make
+
+[config]
+skip_core_tasks = true
+
+[env]
+# all features except the backend ones
+ALL_FEATURES = "all-widgets,macros,serde"
+
+[env.ALL_FEATURES_FLAG]
+# Windows does not support building termion, so this avoids the build failure by providing two
+# sets of flags, one for Windows and one for other platforms.
+source = "${CARGO_MAKE_RUST_TARGET_OS}"
+default_value = "--features=all-widgets,macros,serde,crossterm,termion,termwiz,underline-color,unstable"
+mapping = { "windows" = "--features=all-widgets,macros,serde,crossterm,termwiz,underline-color,unstable" }
+
+[tasks.default]
+alias = "ci"
+
+[tasks.ci]
+description = "Run continuous integration tasks"
+dependencies = ["lint-style", "clippy", "check", "test"]
+
+[tasks.lint-style]
+description = "Lint code style (formatting, typos, docs)"
+dependencies = ["lint-format", "lint-typos", "lint-docs"]
+
+[tasks.lint-format]
+description = "Lint code formatting"
+toolchain = "nightly"
+command = "cargo"
+args = ["fmt", "--all", "--check"]
+
+[tasks.format]
+description = "Fix code formatting"
+toolchain = "nightly"
+command = "cargo"
+args = ["fmt", "--all"]
+
+[tasks.lint-typos]
+description = "Run typo checks"
+install_crate = { crate_name = "typos-cli", binary = "typos", test_arg = "--version" }
+command = "typos"
+
+[tasks.lint-docs]
+description = "Check documentation for errors and warnings"
+toolchain = "nightly"
+command = "cargo"
+args = [
+  "rustdoc",
+  "--no-default-features",
+  "${ALL_FEATURES_FLAG}",
+  "--",
+  "-Zunstable-options",
+  "--check",
+  "-Dwarnings",
+]
+
+[tasks.check]
+description = "Check code for errors and warnings"
+command = "cargo"
+args = [
+  "check",
+  "--all-targets",
+  "--no-default-features",
+  "${ALL_FEATURES_FLAG}",
+]
+
+[tasks.build]
+description = "Compile the project"
+command = "cargo"
+args = [
+  "build",
+  "--all-targets",
+  "--no-default-features",
+  "${ALL_FEATURES_FLAG}",
+]
+
+[tasks.clippy]
+description = "Run Clippy for linting"
+command = "cargo"
+args = [
+  "clippy",
+  "--all-targets",
+  "--tests",
+  "--benches",
+  "--no-default-features",
+  "${ALL_FEATURES_FLAG}",
+  "--",
+  "-D",
+  "warnings",
+]
+
+[tasks.install-nextest]
+description = "Install cargo-nextest"
+install_crate = { crate_name = "cargo-nextest", binary = "cargo-nextest", test_arg = "--help" }
+
+[tasks.test]
+description = "Run tests"
+run_task = { name = ["test-lib", "test-doc"] }
+
+[tasks.test-lib]
+description = "Run default tests"
+dependencies = ["install-nextest"]
+command = "cargo"
+args = [
+  "nextest",
+  "run",
+  "--all-targets",
+  "--no-default-features",
+  "${ALL_FEATURES_FLAG}",
+]
+
+[tasks.test-doc]
+description = "Run documentation tests"
+command = "cargo"
+args = ["test", "--doc", "--no-default-features", "${ALL_FEATURES_FLAG}"]
+
+[tasks.test-backend]
+# takes a command line parameter to specify the backend to test (e.g. "crossterm")
+description = "Run backend-specific tests"
+dependencies = ["install-nextest"]
+command = "cargo"
+args = [
+  "nextest",
+  "run",
+  "--all-targets",
+  "--no-default-features",
+  "--features",
+  "${ALL_FEATURES},${@}",
+]
+
+[tasks.coverage]
+description = "Generate code coverage report"
+command = "cargo"
+args = [
+  "llvm-cov",
+  "--lcov",
+  "--output-path",
+  "target/lcov.info",
+  "--no-default-features",
+  "${ALL_FEATURES_FLAG}",
+]
+
+[tasks.run-example]
+private = true
+condition = { env_set = ["TUI_EXAMPLE_NAME"] }
+command = "cargo"
+args = [
+  "run",
+  "--release",
+  "--example",
+  "${TUI_EXAMPLE_NAME}",
+  "--features",
+  "all-widgets",
+]
+
+[tasks.build-examples]
+description = "Compile project examples"
+command = "cargo"
+args = ["build", "--examples", "--release", "--features", "all-widgets"]
+
+[tasks.run-examples]
+description = "Run project examples"
+dependencies = ["build-examples"]
+script = '''
+#!@duckscript
+files = glob_array ./examples/*.rs
+for file in ${files}
+  name = basename ${file}
+  name = substring ${name} -3
+  set_env TUI_EXAMPLE_NAME ${name}
+  cm_run_task run-example
+end
+'''
--- a/README.md
+++ b/README.md
@@ -1,63 +1,442 @@
-# tui-rs
+<details>
+<summary>Table of Contents</summary>

-[![Build Status](https://travis-ci.org/fdehau/tui-rs.svg?branch=master)](https://travis-ci.org/fdehau/tui-rs)
-[![Crate Status](https://img.shields.io/crates/v/tui.svg)](https://crates.io/crates/tui)
-[![Docs Status](https://docs.rs/tui/badge.svg)](https://docs.rs/crate/tui/)
+- [Ratatui](#ratatui)
+  - [Installation](#installation)
+  - [Introduction](#introduction)
+  - [Other Documentation](#other-documentation)
+  - [Quickstart](#quickstart)
+  - [Status of this fork](#status-of-this-fork)
+  - [Rust version requirements](#rust-version-requirements)
+  - [Widgets](#widgets)
+    - [Built in](#built-in)
+    - [Third\-party libraries, bootstrapping templates and
+      widgets](#third-party-libraries-bootstrapping-templates-and-widgets)
+  - [Apps](#apps)
+  - [Alternatives](#alternatives)
+  - [Acknowledgments](#acknowledgments)
+  - [License](#license)

-<img src="./docs/demo.gif" alt="Demo cast under Linux Termite with Inconsolata font 12pt">
+</details>

-`tui-rs` is a [Rust](https://www.rust-lang.org) library to build rich terminal
-user interfaces and dashboards. It is heavily inspired by the `Javascript`
-library [blessed-contrib](https://github.com/yaronn/blessed-contrib) and the
-`Go` library [termui](https://github.com/gizak/termui).
+<!-- cargo-rdme start -->

-The library itself supports two different backends to draw to the terminal. You
-can either choose from:
+![Demo](https://github.com/ratatui-org/ratatui/blob/1d39444e3dea6f309cf9035be2417ac711c1abc9/examples/demo2-destroy.gif?raw=true)

-  - [termion](https://github.com/ticki/termion)
-  - [rustbox](https://github.com/gchp/rustbox)
+<div align="center">

-However, some features may only be available in one of the two.
+[![Crate Badge]][Crate] [![Docs Badge]][API Docs] [![CI Badge]][CI Workflow] [![License
+Badge]](./LICENSE) [![Sponsors Badge]][GitHub Sponsors]<br>
+[![Codecov Badge]][Codecov] [![Deps.rs Badge]][Deps.rs] [![Discord Badge]][Discord Server]
+[![Matrix Badge]][Matrix]<br>

-The library is based on the principle of immediate rendering with intermediate
-buffers. This means that at each new frame you should build all widgets that are
-supposed to be part of the UI. While providing a great flexibility for rich and
-interactive UI, this may introduce overhead for highly dynamic content. So, the
-implementation try to minimize the number of ansi escapes sequences generated to
-draw the updated UI. In practice, given the speed of `Rust` the overhead rather
-comes from the terminal emulator than the library itself.
+[Ratatui Website] · [API Docs] · [Examples] · [Changelog] · [Breaking Changes]<br>
+[Contributing] · [Report a bug] · [Request a Feature] · [Create a Pull Request]

-Moreover, the library does not provide any input handling nor any event system and
-you may rely on the previously cited libraries to achieve such features.
+</div>

-### [Documentation](https://docs.rs/tui)
+# Ratatui

-### Widgets
+[Ratatui][Ratatui Website] is a crate for cooking up terminal user interfaces in Rust. It is a
+lightweight library that provides a set of widgets and utilities to build complex Rust TUIs.
+Ratatui was forked from the [tui-rs] crate in 2023 in order to continue its development.

-The library comes with the following list of widgets:
+## Installation

-  * [Block](examples/block.rs)
-  * [Gauge](examples/gauge.rs)
-  * [Sparkline](examples/sparkline.rs)
-  * [Chart](examples/chart.rs)
-  * [BarChart](examples/bar_chart.rs)
-  * [List](examples/list.rs)
-  * [Table](examples/table.rs)
-  * [Paragraph](examples/paragraph.rs)
-  * [Canvas (with line, point cloud, map)](examples/canvas.rs)
-  * [Tabs](examples/tabs.rs)
+Add `ratatui` as a dependency to your cargo.toml:

-Click on each item to see the source of the example. Run the examples with with 
-cargo (e.g. to run the demo `cargo run --example demo`), and quit by pressing `q`.
+```shell
+cargo add ratatui
+```

-### Demo
+Ratatui uses [Crossterm] by default as it works on most platforms. See the [Installation]
+section of the [Ratatui Website] for more details on how to use other backends ([Termion] /
+[Termwiz]).

-The [source code](examples/demo.rs) of the demo gif.
+## Introduction
+
+Ratatui is based on the principle of immediate rendering with intermediate buffers. This means
+that for each frame, your app must render all widgets that are supposed to be part of the UI.
+This is in contrast to the retained mode style of rendering where widgets are updated and then
+automatically redrawn on the next frame. See the [Rendering] section of the [Ratatui Website]
+for more info.
+
+You can also watch the [FOSDEM 2024 talk] about Ratatui which gives a brief introduction to
+terminal user interfaces and showcases the features of Ratatui, along with a hello world demo.
+
+## Other documentation
+
+- [Ratatui Website] - explains the library's concepts and provides step-by-step tutorials
+- [API Docs] - the full API documentation for the library on docs.rs.
+- [Examples] - a collection of examples that demonstrate how to use the library.
+- [Contributing] - Please read this if you are interested in contributing to the project.
+- [Changelog] - generated by [git-cliff] utilizing [Conventional Commits].
+- [Breaking Changes] - a list of breaking changes in the library.
+
+## Quickstart
+
+The following example demonstrates the minimal amount of code necessary to setup a terminal and
+render "Hello World!". The full code for this example which contains a little more detail is in
+the [Examples] directory. For more guidance on different ways to structure your application see
+the [Application Patterns] and [Hello World tutorial] sections in the [Ratatui Website] and the
+various [Examples]. There are also several starter templates available in the [templates]
+repository.
+
+Every application built with `ratatui` needs to implement the following steps:
+
+- Initialize the terminal
+- A main loop to:
+  - Handle input events
+  - Draw the UI
+- Restore the terminal state
+
+The library contains a [`prelude`] module that re-exports the most commonly used traits and
+types for convenience. Most examples in the documentation will use this instead of showing the
+full path of each type.
+
+### Initialize and restore the terminal
+
+The [`Terminal`] type is the main entry point for any Ratatui application. It is a light
+abstraction over a choice of [`Backend`] implementations that provides functionality to draw
+each frame, clear the screen, hide the cursor, etc. It is parametrized over any type that
+implements the [`Backend`] trait which has implementations for [Crossterm], [Termion] and
+[Termwiz].
+
+Most applications should enter the Alternate Screen when starting and leave it when exiting and
+also enable raw mode to disable line buffering and enable reading key events. See the [`backend`
+module] and the [Backends] section of the [Ratatui Website] for more info.
+
+### Drawing the UI
+
+The drawing logic is delegated to a closure that takes a [`Frame`] instance as argument. The
+[`Frame`] provides the size of the area to draw to and allows the app to render any [`Widget`]
+using the provided [`render_widget`] method. After this closure returns, a diff is performed and
+only the changes are drawn to the terminal. See the [Widgets] section of the [Ratatui Website]
+for more info.
+
+### Handling events
+
+Ratatui does not include any input handling. Instead event handling can be implemented by
+calling backend library methods directly. See the [Handling Events] section of the [Ratatui
+Website] for more info. For example, if you are using [Crossterm], you can use the
+[`crossterm::event`] module to handle events.
+
+### Example
+
+```rust
+use std::io::{self, stdout};
+
+use ratatui::{
+    crossterm::{
+        event::{self, Event, KeyCode},
+        terminal::{
+            disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen,
+        },
+        ExecutableCommand,
+    },
+    prelude::*,
+    widgets::*,
+};
+
+fn main() -> io::Result<()> {
+    enable_raw_mode()?;
+    stdout().execute(EnterAlternateScreen)?;
+    let mut terminal = Terminal::new(CrosstermBackend::new(stdout()))?;
+
+    let mut should_quit = false;
+    while !should_quit {
+        terminal.draw(ui)?;
+        should_quit = handle_events()?;
+    }
+
+    disable_raw_mode()?;
+    stdout().execute(LeaveAlternateScreen)?;
+    Ok(())
+}
+
+fn handle_events() -> io::Result<bool> {
+    if event::poll(std::time::Duration::from_millis(50))? {
+        if let Event::Key(key) = event::read()? {
+            if key.kind == event::KeyEventKind::Press && key.code == KeyCode::Char('q') {
+                return Ok(true);
+            }
+        }
+    }
+    Ok(false)
+}
+
+fn ui(frame: &mut Frame) {
+    frame.render_widget(
+        Paragraph::new("Hello World!").block(Block::bordered().title("Greeting")),
+        frame.size(),
+    );
+}
+```
+
+Running this example produces the following output:
+
+![docsrs-hello]
+
+## Layout
+
+The library comes with a basic yet useful layout management object called [`Layout`] which
+allows you to split the available space into multiple areas and then render widgets in each
+area. This lets you describe a responsive terminal UI by nesting layouts. See the [Layout]
+section of the [Ratatui Website] for more info.
+
+```rust
+use ratatui::{prelude::*, widgets::*};
+
+fn ui(frame: &mut Frame) {
+    let main_layout = Layout::new(
+        Direction::Vertical,
+        [
+            Constraint::Length(1),
+            Constraint::Min(0),
+            Constraint::Length(1),
+        ],
+    )
+    .split(frame.size());
+    frame.render_widget(
+        Block::new().borders(Borders::TOP).title("Title Bar"),
+        main_layout[0],
+    );
+    frame.render_widget(
+        Block::new().borders(Borders::TOP).title("Status Bar"),
+        main_layout[2],
+    );
+
+    let inner_layout = Layout::new(
+        Direction::Horizontal,
+        [Constraint::Percentage(50), Constraint::Percentage(50)],
+    )
+    .split(main_layout[1]);
+    frame.render_widget(Block::bordered().title("Left"), inner_layout[0]);
+    frame.render_widget(Block::bordered().title("Right"), inner_layout[1]);
+}
+```
+
+Running this example produces the following output:
+
+![docsrs-layout]
+
+## Text and styling
+
+The [`Text`], [`Line`] and [`Span`] types are the building blocks of the library and are used in
+many places. [`Text`] is a list of [`Line`]s and a [`Line`] is a list of [`Span`]s. A [`Span`]
+is a string with a specific style.
+
+The [`style` module] provides types that represent the various styling options. The most
+important one is [`Style`] which represents the foreground and background colors and the text
+attributes of a [`Span`]. The [`style` module] also provides a [`Stylize`] trait that allows
+short-hand syntax to apply a style to widgets and text. See the [Styling Text] section of the
+[Ratatui Website] for more info.
+
+```rust
+use ratatui::{prelude::*, widgets::*};
+
+fn ui(frame: &mut Frame) {
+    let areas = Layout::new(
+        Direction::Vertical,
+        [
+            Constraint::Length(1),
+            Constraint::Length(1),
+            Constraint::Length(1),
+            Constraint::Length(1),
+            Constraint::Min(0),
+        ],
+    )
+    .split(frame.size());
+
+    let span1 = Span::raw("Hello ");
+    let span2 = Span::styled(
+        "World",
+        Style::new()
+            .fg(Color::Green)
+            .bg(Color::White)
+            .add_modifier(Modifier::BOLD),
+    );
+    let span3 = "!".red().on_light_yellow().italic();
+
+    let line = Line::from(vec![span1, span2, span3]);
+    let text: Text = Text::from(vec![line]);
+
+    frame.render_widget(Paragraph::new(text), areas[0]);
+    // or using the short-hand syntax and implicit conversions
+    frame.render_widget(
+        Paragraph::new("Hello World!".red().on_white().bold()),
+        areas[1],
+    );
+
+    // to style the whole widget instead of just the text
+    frame.render_widget(
+        Paragraph::new("Hello World!").style(Style::new().red().on_white()),
+        areas[2],
+    );
+    // or using the short-hand syntax
+    frame.render_widget(Paragraph::new("Hello World!").blue().on_yellow(), areas[3]);
+}
+```
+
+Running this example produces the following output:
+
+![docsrs-styling]
+
+[Ratatui Website]: https://ratatui.rs/
+[Installation]: https://ratatui.rs/installation/
+[Rendering]: https://ratatui.rs/concepts/rendering/
+[Application Patterns]: https://ratatui.rs/concepts/application-patterns/
+[Hello World tutorial]: https://ratatui.rs/tutorials/hello-world/
+[Backends]: https://ratatui.rs/concepts/backends/
+[Widgets]: https://ratatui.rs/how-to/widgets/
+[Handling Events]: https://ratatui.rs/concepts/event-handling/
+[Layout]: https://ratatui.rs/how-to/layout/
+[Styling Text]: https://ratatui.rs/how-to/render/style-text/
+[templates]: https://github.com/ratatui-org/templates/
+[Examples]: https://github.com/ratatui-org/ratatui/tree/main/examples/README.md
+[Report a bug]: https://github.com/ratatui-org/ratatui/issues/new?labels=bug&projects=&template=bug_report.md
+[Request a Feature]: https://github.com/ratatui-org/ratatui/issues/new?labels=enhancement&projects=&template=feature_request.md
+[Create a Pull Request]: https://github.com/ratatui-org/ratatui/compare
+[git-cliff]: https://git-cliff.org
+[Conventional Commits]: https://www.conventionalcommits.org
+[API Docs]: https://docs.rs/ratatui
+[Changelog]: https://github.com/ratatui-org/ratatui/blob/main/CHANGELOG.md
+[Contributing]: https://github.com/ratatui-org/ratatui/blob/main/CONTRIBUTING.md
+[Breaking Changes]: https://github.com/ratatui-org/ratatui/blob/main/BREAKING-CHANGES.md
+[FOSDEM 2024 talk]: https://www.youtube.com/watch?v=NU0q6NOLJ20
+[docsrs-hello]: https://github.com/ratatui-org/ratatui/blob/c3c3c289b1eb8d562afb1931adb4dc719cd48490/examples/docsrs-hello.png?raw=true
+[docsrs-layout]: https://github.com/ratatui-org/ratatui/blob/c3c3c289b1eb8d562afb1931adb4dc719cd48490/examples/docsrs-layout.png?raw=true
+[docsrs-styling]: https://github.com/ratatui-org/ratatui/blob/c3c3c289b1eb8d562afb1931adb4dc719cd48490/examples/docsrs-styling.png?raw=true
+[`Frame`]: terminal::Frame
+[`render_widget`]: terminal::Frame::render_widget
+[`Widget`]: widgets::Widget
+[`Layout`]: layout::Layout
+[`Text`]: text::Text
+[`Line`]: text::Line
+[`Span`]: text::Span
+[`Style`]: style::Style
+[`style` module]: style
+[`Stylize`]: style::Stylize
+[`Backend`]: backend::Backend
+[`backend` module]: backend
+[`crossterm::event`]: https://docs.rs/crossterm/latest/crossterm/event/index.html
+[Crate]: https://crates.io/crates/ratatui
+[Crossterm]: https://crates.io/crates/crossterm
+[Termion]: https://crates.io/crates/termion
+[Termwiz]: https://crates.io/crates/termwiz
+[tui-rs]: https://crates.io/crates/tui
+[GitHub Sponsors]: https://github.com/sponsors/ratatui-org
+[Crate Badge]: https://img.shields.io/crates/v/ratatui?logo=rust&style=flat-square&logoColor=E05D44&color=E05D44
+[License Badge]: https://img.shields.io/crates/l/ratatui?style=flat-square&color=1370D3
+[CI Badge]: https://img.shields.io/github/actions/workflow/status/ratatui-org/ratatui/ci.yml?style=flat-square&logo=github
+[CI Workflow]: https://github.com/ratatui-org/ratatui/actions/workflows/ci.yml
+[Codecov Badge]: https://img.shields.io/codecov/c/github/ratatui-org/ratatui?logo=codecov&style=flat-square&token=BAQ8SOKEST&color=C43AC3&logoColor=C43AC3
+[Codecov]: https://app.codecov.io/gh/ratatui-org/ratatui
+[Deps.rs Badge]: https://deps.rs/repo/github/ratatui-org/ratatui/status.svg?style=flat-square
+[Deps.rs]: https://deps.rs/repo/github/ratatui-org/ratatui
+[Discord Badge]: https://img.shields.io/discord/1070692720437383208?label=discord&logo=discord&style=flat-square&color=1370D3&logoColor=1370D3
+[Discord Server]: https://discord.gg/pMCEU9hNEj
+[Docs Badge]: https://img.shields.io/docsrs/ratatui?logo=rust&style=flat-square&logoColor=E05D44
+[Matrix Badge]: https://img.shields.io/matrix/ratatui-general%3Amatrix.org?style=flat-square&logo=matrix&label=Matrix&color=C43AC3
+[Matrix]: https://matrix.to/#/#ratatui:matrix.org
+[Sponsors Badge]: https://img.shields.io/github/sponsors/ratatui-org?logo=github&style=flat-square&color=1370D3
+
+<!-- cargo-rdme end -->
+
+## Status of this fork
+
+In response to the original maintainer [**Florian Dehau**](https://github.com/fdehau)'s issue
+regarding the [future of `tui-rs`](https://github.com/fdehau/tui-rs/issues/654), several members of
+the community forked the project and created this crate. We look forward to continuing the work
+started by Florian 🚀
+
+In order to organize ourselves, we currently use a [Discord server](https://discord.gg/pMCEU9hNEj),
+feel free to join and come chat! There is also a [Matrix](https://matrix.org/) bridge available at
+[#ratatui:matrix.org](https://matrix.to/#/#ratatui:matrix.org).
+
+While we do utilize Discord for coordinating, it's not essential for contributing.
+Our primary open-source workflow is centered around GitHub.
+For significant discussions, we rely on GitHub — please open an issue, a discussion or a PR.
+
+Please make sure you read the updated [contributing](./CONTRIBUTING.md) guidelines, especially if
+you are interested in working on a PR or issue opened in the previous repository.
+
+## Rust version requirements
+
+Since version 0.23.0, The Minimum Supported Rust Version (MSRV) of `ratatui` is 1.67.0.
+
+## Widgets
+
+### Built in
+
+The library comes with the following
+[widgets](https://docs.rs/ratatui/latest/ratatui/widgets/index.html):
+
+- [BarChart](https://docs.rs/ratatui/latest/ratatui/widgets/struct.BarChart.html)
+- [Block](https://docs.rs/ratatui/latest/ratatui/widgets/block/struct.Block.html)
+- [Calendar](https://docs.rs/ratatui/latest/ratatui/widgets/calendar/index.html)
+- [Canvas](https://docs.rs/ratatui/latest/ratatui/widgets/canvas/struct.Canvas.html) which allows
+  rendering [points, lines, shapes and a world
+  map](https://docs.rs/ratatui/latest/ratatui/widgets/canvas/index.html)
+- [Chart](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Chart.html)
+- [Clear](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Clear.html)
+- [Gauge](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Gauge.html)
+- [List](https://docs.rs/ratatui/latest/ratatui/widgets/struct.List.html)
+- [Paragraph](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Paragraph.html)
+- [Scrollbar](https://docs.rs/ratatui/latest/ratatui/widgets/scrollbar/struct.Scrollbar.html)
+- [Sparkline](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Sparkline.html)
+- [Table](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Table.html)
+- [Tabs](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Tabs.html)
+
+Each widget has an associated example which can be found in the [Examples] folder. Run each example
+with cargo (e.g. to run the gauge example `cargo run --example gauge`), and quit by pressing `q`.
+
+You can also run all examples by running `cargo make run-examples` (requires `cargo-make` that can
+be installed with `cargo install cargo-make`).
+
+### Third-party libraries, bootstrapping templates and widgets
+
+- [ansi-to-tui](https://github.com/uttarayan21/ansi-to-tui) — Convert ansi colored text to
+  `ratatui::text::Text`
+- [color-to-tui](https://github.com/uttarayan21/color-to-tui) — Parse hex colors to
+  `ratatui::style::Color`
+- [templates](https://github.com/ratatui-org/templates) — Starter templates for
+  bootstrapping a Rust TUI application with Ratatui & crossterm
+- [tui-builder](https://github.com/jkelleyrtp/tui-builder) — Batteries-included MVC framework for
+  Tui-rs + Crossterm apps
+- [tui-clap](https://github.com/kegesch/tui-clap-rs) — Use clap-rs together with Tui-rs
+- [tui-log](https://github.com/kegesch/tui-log-rs) — Example of how to use logging with Tui-rs
+- [tui-logger](https://github.com/gin66/tui-logger) — Logger and Widget for Tui-rs
+- [tui-realm](https://github.com/veeso/tui-realm) — Tui-rs framework to build stateful applications
+  with a React/Elm inspired approach
+- [tui-realm-treeview](https://github.com/veeso/tui-realm-treeview) — Treeview component for
+  Tui-realm
+- [tui-rs-tree-widgets](https://github.com/EdJoPaTo/tui-rs-tree-widget) — Widget for tree data
+  structures.
+- [tui-windows](https://github.com/markatk/tui-windows-rs) — Tui-rs abstraction to handle multiple
+  windows and their rendering
+- [tui-textarea](https://github.com/rhysd/tui-textarea) — Simple yet powerful multi-line text editor
+  widget supporting several key shortcuts, undo/redo, text search, etc.
+- [tui-input](https://github.com/sayanarijit/tui-input) — TUI input library supporting multiple
+  backends and tui-rs.
+- [tui-term](https://github.com/a-kenji/tui-term) — A pseudoterminal widget library
+  that enables the rendering of terminal applications as ratatui widgets.
+
+## Apps
+
+Check out [awesome-ratatui](https://github.com/ratatui-org/awesome-ratatui) for a curated list of
+awesome apps/libraries built with `ratatui`!
+
+## Alternatives
+
+You might want to checkout [Cursive](https://github.com/gyscos/Cursive) for an alternative solution
+to build text user interfaces in Rust.
+
+## Acknowledgments
+
+Special thanks to [**Pavel Fomchenkov**](https://github.com/nawok) for his work in designing **an
+awesome logo** for the ratatui project and ratatui-org organization.

 ## License

-[MIT](LICENSE)
-
-## Author
-
-Florian Dehau
+[MIT](./LICENSE)
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -0,0 +1,44 @@
+# Creating a Release
+
+[crates.io](https://crates.io/crates/ratatui) releases are automated via [GitHub
+actions](.github/workflows/cd.yml) and triggered by pushing a tag.
+
+1. Record a new demo gif if necessary. The preferred tool for this is
+[vhs](https://github.com/charmbracelet/vhs) (installation instructions in README).
+
+   ```shell
+   cargo build --example demo2
+   vhs examples/demo2.tape
+   ```
+
+1. Switch branches to the images branch and copy demo2.gif to examples/, commit, and push.
+1. Grab the permalink from <https://github.com/ratatui-org/ratatui/blob/images/examples/demo2.gif> and
+   append `?raw=true` to redirect to the actual image url. Then update the link in the main README.
+   Avoid adding the gif to the git repo as binary files tend to bloat repositories.
+
+1. Bump the version in [Cargo.toml](Cargo.toml).
+1. Ensure [CHANGELOG.md](CHANGELOG.md) is updated. [git-cliff](https://github.com/orhun/git-cliff)
+   can be used for generating the entries.
+1. Ensure that any breaking changes are documented in [BREAKING-CHANGES.md](./BREAKING-CHANGES.md)
+1. Commit and push the changes.
+1. Create a new tag: `git tag -a v[X.Y.Z]`
+1. Push the tag: `git push --tags`
+1. Wait for [Continuous Deployment](https://github.com/ratatui-org/ratatui/actions) workflow to
+   finish.
+
+## Alpha Releases
+
+Alpha releases are automatically released every Saturday via [cd.yml](./.github/workflows/cd.yml)
+and can be manually be created when necessary by triggering the [Continuous
+Deployment](https://github.com/ratatui-org/ratatui/actions/workflows/cd.yml) workflow.
+
+We automatically release an alpha release with a patch level bump + alpha.num weekly (and when we
+need to manually). E.g. the last release was 0.22.0, and the most recent alpha release is
+0.22.1-alpha.1.
+
+These releases will have whatever happened to be in main at the time of release, so they're useful
+for apps that need to get releases from crates.io, but may contain more bugs and be generally less
+tested than normal releases.
+
+See [#147](https://github.com/ratatui-org/ratatui/issues/147) and
+[#359](https://github.com/ratatui-org/ratatui/pull/359) for more info on the alpha release process.
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -0,0 +1,9 @@
+# Security Policy
+
+## Supported Versions
+
+We only support the latest version of this crate.
+
+## Reporting a Vulnerability
+
+To report secuirity vulnerability, please use the form at https://github.com/ratatui-org/ratatui/security/advisories/new
--- a/assets/favicon.ico
+++ b/assets/favicon.ico
--- a/assets/logo.png
+++ b/assets/logo.png
--- a/bacon.toml
+++ b/bacon.toml
@@ -0,0 +1,112 @@
+# This is a configuration file for the bacon tool
+#
+# Bacon repository: https://github.com/Canop/bacon
+# Complete help on configuration: https://dystroy.org/bacon/config/
+# You can also check bacon's own bacon.toml file
+#  as an example: https://github.com/Canop/bacon/blob/main/bacon.toml
+
+default_job = "check"
+
+[jobs.check]
+command = ["cargo", "check", "--all-features", "--color", "always"]
+need_stdout = false
+
+[jobs.check-all]
+command = ["cargo", "check", "--all-targets", "--all-features", "--color", "always"]
+need_stdout = false
+
+[jobs.check-crossterm]
+command = ["cargo", "check", "--color", "always", "--all-targets", "--no-default-features", "--features", "crossterm"]
+need_stdout = false
+
+[jobs.check-termion]
+command = ["cargo", "check", "--color", "always", "--all-targets", "--no-default-features", "--features", "termion"]
+need_stdout = false
+
+[jobs.check-termwiz]
+command = ["cargo", "check", "--color", "always", "--all-targets", "--no-default-features", "--features", "termwiz"]
+need_stdout = false
+
+[jobs.clippy]
+command = [
+    "cargo", "clippy",
+    "--all-targets",
+    "--color", "always",
+]
+need_stdout = false
+
+[jobs.test]
+command = [
+    "cargo", "test",
+    "--all-features",
+    "--color", "always",
+    "--", "--color", "always", # see https://github.com/Canop/bacon/issues/124
+]
+need_stdout = true
+
+[jobs.test-unit]
+command = [
+    "cargo", "test",
+    "--lib",
+    "--all-features",
+    "--color", "always",
+    "--", "--color", "always", # see https://github.com/Canop/bacon/issues/124
+]
+need_stdout = true
+
+[jobs.doc]
+command = [
+    "cargo", "+nightly", "doc",
+    "-Zunstable-options", "-Zrustdoc-scrape-examples",
+    "--all-features",
+    "--color", "always",
+    "--no-deps",
+]
+env.RUSTDOCFLAGS = "--cfg docsrs"
+need_stdout = false
+
+# If the doc compiles, then it opens in your browser and bacon switches
+# to the previous job
+[jobs.doc-open]
+command = [
+    "cargo", "+nightly", "doc",
+    "-Zunstable-options", "-Zrustdoc-scrape-examples",
+    "--all-features",
+    "--color", "always",
+    "--no-deps",
+    "--open",
+]
+env.RUSTDOCFLAGS = "--cfg docsrs"
+need_stdout = false
+on_success = "job:doc" # so that we don't open the browser at each change
+
+[jobs.coverage]
+command = [
+    "cargo", "llvm-cov",
+    "--lcov", "--output-path", "target/lcov.info",
+    "--all-features",
+    "--color", "always",
+]
+
+[jobs.coverage-unit-tests-only]
+command = [
+    "cargo", "llvm-cov",
+    "--lcov", "--output-path", "target/lcov.info",
+    "--lib",
+    "--all-features",
+    "--color", "always",
+]
+
+# You may define here keybindings that would be specific to
+# a project, for example a shortcut to launch a specific job.
+# Shortcuts to internal functions (scrolling, toggling, etc.)
+# should go in your personal global prefs.toml file instead.
+[keybindings]
+# alt-m = "job:my-job"
+ctrl-c = "job:check-crossterm"
+ctrl-t = "job:check-termion"
+ctrl-w = "job:check-termwiz"
+v = "job:coverage"
+ctrl-v = "job:coverage-unit-tests-only"
+u = "job:test-unit"
+n = "job:nextest"
--- a/benches/barchart.rs
+++ b/benches/barchart.rs
@@ -0,0 +1,73 @@
+use criterion::{criterion_group, criterion_main, Bencher, BenchmarkId, Criterion};
+use rand::Rng;
+use ratatui::{
+    buffer::Buffer,
+    layout::Rect,
+    prelude::Direction,
+    widgets::{Bar, BarChart, BarGroup, Widget},
+};
+
+/// Benchmark for rendering a barchart.
+fn barchart(c: &mut Criterion) {
+    let mut group = c.benchmark_group("barchart");
+    let mut rng = rand::thread_rng();
+
+    for data_count in [64, 256, 2048] {
+        let data: Vec<Bar> = (0..data_count)
+            .map(|i| {
+                Bar::default()
+                    .label(format!("B{i}").into())
+                    .value(rng.gen_range(0..data_count))
+            })
+            .collect();
+
+        let bargroup = BarGroup::default().bars(&data);
+
+        // Render a basic barchart
+        group.bench_with_input(
+            BenchmarkId::new("render", data_count),
+            &BarChart::default().data(bargroup.clone()),
+            render,
+        );
+
+        // Render an horizontal barchart
+        group.bench_with_input(
+            BenchmarkId::new("render_horizontal", data_count),
+            &BarChart::default()
+                .direction(Direction::Horizontal)
+                .data(bargroup.clone()),
+            render,
+        );
+
+        // Render a barchart with multiple groups
+        group.bench_with_input(
+            BenchmarkId::new("render_grouped", data_count),
+            &BarChart::default()
+                // We call `data` multiple time to add multiple groups.
+                // This is not a duplicated call.
+                .data(bargroup.clone())
+                .data(bargroup.clone())
+                .data(bargroup.clone()),
+            render,
+        );
+    }
+
+    group.finish();
+}
+
+/// Render the widget in a classical size buffer
+fn render(bencher: &mut Bencher, barchart: &BarChart) {
+    let mut buffer = Buffer::empty(Rect::new(0, 0, 200, 50));
+    // We use `iter_batched` to clone the value in the setup function.
+    // See https://github.com/ratatui-org/ratatui/pull/377.
+    bencher.iter_batched(
+        || barchart.clone(),
+        |bench_barchart| {
+            bench_barchart.render(buffer.area, &mut buffer);
+        },
+        criterion::BatchSize::LargeInput,
+    );
+}
+
+criterion_group!(benches, barchart);
+criterion_main!(benches);
--- a/benches/block.rs
+++ b/benches/block.rs
@@ -0,0 +1,62 @@
+use criterion::{criterion_group, criterion_main, BatchSize, Bencher, Criterion};
+use ratatui::{
+    buffer::Buffer,
+    layout::{Alignment, Rect},
+    widgets::{
+        block::{Position, Title},
+        Block, Padding, Widget,
+    },
+};
+
+/// Benchmark for rendering a block.
+fn block(c: &mut Criterion) {
+    let mut group = c.benchmark_group("block");
+
+    for (width, height) in [
+        (100, 50),  // vertically split screen
+        (200, 50),  // 1080p fullscreen with medium font
+        (256, 256), // Max sized area
+    ] {
+        let buffer_size = Rect::new(0, 0, width, height);
+
+        // Render an empty block
+        group.bench_with_input(
+            format!("render_empty/{width}x{height}"),
+            &Block::new(),
+            |b, block| render(b, block, buffer_size),
+        );
+
+        // Render with all features
+        group.bench_with_input(
+            format!("render_all_feature/{width}x{height}"),
+            &Block::bordered()
+                .padding(Padding::new(5, 5, 2, 2))
+                .title("test title")
+                .title(
+                    Title::from("bottom left title")
+                        .alignment(Alignment::Right)
+                        .position(Position::Bottom),
+                ),
+            |b, block| render(b, block, buffer_size),
+        );
+    }
+
+    group.finish();
+}
+
+/// render the block into a buffer of the given `size`
+fn render(bencher: &mut Bencher, block: &Block, size: Rect) {
+    let mut buffer = Buffer::empty(size);
+    // We use `iter_batched` to clone the value in the setup function.
+    // See https://github.com/ratatui-org/ratatui/pull/377.
+    bencher.iter_batched(
+        || block.to_owned(),
+        |bench_block| {
+            bench_block.render(buffer.area, &mut buffer);
+        },
+        BatchSize::SmallInput,
+    );
+}
+
+criterion_group!(benches, block);
+criterion_main!(benches);
--- a/benches/line.rs
+++ b/benches/line.rs
@@ -0,0 +1,39 @@
+use std::hint::black_box;
+
+use criterion::{criterion_group, criterion_main, Criterion};
+use ratatui::{
+    buffer::Buffer,
+    layout::{Alignment, Rect},
+    style::Stylize,
+    text::Line,
+    widgets::Widget,
+};
+
+fn line_render(criterion: &mut Criterion) {
+    for alignment in [Alignment::Left, Alignment::Center, Alignment::Right] {
+        let mut group = criterion.benchmark_group(format!("line_render/{alignment}"));
+        group.sample_size(1000);
+
+        let line = &Line::from(vec![
+            "This".red(),
+            " ".green(),
+            "is".italic(),
+            " ".blue(),
+            "SPARTA!!".bold(),
+        ])
+        .alignment(alignment);
+
+        for width in [0, 3, 4, 6, 7, 10, 42] {
+            let area = Rect::new(0, 0, width, 1);
+
+            group.bench_function(width.to_string(), |bencher| {
+                let mut buffer = Buffer::empty(area);
+                bencher.iter(|| black_box(line).render(area, &mut buffer));
+            });
+        }
+        group.finish();
+    }
+}
+
+criterion_group!(benches, line_render);
+criterion_main!(benches);
--- a/benches/list.rs
+++ b/benches/list.rs
@@ -0,0 +1,73 @@
+use criterion::{criterion_group, criterion_main, BatchSize, Bencher, BenchmarkId, Criterion};
+use ratatui::{
+    buffer::Buffer,
+    layout::Rect,
+    widgets::{List, ListItem, ListState, StatefulWidget, Widget},
+};
+
+/// Benchmark for rendering a list.
+/// It only benchmarks the render with a different amount of items.
+fn list(c: &mut Criterion) {
+    let mut group = c.benchmark_group("list");
+
+    for line_count in [64, 2048, 16384] {
+        let lines: Vec<ListItem> = (0..line_count)
+            .map(|_| ListItem::new(fakeit::words::sentence(10)))
+            .collect();
+
+        // Render default list
+        group.bench_with_input(
+            BenchmarkId::new("render", line_count),
+            &List::new(lines.clone()),
+            render,
+        );
+
+        // Render with an offset to the middle of the list and a selected item
+        group.bench_with_input(
+            BenchmarkId::new("render_scroll_half", line_count),
+            &List::new(lines.clone()).highlight_symbol(">>"),
+            |b, list| {
+                render_stateful(
+                    b,
+                    list,
+                    ListState::default()
+                        .with_offset(line_count / 2)
+                        .with_selected(Some(line_count / 2)),
+                );
+            },
+        );
+    }
+
+    group.finish();
+}
+
+/// render the list into a common size buffer
+fn render(bencher: &mut Bencher, list: &List) {
+    let mut buffer = Buffer::empty(Rect::new(0, 0, 200, 50));
+    // We use `iter_batched` to clone the value in the setup function.
+    // See https://github.com/ratatui-org/ratatui/pull/377.
+    bencher.iter_batched(
+        || list.to_owned(),
+        |bench_list| {
+            Widget::render(bench_list, buffer.area, &mut buffer);
+        },
+        BatchSize::LargeInput,
+    );
+}
+
+/// render the list into a common size buffer with a state
+fn render_stateful(bencher: &mut Bencher, list: &List, mut state: ListState) {
+    let mut buffer = Buffer::empty(Rect::new(0, 0, 200, 50));
+    // We use `iter_batched` to clone the value in the setup function.
+    // See https://github.com/ratatui-org/ratatui/pull/377.
+    bencher.iter_batched(
+        || list.to_owned(),
+        |bench_list| {
+            StatefulWidget::render(bench_list, buffer.area, &mut buffer, &mut state);
+        },
+        BatchSize::LargeInput,
+    );
+}
+
+criterion_group!(benches, list);
+criterion_main!(benches);
--- a/benches/paragraph.rs
+++ b/benches/paragraph.rs
@@ -0,0 +1,97 @@
+use criterion::{
+    black_box, criterion_group, criterion_main, BatchSize, Bencher, BenchmarkId, Criterion,
+};
+use ratatui::{
+    buffer::Buffer,
+    layout::Rect,
+    widgets::{Paragraph, Widget, Wrap},
+};
+
+/// because the scroll offset is a u16, the maximum number of lines that can be scrolled is 65535.
+/// This is a limitation of the current implementation and may be fixed by changing the type of the
+/// scroll offset to a u32.
+const MAX_SCROLL_OFFSET: u16 = u16::MAX;
+const NO_WRAP_WIDTH: u16 = 200;
+const WRAP_WIDTH: u16 = 100;
+
+/// Benchmark for rendering a paragraph with a given number of lines. The design of this benchmark
+/// allows comparison of the performance of rendering a paragraph with different numbers of lines.
+/// as well as comparing with the various settings on the scroll and wrap features.
+fn paragraph(c: &mut Criterion) {
+    let mut group = c.benchmark_group("paragraph");
+    for line_count in [64, 2048, MAX_SCROLL_OFFSET] {
+        let lines = random_lines(line_count);
+        let lines = lines.as_str();
+
+        // benchmark that measures the overhead of creating a paragraph separately from rendering
+        group.bench_with_input(BenchmarkId::new("new", line_count), lines, |b, lines| {
+            b.iter(|| Paragraph::new(black_box(lines)));
+        });
+
+        // render the paragraph with no scroll
+        group.bench_with_input(
+            BenchmarkId::new("render", line_count),
+            &Paragraph::new(lines),
+            |bencher, paragraph| render(bencher, paragraph, NO_WRAP_WIDTH),
+        );
+
+        // scroll the paragraph by half the number of lines and render
+        group.bench_with_input(
+            BenchmarkId::new("render_scroll_half", line_count),
+            &Paragraph::new(lines).scroll((0, line_count / 2)),
+            |bencher, paragraph| render(bencher, paragraph, NO_WRAP_WIDTH),
+        );
+
+        // scroll the paragraph by the full number of lines and render
+        group.bench_with_input(
+            BenchmarkId::new("render_scroll_full", line_count),
+            &Paragraph::new(lines).scroll((0, line_count)),
+            |bencher, paragraph| render(bencher, paragraph, NO_WRAP_WIDTH),
+        );
+
+        // render the paragraph wrapped to 100 characters
+        group.bench_with_input(
+            BenchmarkId::new("render_wrap", line_count),
+            &Paragraph::new(lines).wrap(Wrap { trim: false }),
+            |bencher, paragraph| render(bencher, paragraph, WRAP_WIDTH),
+        );
+
+        // scroll the paragraph by the full number of lines and render wrapped to 100 characters
+        group.bench_with_input(
+            BenchmarkId::new("render_wrap_scroll_full", line_count),
+            &Paragraph::new(lines)
+                .wrap(Wrap { trim: false })
+                .scroll((0, line_count)),
+            |bencher, paragraph| render(bencher, paragraph, WRAP_WIDTH),
+        );
+    }
+    group.finish();
+}
+
+/// render the paragraph into a buffer with the given width
+fn render(bencher: &mut Bencher, paragraph: &Paragraph, width: u16) {
+    let mut buffer = Buffer::empty(Rect::new(0, 0, width, 50));
+    // We use `iter_batched` to clone the value in the setup function.
+    // See https://github.com/ratatui-org/ratatui/pull/377.
+    bencher.iter_batched(
+        || paragraph.to_owned(),
+        |bench_paragraph| {
+            bench_paragraph.render(buffer.area, &mut buffer);
+        },
+        BatchSize::LargeInput,
+    );
+}
+
+/// Create a string with the given number of lines filled with nonsense words
+///
+/// English language has about 5.1 average characters per word so including the space between words
+/// this should emit around 200 characters per paragraph on average.
+fn random_lines(count: u16) -> String {
+    let count = i64::from(count);
+    let sentence_count = 3;
+    let word_count = 11;
+    fakeit::words::paragraph(count, sentence_count, word_count, "\n".into())
+}
+
+criterion_group!(benches, paragraph);
+criterion_main!(benches);
--- a/benches/sparkline.rs
+++ b/benches/sparkline.rs
@@ -0,0 +1,45 @@
+use criterion::{criterion_group, criterion_main, Bencher, BenchmarkId, Criterion};
+use rand::Rng;
+use ratatui::{
+    buffer::Buffer,
+    layout::Rect,
+    widgets::{Sparkline, Widget},
+};
+
+/// Benchmark for rendering a sparkline.
+fn sparkline(c: &mut Criterion) {
+    let mut group = c.benchmark_group("sparkline");
+    let mut rng = rand::thread_rng();
+
+    for data_count in [64, 256, 2048] {
+        let data: Vec<u64> = (0..data_count)
+            .map(|_| rng.gen_range(0..data_count))
+            .collect();
+
+        // Render a basic sparkline
+        group.bench_with_input(
+            BenchmarkId::new("render", data_count),
+            &Sparkline::default().data(&data),
+            render,
+        );
+    }
+
+    group.finish();
+}
+
+/// render the block into a buffer of the given `size`
+fn render(bencher: &mut Bencher, sparkline: &Sparkline) {
+    let mut buffer = Buffer::empty(Rect::new(0, 0, 200, 50));
+    // We use `iter_batched` to clone the value in the setup function.
+    // See https://github.com/ratatui-org/ratatui/pull/377.
+    bencher.iter_batched(
+        || sparkline.clone(),
+        |bench_sparkline| {
+            bench_sparkline.render(buffer.area, &mut buffer);
+        },
+        criterion::BatchSize::LargeInput,
+    );
+}
+
+criterion_group!(benches, sparkline);
+criterion_main!(benches);
--- a/cliff.toml
+++ b/cliff.toml
@@ -0,0 +1,142 @@
+# git-cliff ~ configuration file
+# https://git-cliff.org/docs/configuration
+
+[remote.github]
+owner = "ratatui-org"
+repo = "ratatui"
+
+[changelog]
+# changelog header
+header = """
+# Changelog
+
+All notable changes to this project will be documented in this file.
+"""
+# template for the changelog body
+# https://keats.github.io/tera/docs/#introduction
+# note that the - before / after the % controls whether whitespace is rendered between each line.
+# Getting this right so that the markdown renders with the correct number of lines between headings
+# code fences and list items is pretty finicky. Note also that the 4 backticks in the commit macro
+# is intentional as this escapes any backticks in the commit body.
+body = """
+{%- if not version %}
+## [unreleased]
+{% else -%}
+## [{{ version }}](https://github.com/ratatui-org/ratatui/releases/tag/{{ version }}) - {{ timestamp | date(format="%Y-%m-%d") }}
+{% endif -%}
+
+{% macro commit(commit) -%}
+- [{{ commit.id | truncate(length=7, end="") }}]({{ "https://github.com/ratatui-org/ratatui/commit/" ~ commit.id }}) \
+  *({{commit.scope | default(value = "uncategorized") | lower }})* {{ commit.message | upper_first | trim }}\
+  {% if commit.github.username %} by @{{ commit.github.username }}{%- endif -%}\
+  {% if commit.github.pr_number %} in [#{{ commit.github.pr_number }}]({{ self::remote_url() }}/pull/{{ commit.github.pr_number }}){%- endif %}\
+{%- if commit.breaking %} [**breaking**]{% endif %}
+{%- if commit.body %}
+
+  ````text {#- 4 backticks escape any backticks in body #}
+  {{commit.body | indent(prefix="  ") }}
+  ````
+{%- endif %}
+{%- for footer in commit.footers %}
+{%- if footer.token != "Signed-off-by" and footer.token != "Co-authored-by" %}
+
+  {{ footer.token | indent(prefix="  ") }}{{ footer.separator }}{{ footer.value }}
+{%- endif %}
+{%- endfor %}
+{% endmacro -%}
+
+{% for group, commits in commits | group_by(attribute="group") %}
+### {{ group | striptags | trim | upper_first }}
+{% for commit in commits | filter(attribute="scope") | sort(attribute="scope") %}
+{{ self::commit(commit=commit) }}
+{%- endfor -%}
+{% for commit in commits %}
+{%- if not commit.scope %}
+{{ self::commit(commit=commit) }}
+{%- endif -%}
+{%- endfor -%}
+{%- endfor %}
+
+{% if github.contributors | filter(attribute="is_first_time", value=true) | length != 0 %}
+### New Contributors
+{%- endif %}\
+{% for contributor in github.contributors | filter(attribute="is_first_time", value=true) %}
+* @{{ contributor.username }} made their first contribution
+{%- if contributor.pr_number %} in \
+[#{{ contributor.pr_number }}]({{ self::remote_url() }}/pull/{{ contributor.pr_number }}) \
+{%- endif %}
+{%- endfor -%}
+
+{% if version %}
+{% if previous.version %}
+**Full Changelog**: {{ self::remote_url() }}/compare/{{ previous.version }}...{{ version }}
+{% endif %}
+{% else -%}
+  {% raw %}\n{% endraw %}
+{% endif %}
+
+{%- macro remote_url() -%}
+https://github.com/{{ remote.github.owner }}/{{ remote.github.repo }}\
+{% endmacro %}
+"""
+
+
+# remove the leading and trailing whitespace from the template
+trim = false
+# changelog footer
+footer = """
+<!-- generated by git-cliff -->
+"""
+
+[git]
+# parse the commits based on https://www.conventionalcommits.org
+conventional_commits = true
+# filter out the commits that are not conventional
+filter_unconventional = true
+# process each line of a commit as an individual commit
+split_commits = false
+# regex for preprocessing the commit messages
+commit_preprocessors = [
+  { pattern = '\((\w+\s)?#([0-9]+)\)', replace = "" },
+  { pattern = '(better safe shared layout cache)', replace = "perf(layout): ${1}" },
+  { pattern = '(Clarify README.md)', replace = "docs(readme): ${1}" },
+  { pattern = '(Update README.md)', replace = "docs(readme): ${1}" },
+  { pattern = '(fix typos|Fix typos)', replace = "fix: ${1}" },
+]
+# regex for parsing and grouping commits
+commit_parsers = [
+  { message = "^feat", group = "<!-- 00 -->Features" },
+  { message = "^[fF]ix", group = "<!-- 01 -->Bug Fixes" },
+  { message = "^refactor", group = "<!-- 02 -->Refactor" },
+  { message = "^doc", group = "<!-- 03 -->Documentation" },
+  { message = "^perf", group = "<!-- 04 -->Performance" },
+  { message = "^style", group = "<!-- 05 -->Styling" },
+  { message = "^test", group = "<!-- 06 -->Testing" },
+  { message = "^chore\\(release\\): prepare for", skip = true },
+  { message = "^chore\\(pr\\)", skip = true },
+  { message = "^chore\\(pull\\)", skip = true },
+  { message = "^chore\\(deps\\)", skip = true },
+  { message = "^chore\\(changelog\\)", skip = true },
+  { message = "^[cC]hore", group = "<!-- 07 -->Miscellaneous Tasks" },
+  { body = ".*security", group = "<!-- 08 -->Security" },
+  { message = "^build", group = "<!-- 09 -->Build" },
+  { message = "^ci", group = "<!-- 10 -->Continuous Integration" },
+  { message = "^revert", group = "<!-- 11 -->Reverted Commits" },
+  # handle some old commits styles from pre 0.4
+  { message = "^(Buffer|buffer|Frame|frame|Gauge|gauge|Paragraph|paragraph):", group = "<!-- 07 -->Miscellaneous Tasks" },
+  { message = "^\\[", group = "<!-- 07 -->Miscellaneous Tasks" },
+]
+# protect breaking changes from being skipped due to matching a skipping commit_parser
+protect_breaking_commits = false
+# filter out the commits that are not matched by commit parsers
+filter_commits = false
+# glob pattern for matching git tags
+tag_pattern = "v[0-9]*"
+# regex for skipping tags
+skip_tags = "v0.1.0-rc.1"
+# regex for ignoring tags
+ignore_tags = "alpha"
+# sort the tags topologically
+topo_order = false
+# sort the commits inside sections by oldest/newest order
+sort_commits = "newest"
--- a/clippy.toml
+++ b/clippy.toml
@@ -0,0 +1,17 @@
+avoid-breaking-exported-api = false
+
+# https://rust-lang.github.io/rust-clippy/master/index.html#/multiple_crate_versions
+# ratatui -> bitflags v2.3
+# termwiz -> wezterm-blob-leases -> mac_address -> nix -> bitflags v1.3.2
+# crossterm -> all the windows- deps https://github.com/ratatui-org/ratatui/pull/1064#issuecomment-2078848980
+allowed-duplicate-crates = [
+    "bitflags",
+    "windows-targets",
+    "windows_aarch64_gnullvm",
+    "windows_aarch64_msvc",
+    "windows_i686_gnu",
+    "windows_i686_msvc",
+    "windows_x86_64_gnu",
+    "windows_x86_64_gnullvm",
+    "windows_x86_64_msvc",
+]
--- a/codecov.yml
+++ b/codecov.yml
@@ -0,0 +1,14 @@
+coverage: # https://docs.codecov.com/docs/codecovyml-reference#coverage
+  precision: 1 # e.g. 89.1%
+  round: down
+  range: 85..100 # https://docs.codecov.com/docs/coverage-configuration#section-range
+  status: # https://docs.codecov.com/docs/commit-status
+    project:
+      default:
+        threshold: 1% # Avoid false negatives
+ignore:
+  - "examples"
+  - "benches"
+comment: # https://docs.codecov.com/docs/pull-request-comments
+  # make the comments less noisy
+  require_changes: true
--- a/committed.toml
+++ b/committed.toml
@@ -0,0 +1,30 @@
+# configuration for https://github.com/crate-ci/committed
+
+# https://www.conventionalcommits.org
+style = "conventional"
+# disallow merge commits
+merge_commit = false
+# subject is not required to be capitalized
+subject_capitalized = false
+# subject should start with an imperative verb
+imperative_subject = true
+# subject should not end with a punctuation
+subject_not_punctuated = true
+# disable line length
+line_length = 0
+# disable subject length
+subject_length = 0
+# default allowed_types [ "chore", "docs", "feat", "fix", "perf", "refactor", "style", "test" ]
+allowed_types = [
+  "build",
+  "chore",
+  "ci",
+  "docs",
+  "feat",
+  "fix",
+  "perf",
+  "refactor",
+  "revert",
+  "style",
+  "test",
+]
--- a/deny.toml
+++ b/deny.toml
@@ -0,0 +1,28 @@
+# configuration for https://github.com/EmbarkStudios/cargo-deny
+
+[licenses]
+default = "deny"
+unlicensed = "deny"
+copyleft = "deny"
+confidence-threshold = 0.8
+allow = [
+    "Apache-2.0",
+    "BSD-2-Clause",
+    "BSD-3-Clause",
+    "ISC",
+    "MIT",
+    "Unicode-DFS-2016",
+    "WTFPL",
+]
+
+[advisories]
+unmaintained = "deny"
+yanked = "deny"
+
+[bans]
+multiple-versions = "allow"
+
+[sources]
+unknown-registry = "deny"
+unknown-git = "warn"
+allow-registry = ["https://github.com/rust-lang/crates.io-index"]
--- a/docs/demo.gif
+++ b/docs/demo.gif
--- a/examples/README.md
+++ b/examples/README.md
@@ -0,0 +1,374 @@
+# Examples
+
+This folder might use unreleased code. View the examples for the latest release instead.
+
+> [!WARNING]
+>
+> There may be backwards incompatible changes in these examples, as they are designed to compile
+> against the `main` branch.
+>
+> There are a few workaround for this problem:
+>
+> - View the examples as they were when the latest version was release by selecting the tag that
+>   matches that version. E.g. <https://github.com/ratatui-org/ratatui/tree/v0.26.1/examples>.
+> - If you're viewing this file on GitHub, there is a combo box at the top of this page  which
+>   allows you to select any previous tagged version.
+> - To view the code locally, checkout the tag. E.g. `git switch --detach v0.26.1`.
+> - Use the latest [alpha version of Ratatui] in your app. These are released weekly on Saturdays.
+> - Compile your code against the main branch either locally by adding e.g. `path = "../ratatui"` to
+>   the dependency, or remotely by adding `git = "https://github.com/ratatui-org/ratatui"`
+>
+> For a list of unreleased breaking changes, see [BREAKING-CHANGES.md].
+>
+> We don't keep the CHANGELOG updated with unreleased changes, check the git commit history or run
+> `git-cliff -u` against a cloned version of this repository.
+
+## Demo2
+
+This is the demo example from the main README and crate page. Source: [demo2](./demo2/).
+
+```shell
+cargo run --example=demo2 --features="crossterm widget-calendar"
+```
+
+![Demo2][demo2.gif]
+
+## Demo
+
+This is the previous demo example from the main README. It is available for each of the backends. Source:
+[demo.rs](./demo/).
+
+```shell
+cargo run --example=demo --features=crossterm
+cargo run --example=demo --no-default-features --features=termion
+cargo run --example=demo --no-default-features --features=termwiz
+```
+
+![Demo][demo.gif]
+
+## Hello World
+
+This is a pretty boring example, but it contains some good documentation
+on writing tui apps. Source: [hello_world.rs](./hello_world.rs).
+
+```shell
+cargo run --example=hello_world --features=crossterm
+```
+
+![Hello World][hello_world.gif]
+
+## Barchart
+
+Demonstrates the [`BarChart`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.BarChart.html)
+widget. Source: [barchart.rs](./barchart.rs).
+
+```shell
+cargo run --example=barchart --features=crossterm
+```
+
+![Barchart][barchart.gif]
+
+## Block
+
+Demonstrates the [`Block`](https://docs.rs/ratatui/latest/ratatui/widgets/block/struct.Block.html)
+widget. Source: [block.rs](./block.rs).
+
+```shell
+cargo run --example=block --features=crossterm
+```
+
+![Block][block.gif]
+
+## Calendar
+
+Demonstrates the [`Calendar`](https://docs.rs/ratatui/latest/ratatui/widgets/calendar/index.html)
+widget. Source: [calendar.rs](./calendar.rs).
+
+```shell
+cargo run --example=calendar --features="crossterm widget-calendar"
+```
+
+![Calendar][calendar.gif]
+
+## Canvas
+
+Demonstrates the [`Canvas`](https://docs.rs/ratatui/latest/ratatui/widgets/canvas/index.html) widget
+and related shapes in the
+[`canvas`](https://docs.rs/ratatui/latest/ratatui/widgets/canvas/index.html) module. Source:
+[canvas.rs](./canvas.rs).
+
+```shell
+cargo run --example=canvas --features=crossterm
+```
+
+![Canvas][canvas.gif]
+
+## Chart
+
+Demonstrates the [`Chart`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Chart.html) widget.
+Source: [chart.rs](./chart.rs).
+
+```shell
+cargo run --example=chart --features=crossterm
+```
+
+![Chart][chart.gif]
+
+## Colors
+
+Demonstrates the available [`Color`](https://docs.rs/ratatui/latest/ratatui/style/enum.Color.html)
+options. These can be used in any style field. Source: [colors.rs](./colors.rs).
+
+```shell
+cargo run --example=colors --features=crossterm
+```
+
+![Colors][colors.gif]
+
+## Colors (RGB)
+
+Demonstrates the available RGB
+[`Color`](https://docs.rs/ratatui/latest/ratatui/style/enum.Color.html) options. These can be used
+in any style field. Source: [colors_rgb.rs](./colors_rgb.rs). Uses a half block technique to render
+two square-ish pixels in the space of a single rectangular terminal cell.
+
+```shell
+cargo run --example=colors_rgb --features=crossterm
+```
+
+Note: VHs renders full screen animations poorly, so this is a screen capture rather than the output
+of the VHS tape.
+
+<https://github.com/ratatui-org/ratatui/assets/381361/485e775a-e0b5-4133-899b-1e8aeb56e774>
+
+## Custom Widget
+
+Demonstrates how to implement the
+[`Widget`](https://docs.rs/ratatui/latest/ratatui/widgets/trait.Widget.html) trait. Also shows mouse
+interaction. Source: [custom_widget.rs](./custom_widget.rs).
+
+```shell
+cargo run --example=custom_widget --features=crossterm
+```
+
+![Custom Widget][custom_widget.gif]
+
+## Gauge
+
+Demonstrates the [`Gauge`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Gauge.html) widget.
+Source: [gauge.rs](./gauge.rs).
+
+```shell
+cargo run --example=gauge --features=crossterm
+```
+
+![Gauge][gauge.gif]
+
+## Line Gauge
+
+Demonstrates the [`Line
+Gauge`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.LineGauge.html) widget. Source:
+[line_gauge.rs](./line_gauge.rs).
+
+```shell
+cargo run --example=line_gauge --features=crossterm
+```
+
+![LineGauge][line_gauge.gif]
+
+## Inline
+
+Demonstrates how to use the
+[`Inline`](https://docs.rs/ratatui/latest/ratatui/terminal/enum.Viewport.html#variant.Inline)
+Viewport mode for ratatui apps. Source: [inline.rs](./inline.rs).
+
+```shell
+cargo run --example=inline --features=crossterm
+```
+
+![Inline][inline.gif]
+
+## Layout
+
+Demonstrates the [`Layout`](https://docs.rs/ratatui/latest/ratatui/layout/struct.Layout.html) and
+interaction between each constraint. Source:  [layout.rs](./layout.rs).
+
+```shell
+cargo run --example=layout --features=crossterm
+```
+
+![Layout][layout.gif]
+
+## List
+
+Demonstrates the [`List`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.List.html) widget.
+Source: [list.rs](./list.rs).
+
+```shell
+cargo run --example=list --features=crossterm
+```
+
+![List][list.gif]
+
+## Modifiers
+
+Demonstrates the style
+[`Modifiers`](https://docs.rs/ratatui/latest/ratatui/style/struct.Modifier.html). Source:
+[modifiers.rs](./modifiers.rs).
+
+```shell
+cargo run --example=modifiers --features=crossterm
+```
+
+![Modifiers][modifiers.gif]
+
+## Panic
+
+Demonstrates how to handle panics by ensuring that panic messages are written correctly to the
+screen. Source: [panic.rs](./panic.rs).
+
+```shell
+cargo run --example=panic --features=crossterm
+```
+
+![Panic][panic.gif]
+
+## Paragraph
+
+Demonstrates the [`Paragraph`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Paragraph.html)
+widget. Source: [paragraph.rs](./paragraph.rs)
+
+```shell
+cargo run --example=paragraph --features=crossterm
+```
+
+![Paragraph][paragraph.gif]
+
+## Popup
+
+Demonstrates how to render a widget over the top of previously rendered widgets using the
+[`Clear`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Clear.html) widget. Source:
+[popup.rs](./popup.rs).
+
+>
+```shell
+cargo run --example=popup --features=crossterm
+```
+
+![Popup][popup.gif]
+
+## Ratatui-logo
+
+A fun example of using half blocks to render graphics Source:
+[ratatui-logo.rs](./ratatui-logo.rs).
+
+>
+```shell
+cargo run --example=ratatui-logo --features=crossterm
+```
+
+![Ratatui Logo][ratatui-logo.gif]
+
+## Scrollbar
+
+Demonstrates the [`Scrollbar`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Scrollbar.html)
+widget. Source: [scrollbar.rs](./scrollbar.rs).
+
+```shell
+cargo run --example=scrollbar --features=crossterm
+```
+
+![Scrollbar][scrollbar.gif]
+
+## Sparkline
+
+Demonstrates the [`Sparkline`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Sparkline.html)
+widget. Source: [sparkline.rs](./sparkline.rs).
+
+```shell
+cargo run --example=sparkline --features=crossterm
+```
+
+![Sparkline][sparkline.gif]
+
+## Table
+
+Demonstrates the [`Table`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Table.html) widget.
+Source: [table.rs](./table.rs).
+
+```shell
+cargo run --example=table --features=crossterm
+```
+
+![Table][table.gif]
+
+## Tabs
+
+Demonstrates the [`Tabs`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Tabs.html) widget.
+Source: [tabs.rs](./tabs.rs).
+
+```shell
+cargo run --example=tabs --features=crossterm
+```
+
+![Tabs][tabs.gif]
+
+## User Input
+
+Demonstrates one approach to accepting user input. Source [user_input.rs](./user_input.rs).
+
+> [!NOTE]
+> Consider using [`tui-textarea`](https://crates.io/crates/tui-textarea) or
+> [`tui-input`](https://crates.io/crates/tui-input) crates for more functional text entry UIs.
+
+```shell
+cargo run --example=user_input --features=crossterm
+```
+
+![User Input][user_input.gif]
+
+## How to update these examples
+
+These gifs were created using [VHS](https://github.com/charmbracelet/vhs). Each example has a
+corresponding `.tape` file that holds instructions for how to generate the images. Note that the
+images themselves are stored in a separate `images` git branch to avoid bloating the main
+repository.
+
+<!--
+
+Links to images to make them easier to update in bulk. Use the following script to update and upload
+the examples to the images branch. (Requires push access to the branch).
+
+```shell
+examples/vhs/generate.bash
+```
+-->
+
+[barchart.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/barchart.gif?raw=true
+[block.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/block.gif?raw=true
+[calendar.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/calendar.gif?raw=true
+[canvas.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/canvas.gif?raw=true
+[chart.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/chart.gif?raw=true
+[colors.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/colors.gif?raw=true
+[custom_widget.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/custom_widget.gif?raw=true
+[demo.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/demo.gif?raw=true
+[demo2.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/demo2.gif?raw=true
+[gauge.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/gauge.gif?raw=true
+[hello_world.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/hello_world.gif?raw=true
+[inline.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/inline.gif?raw=true
+[layout.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/layout.gif?raw=true
+[list.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/list.gif?raw=true
+[line_gauge.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/line_gauge.gif?raw=true
+[modifiers.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/modifiers.gif?raw=true
+[panic.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/panic.gif?raw=true
+[paragraph.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/paragraph.gif?raw=true
+[popup.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/popup.gif?raw=true
+[ratatui-logo.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/ratatui-logo.gif?raw=true
+[scrollbar.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/scrollbar.gif?raw=true
+[sparkline.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/sparkline.gif?raw=true
+[table.gif]:  https://vhs.charm.sh/vhs-6njXBytDf0rwPufUtmSSpI.gif
+[tabs.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/tabs.gif?raw=true
+[user_input.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/user_input.gif?raw=true
+
+[alpha version of Ratatui]: https://crates.io/crates/ratatui/versions
+[BREAKING-CHANGES.md]: https://github.com/ratatui-org/ratatui/blob/main/BREAKING-CHANGES.md
--- a/examples/barchart.rs
+++ b/examples/barchart.rs
@@ -1,29 +1,55 @@
-extern crate termion;
-extern crate tui;
+//! # [Ratatui] `BarChart` example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md

-use std::io;
-use std::thread;
-use std::time;
-use std::sync::mpsc;
+use std::{
+    error::Error,
+    io,
+    time::{Duration, Instant},
+};

-use termion::event;
-use termion::input::TermRead;
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    crossterm::{
+        event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    layout::{Constraint, Direction, Layout, Rect},
+    style::{Color, Modifier, Style},
+    terminal::{Frame, Terminal},
+    text::{Line, Span},
+    widgets::{Bar, BarChart, BarGroup, Block, Paragraph},
+};

-use tui::Terminal;
-use tui::backend::MouseBackend;
-use tui::widgets::{BarChart, Block, Borders, Widget};
-use tui::layout::{Direction, Group, Rect, Size};
-use tui::style::{Color, Modifier, Style};
-
-struct App<'a> {
-    size: Rect,
-    data: Vec<(&'a str, u64)>,
+struct Company<'a> {
+    revenue: [u64; 4],
+    label: &'a str,
+    bar_style: Style,
 }

+struct App<'a> {
+    data: Vec<(&'a str, u64)>,
+    months: [&'a str; 4],
+    companies: [Company<'a>; 3],
+}
+
+const TOTAL_REVENUE: &str = "Total Revenue";
+
 impl<'a> App<'a> {
-    fn new() -> App<'a> {
+    fn new() -> Self {
        App {
-            size: Rect::default(),
            data: vec![
                ("B1", 9),
                ("B2", 12),
@@ -50,115 +76,227 @@ impl<'a> App<'a> {
                ("B23", 3),
                ("B24", 5),
            ],
+            companies: [
+                Company {
+                    label: "Comp.A",
+                    revenue: [9500, 12500, 5300, 8500],
+                    bar_style: Style::default().fg(Color::Green),
+                },
+                Company {
+                    label: "Comp.B",
+                    revenue: [1500, 2500, 3000, 500],
+                    bar_style: Style::default().fg(Color::Yellow),
+                },
+                Company {
+                    label: "Comp.C",
+                    revenue: [10500, 10600, 9000, 4200],
+                    bar_style: Style::default().fg(Color::White),
+                },
+            ],
+            months: ["Mars", "Apr", "May", "Jun"],
        }
    }

-    fn advance(&mut self) {
+    fn on_tick(&mut self) {
        let value = self.data.pop().unwrap();
        self.data.insert(0, value);
    }
 }

-enum Event {
-    Input(event::Key),
-    Tick,
-}
+fn main() -> Result<(), Box<dyn Error>> {
+    // setup terminal
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;

-fn main() {
-    // Terminal initialization
-    let backend = MouseBackend::new().unwrap();
-    let mut terminal = Terminal::new(backend).unwrap();
+    // create app and run it
+    let tick_rate = Duration::from_millis(250);
+    let app = App::new();
+    let res = run_app(&mut terminal, app, tick_rate);

-    // Channels
-    let (tx, rx) = mpsc::channel();
-    let input_tx = tx.clone();
-    let clock_tx = tx.clone();
+    // restore terminal
+    disable_raw_mode()?;
+    execute!(
+        terminal.backend_mut(),
+        LeaveAlternateScreen,
+        DisableMouseCapture
+    )?;
+    terminal.show_cursor()?;

-    // Input
-    thread::spawn(move || {
-        let stdin = io::stdin();
-        for c in stdin.keys() {
-            let evt = c.unwrap();
-            input_tx.send(Event::Input(evt)).unwrap();
-            if evt == event::Key::Char('q') {
-                break;
-            }
-        }
-    });
-
-    // Tick
-    thread::spawn(move || loop {
-        clock_tx.send(Event::Tick).unwrap();
-        thread::sleep(time::Duration::from_millis(500));
-    });
-
-    // App
-    let mut app = App::new();
-
-    // First draw call
-    terminal.clear().unwrap();
-    terminal.hide_cursor().unwrap();
-    app.size = terminal.size().unwrap();
-    draw(&mut terminal, &app);
-
-    loop {
-        let size = terminal.size().unwrap();
-        if app.size != size {
-            terminal.resize(size).unwrap();
-            app.size = size;
-        }
-
-        let evt = rx.recv().unwrap();
-        match evt {
-            Event::Input(input) => if input == event::Key::Char('q') {
-                break;
-            },
-            Event::Tick => {
-                app.advance();
-            }
-        }
-        draw(&mut terminal, &app);
+    if let Err(err) = res {
+        println!("{err:?}");
    }

-    terminal.show_cursor().unwrap();
+    Ok(())
 }

-fn draw(t: &mut Terminal<MouseBackend>, app: &App) {
-    Group::default()
-        .direction(Direction::Vertical)
-        .margin(2)
-        .sizes(&[Size::Percent(50), Size::Percent(50)])
-        .render(t, &app.size, |t, chunks| {
-            BarChart::default()
-                .block(Block::default().title("Data1").borders(Borders::ALL))
-                .data(&app.data)
-                .bar_width(9)
-                .style(Style::default().fg(Color::Yellow))
-                .value_style(Style::default().fg(Color::Black).bg(Color::Yellow))
-                .render(t, &chunks[0]);
-            Group::default()
-                .direction(Direction::Horizontal)
-                .sizes(&[Size::Percent(50), Size::Percent(50)])
-                .render(t, &chunks[1], |t, chunks| {
-                    BarChart::default()
-                        .block(Block::default().title("Data2").borders(Borders::ALL))
-                        .data(&app.data)
-                        .bar_width(5)
-                        .bar_gap(3)
-                        .style(Style::default().fg(Color::Green))
-                        .value_style(Style::default().bg(Color::Green).modifier(Modifier::Bold))
-                        .render(t, &chunks[0]);
-                    BarChart::default()
-                        .block(Block::default().title("Data3").borders(Borders::ALL))
-                        .data(&app.data)
-                        .style(Style::default().fg(Color::Red))
-                        .bar_width(7)
-                        .bar_gap(0)
-                        .value_style(Style::default().bg(Color::Red))
-                        .label_style(Style::default().fg(Color::Cyan).modifier(Modifier::Italic))
-                        .render(t, &chunks[1]);
+fn run_app<B: Backend>(
+    terminal: &mut Terminal<B>,
+    mut app: App,
+    tick_rate: Duration,
+) -> io::Result<()> {
+    let mut last_tick = Instant::now();
+    loop {
+        terminal.draw(|f| ui(f, &app))?;
+
+        let timeout = tick_rate.saturating_sub(last_tick.elapsed());
+        if crossterm::event::poll(timeout)? {
+            if let Event::Key(key) = event::read()? {
+                if key.code == KeyCode::Char('q') {
+                    return Ok(());
+                }
+            }
+        }
+        if last_tick.elapsed() >= tick_rate {
+            app.on_tick();
+            last_tick = Instant::now();
+        }
+    }
+}
+
+fn ui(frame: &mut Frame, app: &App) {
+    let vertical = Layout::vertical([Constraint::Ratio(1, 3), Constraint::Ratio(2, 3)]);
+    let horizontal = Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)]);
+    let [top, bottom] = vertical.areas(frame.size());
+    let [left, right] = horizontal.areas(bottom);
+
+    let barchart = BarChart::default()
+        .block(Block::bordered().title("Data1"))
+        .data(&app.data)
+        .bar_width(9)
+        .bar_style(Style::default().fg(Color::Yellow))
+        .value_style(Style::default().fg(Color::Black).bg(Color::Yellow));
+
+    frame.render_widget(barchart, top);
+    draw_bar_with_group_labels(frame, app, left);
+    draw_horizontal_bars(frame, app, right);
+}
+
+#[allow(clippy::cast_precision_loss)]
+fn create_groups<'a>(app: &'a App, combine_values_and_labels: bool) -> Vec<BarGroup<'a>> {
+    app.months
+        .iter()
+        .enumerate()
+        .map(|(i, &month)| {
+            let bars: Vec<Bar> = app
+                .companies
+                .iter()
+                .map(|c| {
+                    let mut bar = Bar::default()
+                        .value(c.revenue[i])
+                        .style(c.bar_style)
+                        .value_style(
+                            Style::default()
+                                .bg(c.bar_style.fg.unwrap())
+                                .fg(Color::Black),
+                        );
+
+                    if combine_values_and_labels {
+                        bar = bar.text_value(format!(
+                            "{} ({:.1} M)",
+                            c.label,
+                            (c.revenue[i] as f64) / 1000.
+                        ));
+                    } else {
+                        bar = bar
+                            .text_value(format!("{:.1}", (c.revenue[i] as f64) / 1000.))
+                            .label(c.label.into());
+                    }
+                    bar
                })
-        });
-
-    t.draw().unwrap();
+                .collect();
+            BarGroup::default()
+                .label(Line::from(month).centered())
+                .bars(&bars)
+        })
+        .collect()
+}
+
+#[allow(clippy::cast_possible_truncation)]
+fn draw_bar_with_group_labels(f: &mut Frame, app: &App, area: Rect) {
+    const LEGEND_HEIGHT: u16 = 6;
+
+    let groups = create_groups(app, false);
+
+    let mut barchart = BarChart::default()
+        .block(Block::bordered().title("Data1"))
+        .bar_width(7)
+        .group_gap(3);
+
+    for group in groups {
+        barchart = barchart.data(group);
+    }
+
+    f.render_widget(barchart, area);
+
+    if area.height >= LEGEND_HEIGHT && area.width >= TOTAL_REVENUE.len() as u16 + 2 {
+        let legend_width = TOTAL_REVENUE.len() as u16 + 2;
+        let legend_area = Rect {
+            height: LEGEND_HEIGHT,
+            width: legend_width,
+            y: area.y,
+            x: area.right() - legend_width,
+        };
+        draw_legend(f, legend_area);
+    }
+}
+
+#[allow(clippy::cast_possible_truncation)]
+fn draw_horizontal_bars(f: &mut Frame, app: &App, area: Rect) {
+    const LEGEND_HEIGHT: u16 = 6;
+
+    let groups = create_groups(app, true);
+
+    let mut barchart = BarChart::default()
+        .block(Block::bordered().title("Data1"))
+        .bar_width(1)
+        .group_gap(1)
+        .bar_gap(0)
+        .direction(Direction::Horizontal);
+
+    for group in groups {
+        barchart = barchart.data(group);
+    }
+
+    f.render_widget(barchart, area);
+
+    if area.height >= LEGEND_HEIGHT && area.width >= TOTAL_REVENUE.len() as u16 + 2 {
+        let legend_width = TOTAL_REVENUE.len() as u16 + 2;
+        let legend_area = Rect {
+            height: LEGEND_HEIGHT,
+            width: legend_width,
+            y: area.y,
+            x: area.right() - legend_width,
+        };
+        draw_legend(f, legend_area);
+    }
+}
+
+fn draw_legend(f: &mut Frame, area: Rect) {
+    let text = vec![
+        Line::from(Span::styled(
+            TOTAL_REVENUE,
+            Style::default()
+                .add_modifier(Modifier::BOLD)
+                .fg(Color::White),
+        )),
+        Line::from(Span::styled(
+            "- Company A",
+            Style::default().fg(Color::Green),
+        )),
+        Line::from(Span::styled(
+            "- Company B",
+            Style::default().fg(Color::Yellow),
+        )),
+        Line::from(Span::styled(
+            "- Company C",
+            Style::default().fg(Color::White),
+        )),
+    ];
+
+    let block = Block::bordered().style(Style::default().fg(Color::White));
+    let paragraph = Paragraph::new(text).block(block);
+    f.render_widget(paragraph, area);
 }
--- a/examples/block.rs
+++ b/examples/block.rs
@@ -1,83 +1,258 @@
-extern crate termion;
-extern crate tui;
+//! # [Ratatui] Block example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md

-use std::io;
-use termion::event;
-use termion::input::TermRead;
+use std::{
+    error::Error,
+    io::{stdout, Stdout},
+    ops::ControlFlow,
+    time::Duration,
+};

-use tui::Terminal;
-use tui::backend::MouseBackend;
-use tui::widgets::{Block, Borders, Widget};
-use tui::layout::{Direction, Group, Rect, Size};
-use tui::style::{Color, Modifier, Style};
+use itertools::Itertools;
+use ratatui::{
+    backend::CrosstermBackend,
+    crossterm::{
+        event::{self, Event, KeyCode},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    layout::{Alignment, Constraint, Layout, Rect},
+    style::{Style, Stylize},
+    terminal::Frame,
+    text::Line,
+    widgets::{
+        block::{Position, Title},
+        Block, BorderType, Borders, Padding, Paragraph, Wrap,
+    },
+};

-fn main() {
-    let mut terminal = Terminal::new(MouseBackend::new().unwrap()).unwrap();
-    let stdin = io::stdin();
-    terminal.clear().unwrap();
-    terminal.hide_cursor().unwrap();
+// These type aliases are used to make the code more readable by reducing repetition of the generic
+// types. They are not necessary for the functionality of the code.
+type Terminal = ratatui::Terminal<CrosstermBackend<Stdout>>;
+type Result<T> = std::result::Result<T, Box<dyn Error>>;

-    let mut term_size = terminal.size().unwrap();
-    draw(&mut terminal, &term_size);
-    for c in stdin.keys() {
-        let size = terminal.size().unwrap();
-        if term_size != size {
-            terminal.resize(size).unwrap();
-            term_size = size;
-        }
-        draw(&mut terminal, &term_size);
-        let evt = c.unwrap();
-        if evt == event::Key::Char('q') {
-            break;
+fn main() -> Result<()> {
+    let mut terminal = setup_terminal()?;
+    let result = run(&mut terminal);
+    restore_terminal(terminal)?;
+
+    if let Err(err) = result {
+        eprintln!("{err:?}");
+    }
+    Ok(())
+}
+
+fn setup_terminal() -> Result<Terminal> {
+    enable_raw_mode()?;
+    let mut stdout = stdout();
+    execute!(stdout, EnterAlternateScreen)?;
+    let backend = CrosstermBackend::new(stdout);
+    let terminal = Terminal::new(backend)?;
+    Ok(terminal)
+}
+
+fn restore_terminal(mut terminal: Terminal) -> Result<()> {
+    disable_raw_mode()?;
+    execute!(terminal.backend_mut(), LeaveAlternateScreen)?;
+    Ok(())
+}
+
+fn run(terminal: &mut Terminal) -> Result<()> {
+    loop {
+        terminal.draw(ui)?;
+        if handle_events()?.is_break() {
+            return Ok(());
        }
    }
-    terminal.show_cursor().unwrap();
 }

-fn draw(t: &mut Terminal<MouseBackend>, size: &Rect) {
-    // Wrapping block for a group
-    // Just draw the block and the group on the same area and build the group
-    // with at least a margin of 1
-    Block::default().borders(Borders::ALL).render(t, size);
-    Group::default()
-        .direction(Direction::Vertical)
-        .margin(4)
-        .sizes(&[Size::Percent(50), Size::Percent(50)])
-        .render(t, size, |t, chunks| {
-            Group::default()
-                .direction(Direction::Horizontal)
-                .sizes(&[Size::Percent(50), Size::Percent(50)])
-                .render(t, &chunks[0], |t, chunks| {
-                    Block::default()
-                        .title("With background")
-                        .title_style(Style::default().fg(Color::Yellow))
-                        .style(Style::default().bg(Color::Green))
-                        .render(t, &chunks[0]);
-                    Block::default()
-                        .title("Styled title")
-                        .title_style(
-                            Style::default()
-                                .fg(Color::White)
-                                .bg(Color::Red)
-                                .modifier(Modifier::Bold),
-                        )
-                        .render(t, &chunks[1]);
-                });
-            Group::default()
-                .direction(Direction::Horizontal)
-                .sizes(&[Size::Percent(50), Size::Percent(50)])
-                .render(t, &chunks[1], |t, chunks| {
-                    Block::default()
-                        .title("With borders")
-                        .borders(Borders::ALL)
-                        .render(t, &chunks[0]);
-                    Block::default()
-                        .title("With styled borders")
-                        .border_style(Style::default().fg(Color::Cyan))
-                        .borders(Borders::LEFT | Borders::RIGHT)
-                        .render(t, &chunks[1]);
-                });
-        });
-
-    t.draw().unwrap();
+fn handle_events() -> Result<ControlFlow<()>> {
+    if event::poll(Duration::from_millis(100))? {
+        if let Event::Key(key) = event::read()? {
+            if key.code == KeyCode::Char('q') {
+                return Ok(ControlFlow::Break(()));
+            }
+        }
+    }
+    Ok(ControlFlow::Continue(()))
+}
+
+fn ui(frame: &mut Frame) {
+    let (title_area, layout) = calculate_layout(frame.size());
+
+    render_title(frame, title_area);
+
+    let paragraph = placeholder_paragraph();
+
+    render_borders(&paragraph, Borders::ALL, frame, layout[0][0]);
+    render_borders(&paragraph, Borders::NONE, frame, layout[0][1]);
+    render_borders(&paragraph, Borders::LEFT, frame, layout[1][0]);
+    render_borders(&paragraph, Borders::RIGHT, frame, layout[1][1]);
+    render_borders(&paragraph, Borders::TOP, frame, layout[2][0]);
+    render_borders(&paragraph, Borders::BOTTOM, frame, layout[2][1]);
+
+    render_border_type(&paragraph, BorderType::Plain, frame, layout[3][0]);
+    render_border_type(&paragraph, BorderType::Rounded, frame, layout[3][1]);
+    render_border_type(&paragraph, BorderType::Double, frame, layout[4][0]);
+    render_border_type(&paragraph, BorderType::Thick, frame, layout[4][1]);
+
+    render_styled_block(&paragraph, frame, layout[5][0]);
+    render_styled_borders(&paragraph, frame, layout[5][1]);
+    render_styled_title(&paragraph, frame, layout[6][0]);
+    render_styled_title_content(&paragraph, frame, layout[6][1]);
+    render_multiple_titles(&paragraph, frame, layout[7][0]);
+    render_multiple_title_positions(&paragraph, frame, layout[7][1]);
+    render_padding(&paragraph, frame, layout[8][0]);
+    render_nested_blocks(&paragraph, frame, layout[8][1]);
+}
+
+/// Calculate the layout of the UI elements.
+///
+/// Returns a tuple of the title area and the main areas.
+fn calculate_layout(area: Rect) -> (Rect, Vec<Vec<Rect>>) {
+    let main_layout = Layout::vertical([Constraint::Length(1), Constraint::Min(0)]);
+    let block_layout = Layout::vertical([Constraint::Max(4); 9]);
+    let [title_area, main_area] = main_layout.areas(area);
+    let main_areas = block_layout
+        .split(main_area)
+        .iter()
+        .map(|&area| {
+            Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)])
+                .split(area)
+                .to_vec()
+        })
+        .collect_vec();
+    (title_area, main_areas)
+}
+
+fn render_title(frame: &mut Frame, area: Rect) {
+    frame.render_widget(
+        Paragraph::new("Block example. Press q to quit")
+            .dark_gray()
+            .alignment(Alignment::Center),
+        area,
+    );
+}
+
+fn placeholder_paragraph() -> Paragraph<'static> {
+    let text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+    Paragraph::new(text.dark_gray()).wrap(Wrap { trim: true })
+}
+
+fn render_borders(paragraph: &Paragraph, border: Borders, frame: &mut Frame, area: Rect) {
+    let block = Block::new()
+        .borders(border)
+        .title(format!("Borders::{border:#?}"));
+    frame.render_widget(paragraph.clone().block(block), area);
+}
+
+fn render_border_type(
+    paragraph: &Paragraph,
+    border_type: BorderType,
+    frame: &mut Frame,
+    area: Rect,
+) {
+    let block = Block::bordered()
+        .border_type(border_type)
+        .title(format!("BorderType::{border_type:#?}"));
+    frame.render_widget(paragraph.clone().block(block), area);
+}
+fn render_styled_borders(paragraph: &Paragraph, frame: &mut Frame, area: Rect) {
+    let block = Block::bordered()
+        .border_style(Style::new().blue().on_white().bold().italic())
+        .title("Styled borders");
+    frame.render_widget(paragraph.clone().block(block), area);
+}
+
+fn render_styled_block(paragraph: &Paragraph, frame: &mut Frame, area: Rect) {
+    let block = Block::bordered()
+        .style(Style::new().blue().on_white().bold().italic())
+        .title("Styled block");
+    frame.render_widget(paragraph.clone().block(block), area);
+}
+
+// Note: this currently renders incorrectly, see https://github.com/ratatui-org/ratatui/issues/349
+fn render_styled_title(paragraph: &Paragraph, frame: &mut Frame, area: Rect) {
+    let block = Block::bordered()
+        .title("Styled title")
+        .title_style(Style::new().blue().on_white().bold().italic());
+    frame.render_widget(paragraph.clone().block(block), area);
+}
+
+fn render_styled_title_content(paragraph: &Paragraph, frame: &mut Frame, area: Rect) {
+    let title = Line::from(vec![
+        "Styled ".blue().on_white().bold().italic(),
+        "title content".red().on_white().bold().italic(),
+    ]);
+    let block = Block::bordered().title(title);
+    frame.render_widget(paragraph.clone().block(block), area);
+}
+
+fn render_multiple_titles(paragraph: &Paragraph, frame: &mut Frame, area: Rect) {
+    let block = Block::bordered()
+        .title("Multiple".blue().on_white().bold().italic())
+        .title("Titles".red().on_white().bold().italic());
+    frame.render_widget(paragraph.clone().block(block), area);
+}
+
+fn render_multiple_title_positions(paragraph: &Paragraph, frame: &mut Frame, area: Rect) {
+    let block = Block::bordered()
+        .title(
+            Title::from("top left")
+                .position(Position::Top)
+                .alignment(Alignment::Left),
+        )
+        .title(
+            Title::from("top center")
+                .position(Position::Top)
+                .alignment(Alignment::Center),
+        )
+        .title(
+            Title::from("top right")
+                .position(Position::Top)
+                .alignment(Alignment::Right),
+        )
+        .title(
+            Title::from("bottom left")
+                .position(Position::Bottom)
+                .alignment(Alignment::Left),
+        )
+        .title(
+            Title::from("bottom center")
+                .position(Position::Bottom)
+                .alignment(Alignment::Center),
+        )
+        .title(
+            Title::from("bottom right")
+                .position(Position::Bottom)
+                .alignment(Alignment::Right),
+        );
+    frame.render_widget(paragraph.clone().block(block), area);
+}
+
+fn render_padding(paragraph: &Paragraph, frame: &mut Frame, area: Rect) {
+    let block = Block::bordered()
+        .padding(Padding::new(5, 10, 1, 2))
+        .title("Padding");
+    frame.render_widget(paragraph.clone().block(block), area);
+}
+
+fn render_nested_blocks(paragraph: &Paragraph, frame: &mut Frame, area: Rect) {
+    let outer_block = Block::bordered().title("Outer block");
+    let inner_block = Block::bordered().title("Inner block");
+    let inner = outer_block.inner(area);
+    frame.render_widget(outer_block, area);
+    frame.render_widget(paragraph.clone().block(inner_block), inner);
 }
--- a/examples/calendar.rs
+++ b/examples/calendar.rs
@@ -0,0 +1,267 @@
+//! # [Ratatui] Calendar example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+use std::{error::Error, io};
+
+use ratatui::{
+    backend::CrosstermBackend,
+    crossterm::{
+        event::{self, Event, KeyCode},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    layout::{Constraint, Layout, Rect},
+    style::{Color, Modifier, Style},
+    widgets::calendar::{CalendarEventStore, DateStyler, Monthly},
+    Frame, Terminal,
+};
+use time::{Date, Month, OffsetDateTime};
+
+fn main() -> Result<(), Box<dyn Error>> {
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;
+
+    loop {
+        let _ = terminal.draw(draw);
+
+        if let Event::Key(key) = event::read()? {
+            #[allow(clippy::single_match)]
+            match key.code {
+                KeyCode::Char(_) => {
+                    break;
+                }
+                _ => {}
+            };
+        }
+    }
+
+    disable_raw_mode()?;
+    execute!(terminal.backend_mut(), LeaveAlternateScreen)?;
+    terminal.show_cursor()?;
+    Ok(())
+}
+
+fn draw(frame: &mut Frame) {
+    let app_area = frame.size();
+
+    let calarea = Rect {
+        x: app_area.x + 1,
+        y: app_area.y + 1,
+        height: app_area.height - 1,
+        width: app_area.width - 1,
+    };
+
+    let mut start = OffsetDateTime::now_local()
+        .unwrap()
+        .date()
+        .replace_month(Month::January)
+        .unwrap()
+        .replace_day(1)
+        .unwrap();
+
+    let list = make_dates(start.year());
+
+    let rows = Layout::vertical([Constraint::Ratio(1, 3); 3]).split(calarea);
+    let cols = rows.iter().flat_map(|row| {
+        Layout::horizontal([Constraint::Ratio(1, 4); 4])
+            .split(*row)
+            .to_vec()
+    });
+    for col in cols {
+        let cal = cals::get_cal(start.month(), start.year(), &list);
+        frame.render_widget(cal, col);
+        start = start.replace_month(start.month().next()).unwrap();
+    }
+}
+
+fn make_dates(current_year: i32) -> CalendarEventStore {
+    let mut list = CalendarEventStore::today(
+        Style::default()
+            .add_modifier(Modifier::BOLD)
+            .bg(Color::Blue),
+    );
+
+    // Holidays
+    let holiday_style = Style::default()
+        .fg(Color::Red)
+        .add_modifier(Modifier::UNDERLINED);
+
+    // new year's
+    list.add(
+        Date::from_calendar_date(current_year, Month::January, 1).unwrap(),
+        holiday_style,
+    );
+    // next new_year's for December "show surrounding"
+    list.add(
+        Date::from_calendar_date(current_year + 1, Month::January, 1).unwrap(),
+        holiday_style,
+    );
+    // groundhog day
+    list.add(
+        Date::from_calendar_date(current_year, Month::February, 2).unwrap(),
+        holiday_style,
+    );
+    // april fool's
+    list.add(
+        Date::from_calendar_date(current_year, Month::April, 1).unwrap(),
+        holiday_style,
+    );
+    // earth day
+    list.add(
+        Date::from_calendar_date(current_year, Month::April, 22).unwrap(),
+        holiday_style,
+    );
+    // star wars day
+    list.add(
+        Date::from_calendar_date(current_year, Month::May, 4).unwrap(),
+        holiday_style,
+    );
+    // festivus
+    list.add(
+        Date::from_calendar_date(current_year, Month::December, 23).unwrap(),
+        holiday_style,
+    );
+    // new year's eve
+    list.add(
+        Date::from_calendar_date(current_year, Month::December, 31).unwrap(),
+        holiday_style,
+    );
+
+    // seasons
+    let season_style = Style::default()
+        .fg(Color::White)
+        .bg(Color::Yellow)
+        .add_modifier(Modifier::UNDERLINED);
+    // spring equinox
+    list.add(
+        Date::from_calendar_date(current_year, Month::March, 22).unwrap(),
+        season_style,
+    );
+    // summer solstice
+    list.add(
+        Date::from_calendar_date(current_year, Month::June, 21).unwrap(),
+        season_style,
+    );
+    // fall equinox
+    list.add(
+        Date::from_calendar_date(current_year, Month::September, 22).unwrap(),
+        season_style,
+    );
+    list.add(
+        Date::from_calendar_date(current_year, Month::December, 21).unwrap(),
+        season_style,
+    );
+    list
+}
+
+mod cals {
+    #[allow(clippy::wildcard_imports)]
+    use super::*;
+
+    pub fn get_cal<'a, DS: DateStyler>(m: Month, y: i32, es: DS) -> Monthly<'a, DS> {
+        match m {
+            Month::May => example1(m, y, es),
+            Month::June => example2(m, y, es),
+            Month::July | Month::December => example3(m, y, es),
+            Month::February => example4(m, y, es),
+            Month::November => example5(m, y, es),
+            _ => default(m, y, es),
+        }
+    }
+
+    fn default<'a, DS: DateStyler>(m: Month, y: i32, es: DS) -> Monthly<'a, DS> {
+        let default_style = Style::default()
+            .add_modifier(Modifier::BOLD)
+            .bg(Color::Rgb(50, 50, 50));
+
+        Monthly::new(Date::from_calendar_date(y, m, 1).unwrap(), es)
+            .show_month_header(Style::default())
+            .default_style(default_style)
+    }
+
+    fn example1<'a, DS: DateStyler>(m: Month, y: i32, es: DS) -> Monthly<'a, DS> {
+        let default_style = Style::default()
+            .add_modifier(Modifier::BOLD)
+            .bg(Color::Rgb(50, 50, 50));
+
+        Monthly::new(Date::from_calendar_date(y, m, 1).unwrap(), es)
+            .show_surrounding(default_style)
+            .default_style(default_style)
+            .show_month_header(Style::default())
+    }
+
+    fn example2<'a, DS: DateStyler>(m: Month, y: i32, es: DS) -> Monthly<'a, DS> {
+        let header_style = Style::default()
+            .add_modifier(Modifier::BOLD)
+            .add_modifier(Modifier::DIM)
+            .fg(Color::LightYellow);
+
+        let default_style = Style::default()
+            .add_modifier(Modifier::BOLD)
+            .bg(Color::Rgb(50, 50, 50));
+
+        Monthly::new(Date::from_calendar_date(y, m, 1).unwrap(), es)
+            .show_weekdays_header(header_style)
+            .default_style(default_style)
+            .show_month_header(Style::default())
+    }
+
+    fn example3<'a, DS: DateStyler>(m: Month, y: i32, es: DS) -> Monthly<'a, DS> {
+        let header_style = Style::default()
+            .add_modifier(Modifier::BOLD)
+            .fg(Color::Green);
+
+        let default_style = Style::default()
+            .add_modifier(Modifier::BOLD)
+            .bg(Color::Rgb(50, 50, 50));
+
+        Monthly::new(Date::from_calendar_date(y, m, 1).unwrap(), es)
+            .show_surrounding(Style::default().add_modifier(Modifier::DIM))
+            .show_weekdays_header(header_style)
+            .default_style(default_style)
+            .show_month_header(Style::default())
+    }
+
+    fn example4<'a, DS: DateStyler>(m: Month, y: i32, es: DS) -> Monthly<'a, DS> {
+        let header_style = Style::default()
+            .add_modifier(Modifier::BOLD)
+            .fg(Color::Green);
+
+        let default_style = Style::default()
+            .add_modifier(Modifier::BOLD)
+            .bg(Color::Rgb(50, 50, 50));
+
+        Monthly::new(Date::from_calendar_date(y, m, 1).unwrap(), es)
+            .show_weekdays_header(header_style)
+            .default_style(default_style)
+    }
+
+    fn example5<'a, DS: DateStyler>(m: Month, y: i32, es: DS) -> Monthly<'a, DS> {
+        let header_style = Style::default()
+            .add_modifier(Modifier::BOLD)
+            .fg(Color::Green);
+
+        let default_style = Style::default()
+            .add_modifier(Modifier::BOLD)
+            .bg(Color::Rgb(50, 50, 50));
+
+        Monthly::new(Date::from_calendar_date(y, m, 1).unwrap(), es)
+            .show_month_header(header_style)
+            .default_style(default_style)
+    }
+}
--- a/examples/canvas.rs
+++ b/examples/canvas.rs
@@ -1,205 +1,218 @@
-extern crate termion;
-extern crate tui;
+//! # [Ratatui] Canvas example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md

-use std::io;
-use std::thread;
-use std::time;
-use std::sync::mpsc;
+use std::{
+    io::{self, stdout, Stdout},
+    time::{Duration, Instant},
+};

-use termion::event;
-use termion::input::TermRead;
+use ratatui::{
+    backend::CrosstermBackend,
+    crossterm::{
+        event::{self, Event, KeyCode},
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+        ExecutableCommand,
+    },
+    layout::{Constraint, Layout, Rect},
+    style::{Color, Stylize},
+    symbols::Marker,
+    terminal::{Frame, Terminal},
+    widgets::{
+        canvas::{Canvas, Circle, Map, MapResolution, Rectangle},
+        Block, Widget,
+    },
+};

-use tui::Terminal;
-use tui::backend::MouseBackend;
-use tui::widgets::{Block, Borders, Widget};
-use tui::widgets::canvas::{Canvas, Line, Map, MapResolution};
-use tui::layout::{Direction, Group, Rect, Size};
-use tui::style::Color;
+fn main() -> io::Result<()> {
+    App::run()
+}

 struct App {
-    size: Rect,
    x: f64,
    y: f64,
-    ball: Rect,
+    ball: Circle,
    playground: Rect,
-    vx: u16,
-    vy: u16,
-    dir_x: bool,
-    dir_y: bool,
+    vx: f64,
+    vy: f64,
+    tick_count: u64,
+    marker: Marker,
 }

 impl App {
-    fn new() -> App {
-        App {
-            size: Default::default(),
+    fn new() -> Self {
+        Self {
            x: 0.0,
            y: 0.0,
-            ball: Rect::new(10, 30, 10, 10),
-            playground: Rect::new(10, 10, 100, 100),
-            vx: 1,
-            vy: 1,
-            dir_x: true,
-            dir_y: true,
-        }
-    }
-
-    fn advance(&mut self) {
-        if self.ball.left() < self.playground.left() || self.ball.right() > self.playground.right()
-        {
-            self.dir_x = !self.dir_x;
-        }
-        if self.ball.top() < self.playground.top() || self.ball.bottom() > self.playground.bottom()
-        {
-            self.dir_y = !self.dir_y;
-        }
-
-        if self.dir_x {
-            self.ball.x += self.vx;
-        } else {
-            self.ball.x -= self.vx;
-        }
-
-        if self.dir_y {
-            self.ball.y += self.vy;
-        } else {
-            self.ball.y -= self.vy
-        }
-    }
-}
-
-enum Event {
-    Input(event::Key),
-    Tick,
-}
-
-fn main() {
-    // Terminal initialization
-    let backend = MouseBackend::new().unwrap();
-    let mut terminal = Terminal::new(backend).unwrap();
-
-    // Channels
-    let (tx, rx) = mpsc::channel();
-    let input_tx = tx.clone();
-    let clock_tx = tx.clone();
-
-    // Input
-    thread::spawn(move || {
-        let stdin = io::stdin();
-        for c in stdin.keys() {
-            let evt = c.unwrap();
-            input_tx.send(Event::Input(evt)).unwrap();
-            if evt == event::Key::Char('q') {
-                break;
-            }
-        }
-    });
-
-    // Tick
-    thread::spawn(move || loop {
-        clock_tx.send(Event::Tick).unwrap();
-        thread::sleep(time::Duration::from_millis(500));
-    });
-
-    // App
-    let mut app = App::new();
-
-    // First draw call
-    terminal.clear().unwrap();
-    terminal.hide_cursor().unwrap();
-    app.size = terminal.size().unwrap();
-    draw(&mut terminal, &app);
-
-    loop {
-        let size = terminal.size().unwrap();
-        if size != app.size {
-            terminal.resize(size).unwrap();
-            app.size = size;
-        }
-
-        let evt = rx.recv().unwrap();
-        match evt {
-            Event::Input(input) => match input {
-                event::Key::Char('q') => {
-                    break;
-                }
-                event::Key::Down => {
-                    app.y += 1.0;
-                }
-                event::Key::Up => {
-                    app.y -= 1.0;
-                }
-                event::Key::Right => {
-                    app.x += 1.0;
-                }
-                event::Key::Left => {
-                    app.x -= 1.0;
-                }
-
-                _ => {}
+            ball: Circle {
+                x: 20.0,
+                y: 40.0,
+                radius: 10.0,
+                color: Color::Yellow,
            },
-            Event::Tick => {
-                app.advance();
-            }
+            playground: Rect::new(10, 10, 200, 100),
+            vx: 1.0,
+            vy: 1.0,
+            tick_count: 0,
+            marker: Marker::Dot,
        }
-        draw(&mut terminal, &app);
    }

-    terminal.show_cursor().unwrap();
+    pub fn run() -> io::Result<()> {
+        let mut terminal = init_terminal()?;
+        let mut app = Self::new();
+        let mut last_tick = Instant::now();
+        let tick_rate = Duration::from_millis(16);
+        loop {
+            let _ = terminal.draw(|frame| app.ui(frame));
+            let timeout = tick_rate.saturating_sub(last_tick.elapsed());
+            if event::poll(timeout)? {
+                if let Event::Key(key) = event::read()? {
+                    match key.code {
+                        KeyCode::Char('q') => break,
+                        KeyCode::Down | KeyCode::Char('j') => app.y += 1.0,
+                        KeyCode::Up | KeyCode::Char('k') => app.y -= 1.0,
+                        KeyCode::Right | KeyCode::Char('l') => app.x += 1.0,
+                        KeyCode::Left | KeyCode::Char('h') => app.x -= 1.0,
+                        _ => {}
+                    }
+                }
+            }
+
+            if last_tick.elapsed() >= tick_rate {
+                app.on_tick();
+                last_tick = Instant::now();
+            }
+        }
+        restore_terminal()
+    }
+
+    fn on_tick(&mut self) {
+        self.tick_count += 1;
+        // only change marker every 180 ticks (3s) to avoid stroboscopic effect
+        if (self.tick_count % 180) == 0 {
+            self.marker = match self.marker {
+                Marker::Dot => Marker::Braille,
+                Marker::Braille => Marker::Block,
+                Marker::Block => Marker::HalfBlock,
+                Marker::HalfBlock => Marker::Bar,
+                Marker::Bar => Marker::Dot,
+            };
+        }
+        // bounce the ball by flipping the velocity vector
+        let ball = &self.ball;
+        let playground = self.playground;
+        if ball.x - ball.radius < f64::from(playground.left())
+            || ball.x + ball.radius > f64::from(playground.right())
+        {
+            self.vx = -self.vx;
+        }
+        if ball.y - ball.radius < f64::from(playground.top())
+            || ball.y + ball.radius > f64::from(playground.bottom())
+        {
+            self.vy = -self.vy;
+        }
+
+        self.ball.x += self.vx;
+        self.ball.y += self.vy;
+    }
+
+    fn ui(&self, frame: &mut Frame) {
+        let horizontal =
+            Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)]);
+        let vertical = Layout::vertical([Constraint::Percentage(50), Constraint::Percentage(50)]);
+        let [map, right] = horizontal.areas(frame.size());
+        let [pong, boxes] = vertical.areas(right);
+
+        frame.render_widget(self.map_canvas(), map);
+        frame.render_widget(self.pong_canvas(), pong);
+        frame.render_widget(self.boxes_canvas(boxes), boxes);
+    }
+
+    fn map_canvas(&self) -> impl Widget + '_ {
+        Canvas::default()
+            .block(Block::bordered().title("World"))
+            .marker(self.marker)
+            .paint(|ctx| {
+                ctx.draw(&Map {
+                    color: Color::Green,
+                    resolution: MapResolution::High,
+                });
+                ctx.print(self.x, -self.y, "You are here".yellow());
+            })
+            .x_bounds([-180.0, 180.0])
+            .y_bounds([-90.0, 90.0])
+    }
+
+    fn pong_canvas(&self) -> impl Widget + '_ {
+        Canvas::default()
+            .block(Block::bordered().title("Pong"))
+            .marker(self.marker)
+            .paint(|ctx| {
+                ctx.draw(&self.ball);
+            })
+            .x_bounds([10.0, 210.0])
+            .y_bounds([10.0, 110.0])
+    }
+
+    fn boxes_canvas(&self, area: Rect) -> impl Widget {
+        let left = 0.0;
+        let right = f64::from(area.width);
+        let bottom = 0.0;
+        let top = f64::from(area.height).mul_add(2.0, -4.0);
+        Canvas::default()
+            .block(Block::bordered().title("Rects"))
+            .marker(self.marker)
+            .x_bounds([left, right])
+            .y_bounds([bottom, top])
+            .paint(|ctx| {
+                for i in 0..=11 {
+                    ctx.draw(&Rectangle {
+                        x: f64::from(i * i + 3 * i) / 2.0 + 2.0,
+                        y: 2.0,
+                        width: f64::from(i),
+                        height: f64::from(i),
+                        color: Color::Red,
+                    });
+                    ctx.draw(&Rectangle {
+                        x: f64::from(i * i + 3 * i) / 2.0 + 2.0,
+                        y: 21.0,
+                        width: f64::from(i),
+                        height: f64::from(i),
+                        color: Color::Blue,
+                    });
+                }
+                for i in 0..100 {
+                    if i % 10 != 0 {
+                        ctx.print(f64::from(i) + 1.0, 0.0, format!("{i}", i = i % 10));
+                    }
+                    if i % 2 == 0 && i % 10 != 0 {
+                        ctx.print(0.0, f64::from(i), format!("{i}", i = i % 10));
+                    }
+                }
+            })
+    }
 }

-fn draw(t: &mut Terminal<MouseBackend>, app: &App) {
-    Group::default()
-        .direction(Direction::Horizontal)
-        .sizes(&[Size::Percent(50), Size::Percent(50)])
-        .render(t, &app.size, |t, chunks| {
-            Canvas::default()
-                .block(Block::default().borders(Borders::ALL).title("World"))
-                .paint(|ctx| {
-                    ctx.draw(&Map {
-                        color: Color::White,
-                        resolution: MapResolution::High,
-                    });
-                    ctx.print(app.x, -app.y, "You are here", Color::Yellow);
-                })
-                .x_bounds([-180.0, 180.0])
-                .y_bounds([-90.0, 90.0])
-                .render(t, &chunks[0]);
-            Canvas::default()
-                .block(Block::default().borders(Borders::ALL).title("List"))
-                .paint(|ctx| {
-                    ctx.draw(&Line {
-                        x1: f64::from(app.ball.left()),
-                        y1: f64::from(app.ball.top()),
-                        x2: f64::from(app.ball.right()),
-                        y2: f64::from(app.ball.top()),
-                        color: Color::Yellow,
-                    });
-                    ctx.draw(&Line {
-                        x1: f64::from(app.ball.right()),
-                        y1: f64::from(app.ball.top()),
-                        x2: f64::from(app.ball.right()),
-                        y2: f64::from(app.ball.bottom()),
-                        color: Color::Yellow,
-                    });
-                    ctx.draw(&Line {
-                        x1: f64::from(app.ball.right()),
-                        y1: f64::from(app.ball.bottom()),
-                        x2: f64::from(app.ball.left()),
-                        y2: f64::from(app.ball.bottom()),
-                        color: Color::Yellow,
-                    });
-                    ctx.draw(&Line {
-                        x1: f64::from(app.ball.left()),
-                        y1: f64::from(app.ball.bottom()),
-                        x2: f64::from(app.ball.left()),
-                        y2: f64::from(app.ball.top()),
-                        color: Color::Yellow,
-                    });
-                })
-                .x_bounds([10.0, 110.0])
-                .y_bounds([10.0, 110.0])
-                .render(t, &chunks[1]);
-        });
-
-    t.draw().unwrap();
+fn init_terminal() -> io::Result<Terminal<CrosstermBackend<Stdout>>> {
+    enable_raw_mode()?;
+    stdout().execute(EnterAlternateScreen)?;
+    Terminal::new(CrosstermBackend::new(stdout()))
+}
+
+fn restore_terminal() -> io::Result<()> {
+    disable_raw_mode()?;
+    stdout().execute(LeaveAlternateScreen)?;
+    Ok(())
 }
--- a/examples/chart.rs
+++ b/examples/chart.rs
@@ -1,25 +1,68 @@
-extern crate termion;
-extern crate tui;
+//! # [Ratatui] Chart example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md

-mod util;
-use util::*;
+use std::{
+    error::Error,
+    io,
+    time::{Duration, Instant},
+};

-use std::io;
-use std::thread;
-use std::time;
-use std::sync::mpsc;
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    crossterm::{
+        event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    layout::{Alignment, Constraint, Layout, Rect},
+    style::{Color, Modifier, Style, Stylize},
+    symbols::{self, Marker},
+    terminal::{Frame, Terminal},
+    text::Span,
+    widgets::{block::Title, Axis, Block, Chart, Dataset, GraphType, LegendPosition},
+};

-use termion::event;
-use termion::input::TermRead;
+#[derive(Clone)]
+struct SinSignal {
+    x: f64,
+    interval: f64,
+    period: f64,
+    scale: f64,
+}

-use tui::Terminal;
-use tui::backend::MouseBackend;
-use tui::widgets::{Axis, Block, Borders, Chart, Dataset, Marker, Widget};
-use tui::layout::Rect;
-use tui::style::{Color, Modifier, Style};
+impl SinSignal {
+    const fn new(interval: f64, period: f64, scale: f64) -> Self {
+        Self {
+            x: 0.0,
+            interval,
+            period,
+            scale,
+        }
+    }
+}
+
+impl Iterator for SinSignal {
+    type Item = (f64, f64);
+    fn next(&mut self) -> Option<Self::Item> {
+        let point = (self.x, (self.x * 1.0 / self.period).sin() * self.scale);
+        self.x += self.interval;
+        Some(point)
+    }
+}

 struct App {
-    size: Rect,
    signal1: SinSignal,
    data1: Vec<(f64, f64)>,
    signal2: SinSignal,
@@ -28,140 +71,295 @@ struct App {
 }

 impl App {
-    fn new() -> App {
+    fn new() -> Self {
        let mut signal1 = SinSignal::new(0.2, 3.0, 18.0);
        let mut signal2 = SinSignal::new(0.1, 2.0, 10.0);
        let data1 = signal1.by_ref().take(200).collect::<Vec<(f64, f64)>>();
        let data2 = signal2.by_ref().take(200).collect::<Vec<(f64, f64)>>();
-        App {
-            size: Rect::default(),
-            signal1: signal1,
-            data1: data1,
-            signal2: signal2,
-            data2: data2,
+        Self {
+            signal1,
+            data1,
+            signal2,
+            data2,
            window: [0.0, 20.0],
        }
    }

-    fn advance(&mut self) {
-        for _ in 0..5 {
-            self.data1.remove(0);
-        }
+    fn on_tick(&mut self) {
+        self.data1.drain(0..5);
        self.data1.extend(self.signal1.by_ref().take(5));
-        for _ in 0..10 {
-            self.data2.remove(0);
-        }
+
+        self.data2.drain(0..10);
        self.data2.extend(self.signal2.by_ref().take(10));
+
        self.window[0] += 1.0;
        self.window[1] += 1.0;
    }
 }

-enum Event {
-    Input(event::Key),
-    Tick,
-}
+fn main() -> Result<(), Box<dyn Error>> {
+    // setup terminal
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;

-fn main() {
-    // Terminal initialization
-    let backend = MouseBackend::new().unwrap();
-    let mut terminal = Terminal::new(backend).unwrap();
+    // create app and run it
+    let tick_rate = Duration::from_millis(250);
+    let app = App::new();
+    let res = run_app(&mut terminal, app, tick_rate);

-    // Channels
-    let (tx, rx) = mpsc::channel();
-    let input_tx = tx.clone();
-    let clock_tx = tx.clone();
+    // restore terminal
+    disable_raw_mode()?;
+    execute!(
+        terminal.backend_mut(),
+        LeaveAlternateScreen,
+        DisableMouseCapture
+    )?;
+    terminal.show_cursor()?;

-    // Input
-    thread::spawn(move || {
-        let stdin = io::stdin();
-        for c in stdin.keys() {
-            let evt = c.unwrap();
-            input_tx.send(Event::Input(evt)).unwrap();
-            if evt == event::Key::Char('q') {
-                break;
-            }
-        }
-    });
-
-    // Tick
-    thread::spawn(move || loop {
-        clock_tx.send(Event::Tick).unwrap();
-        thread::sleep(time::Duration::from_millis(500));
-    });
-
-    // App
-    let mut app = App::new();
-
-    // First draw call
-    terminal.clear().unwrap();
-    terminal.hide_cursor().unwrap();
-    app.size = terminal.size().unwrap();
-    draw(&mut terminal, &app);
-
-    loop {
-        let size = terminal.size().unwrap();
-        if app.size != size {
-            terminal.resize(size).unwrap();
-            app.size = size;
-        }
-
-        let evt = rx.recv().unwrap();
-        match evt {
-            Event::Input(input) => if input == event::Key::Char('q') {
-                break;
-            },
-            Event::Tick => {
-                app.advance();
-            }
-        }
-        draw(&mut terminal, &app);
+    if let Err(err) = res {
+        println!("{err:?}");
    }

-    terminal.show_cursor().unwrap();
+    Ok(())
 }

-fn draw(t: &mut Terminal<MouseBackend>, app: &App) {
-    Chart::default()
-        .block(
-            Block::default()
-                .title("Chart")
-                .title_style(Style::default().fg(Color::Cyan).modifier(Modifier::Bold))
-                .borders(Borders::ALL),
-        )
+fn run_app<B: Backend>(
+    terminal: &mut Terminal<B>,
+    mut app: App,
+    tick_rate: Duration,
+) -> io::Result<()> {
+    let mut last_tick = Instant::now();
+    loop {
+        terminal.draw(|f| ui(f, &app))?;
+
+        let timeout = tick_rate.saturating_sub(last_tick.elapsed());
+        if crossterm::event::poll(timeout)? {
+            if let Event::Key(key) = event::read()? {
+                if key.code == KeyCode::Char('q') {
+                    return Ok(());
+                }
+            }
+        }
+        if last_tick.elapsed() >= tick_rate {
+            app.on_tick();
+            last_tick = Instant::now();
+        }
+    }
+}
+
+fn ui(frame: &mut Frame, app: &App) {
+    let area = frame.size();
+
+    let vertical = Layout::vertical([Constraint::Percentage(40), Constraint::Percentage(60)]);
+    let horizontal = Layout::horizontal([Constraint::Ratio(1, 2), Constraint::Ratio(1, 2)]);
+    let [chart1, bottom] = vertical.areas(area);
+    let [line_chart, scatter] = horizontal.areas(bottom);
+
+    render_chart1(frame, chart1, app);
+    render_line_chart(frame, line_chart);
+    render_scatter(frame, scatter);
+}
+
+fn render_chart1(f: &mut Frame, area: Rect, app: &App) {
+    let x_labels = vec![
+        Span::styled(
+            format!("{}", app.window[0]),
+            Style::default().add_modifier(Modifier::BOLD),
+        ),
+        Span::raw(format!("{}", (app.window[0] + app.window[1]) / 2.0)),
+        Span::styled(
+            format!("{}", app.window[1]),
+            Style::default().add_modifier(Modifier::BOLD),
+        ),
+    ];
+    let datasets = vec![
+        Dataset::default()
+            .name("data2")
+            .marker(symbols::Marker::Dot)
+            .style(Style::default().fg(Color::Cyan))
+            .data(&app.data1),
+        Dataset::default()
+            .name("data3")
+            .marker(symbols::Marker::Braille)
+            .style(Style::default().fg(Color::Yellow))
+            .data(&app.data2),
+    ];
+
+    let chart = Chart::new(datasets)
+        .block(Block::bordered().title("Chart 1".cyan().bold()))
        .x_axis(
            Axis::default()
                .title("X Axis")
                .style(Style::default().fg(Color::Gray))
-                .labels_style(Style::default().modifier(Modifier::Italic))
-                .bounds(app.window)
-                .labels(&[
-                    &format!("{}", app.window[0]),
-                    &format!("{}", (app.window[0] + app.window[1]) / 2.0),
-                    &format!("{}", app.window[1]),
-                ]),
+                .labels(x_labels)
+                .bounds(app.window),
        )
        .y_axis(
            Axis::default()
                .title("Y Axis")
                .style(Style::default().fg(Color::Gray))
-                .labels_style(Style::default().modifier(Modifier::Italic))
-                .bounds([-20.0, 20.0])
-                .labels(&["-20", "0", "20"]),
-        )
-        .datasets(&[
-            Dataset::default()
-                .name("data2")
-                .marker(Marker::Dot)
-                .style(Style::default().fg(Color::Cyan))
-                .data(&app.data1),
-            Dataset::default()
-                .name("data3")
-                .marker(Marker::Braille)
-                .style(Style::default().fg(Color::Yellow))
-                .data(&app.data2),
-        ])
-        .render(t, &app.size);
+                .labels(vec!["-20".bold(), "0".into(), "20".bold()])
+                .bounds([-20.0, 20.0]),
+        );

-    t.draw().unwrap();
+    f.render_widget(chart, area);
 }
+
+fn render_line_chart(f: &mut Frame, area: Rect) {
+    let datasets = vec![Dataset::default()
+        .name("Line from only 2 points".italic())
+        .marker(symbols::Marker::Braille)
+        .style(Style::default().fg(Color::Yellow))
+        .graph_type(GraphType::Line)
+        .data(&[(1., 1.), (4., 4.)])];
+
+    let chart = Chart::new(datasets)
+        .block(
+            Block::bordered().title(
+                Title::default()
+                    .content("Line chart".cyan().bold())
+                    .alignment(Alignment::Center),
+            ),
+        )
+        .x_axis(
+            Axis::default()
+                .title("X Axis")
+                .style(Style::default().gray())
+                .bounds([0.0, 5.0])
+                .labels(vec!["0".bold(), "2.5".into(), "5.0".bold()]),
+        )
+        .y_axis(
+            Axis::default()
+                .title("Y Axis")
+                .style(Style::default().gray())
+                .bounds([0.0, 5.0])
+                .labels(vec!["0".bold(), "2.5".into(), "5.0".bold()]),
+        )
+        .legend_position(Some(LegendPosition::TopLeft))
+        .hidden_legend_constraints((Constraint::Ratio(1, 2), Constraint::Ratio(1, 2)));
+
+    f.render_widget(chart, area);
+}
+
+fn render_scatter(f: &mut Frame, area: Rect) {
+    let datasets = vec![
+        Dataset::default()
+            .name("Heavy")
+            .marker(Marker::Dot)
+            .graph_type(GraphType::Scatter)
+            .style(Style::new().yellow())
+            .data(&HEAVY_PAYLOAD_DATA),
+        Dataset::default()
+            .name("Medium".underlined())
+            .marker(Marker::Braille)
+            .graph_type(GraphType::Scatter)
+            .style(Style::new().magenta())
+            .data(&MEDIUM_PAYLOAD_DATA),
+        Dataset::default()
+            .name("Small")
+            .marker(Marker::Dot)
+            .graph_type(GraphType::Scatter)
+            .style(Style::new().cyan())
+            .data(&SMALL_PAYLOAD_DATA),
+    ];
+
+    let chart = Chart::new(datasets)
+        .block(
+            Block::bordered().title(
+                Title::default()
+                    .content("Scatter chart".cyan().bold())
+                    .alignment(Alignment::Center),
+            ),
+        )
+        .x_axis(
+            Axis::default()
+                .title("Year")
+                .bounds([1960., 2020.])
+                .style(Style::default().fg(Color::Gray))
+                .labels(vec!["1960".into(), "1990".into(), "2020".into()]),
+        )
+        .y_axis(
+            Axis::default()
+                .title("Cost")
+                .bounds([0., 75000.])
+                .style(Style::default().fg(Color::Gray))
+                .labels(vec!["0".into(), "37 500".into(), "75 000".into()]),
+        )
+        .hidden_legend_constraints((Constraint::Ratio(1, 2), Constraint::Ratio(1, 2)));
+
+    f.render_widget(chart, area);
+}
+
+// Data from https://ourworldindata.org/space-exploration-satellites
+const HEAVY_PAYLOAD_DATA: [(f64, f64); 9] = [
+    (1965., 8200.),
+    (1967., 5400.),
+    (1981., 65400.),
+    (1989., 30800.),
+    (1997., 10200.),
+    (2004., 11600.),
+    (2014., 4500.),
+    (2016., 7900.),
+    (2018., 1500.),
+];
+
+const MEDIUM_PAYLOAD_DATA: [(f64, f64); 29] = [
+    (1963., 29500.),
+    (1964., 30600.),
+    (1965., 177_900.),
+    (1965., 21000.),
+    (1966., 17900.),
+    (1966., 8400.),
+    (1975., 17500.),
+    (1982., 8300.),
+    (1985., 5100.),
+    (1988., 18300.),
+    (1990., 38800.),
+    (1990., 9900.),
+    (1991., 18700.),
+    (1992., 9100.),
+    (1994., 10500.),
+    (1994., 8500.),
+    (1994., 8700.),
+    (1997., 6200.),
+    (1999., 18000.),
+    (1999., 7600.),
+    (1999., 8900.),
+    (1999., 9600.),
+    (2000., 16000.),
+    (2001., 10000.),
+    (2002., 10400.),
+    (2002., 8100.),
+    (2010., 2600.),
+    (2013., 13600.),
+    (2017., 8000.),
+];
+
+const SMALL_PAYLOAD_DATA: [(f64, f64); 23] = [
+    (1961., 118_500.),
+    (1962., 14900.),
+    (1975., 21400.),
+    (1980., 32800.),
+    (1988., 31100.),
+    (1990., 41100.),
+    (1993., 23600.),
+    (1994., 20600.),
+    (1994., 34600.),
+    (1996., 50600.),
+    (1997., 19200.),
+    (1997., 45800.),
+    (1998., 19100.),
+    (2000., 73100.),
+    (2003., 11200.),
+    (2008., 12600.),
+    (2010., 30500.),
+    (2012., 20000.),
+    (2013., 10600.),
+    (2013., 34500.),
+    (2015., 10600.),
+    (2018., 23100.),
+    (2019., 17300.),
+];
--- a/examples/colors.rs
+++ b/examples/colors.rs
@@ -0,0 +1,290 @@
+//! # [Ratatui] Colors example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+// This example shows all the colors supported by ratatui. It will render a grid of foreground
+// and background colors with their names and indexes.
+
+use std::{
+    error::Error,
+    io::{self, Stdout},
+    result,
+    time::Duration,
+};
+
+use itertools::Itertools;
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    crossterm::{
+        event::{self, Event, KeyCode},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    layout::{Alignment, Constraint, Layout, Rect},
+    style::{Color, Style, Stylize},
+    terminal::{Frame, Terminal},
+    text::Line,
+    widgets::{Block, Borders, Paragraph},
+};
+
+type Result<T> = result::Result<T, Box<dyn Error>>;
+
+fn main() -> Result<()> {
+    let mut terminal = setup_terminal()?;
+    let res = run_app(&mut terminal);
+    restore_terminal(terminal)?;
+    if let Err(err) = res {
+        eprintln!("{err:?}");
+    }
+    Ok(())
+}
+
+fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::Result<()> {
+    loop {
+        terminal.draw(ui)?;
+
+        if event::poll(Duration::from_millis(250))? {
+            if let Event::Key(key) = event::read()? {
+                if key.code == KeyCode::Char('q') {
+                    return Ok(());
+                }
+            }
+        }
+    }
+}
+
+fn ui(frame: &mut Frame) {
+    let layout = Layout::vertical([
+        Constraint::Length(30),
+        Constraint::Length(17),
+        Constraint::Length(2),
+    ])
+    .split(frame.size());
+
+    render_named_colors(frame, layout[0]);
+    render_indexed_colors(frame, layout[1]);
+    render_indexed_grayscale(frame, layout[2]);
+}
+
+const NAMED_COLORS: [Color; 16] = [
+    Color::Black,
+    Color::Red,
+    Color::Green,
+    Color::Yellow,
+    Color::Blue,
+    Color::Magenta,
+    Color::Cyan,
+    Color::Gray,
+    Color::DarkGray,
+    Color::LightRed,
+    Color::LightGreen,
+    Color::LightYellow,
+    Color::LightBlue,
+    Color::LightMagenta,
+    Color::LightCyan,
+    Color::White,
+];
+
+fn render_named_colors(frame: &mut Frame, area: Rect) {
+    let layout = Layout::vertical([Constraint::Length(3); 10]).split(area);
+
+    render_fg_named_colors(frame, Color::Reset, layout[0]);
+    render_fg_named_colors(frame, Color::Black, layout[1]);
+    render_fg_named_colors(frame, Color::DarkGray, layout[2]);
+    render_fg_named_colors(frame, Color::Gray, layout[3]);
+    render_fg_named_colors(frame, Color::White, layout[4]);
+
+    render_bg_named_colors(frame, Color::Reset, layout[5]);
+    render_bg_named_colors(frame, Color::Black, layout[6]);
+    render_bg_named_colors(frame, Color::DarkGray, layout[7]);
+    render_bg_named_colors(frame, Color::Gray, layout[8]);
+    render_bg_named_colors(frame, Color::White, layout[9]);
+}
+
+fn render_fg_named_colors(frame: &mut Frame, bg: Color, area: Rect) {
+    let block = title_block(format!("Foreground colors on {bg} background"));
+    let inner = block.inner(area);
+    frame.render_widget(block, area);
+
+    let layout = Layout::vertical([Constraint::Length(1); 2])
+        .split(inner)
+        .iter()
+        .flat_map(|area| {
+            Layout::horizontal([Constraint::Ratio(1, 8); 8])
+                .split(*area)
+                .to_vec()
+        })
+        .collect_vec();
+    for (i, &fg) in NAMED_COLORS.iter().enumerate() {
+        let color_name = fg.to_string();
+        let paragraph = Paragraph::new(color_name).fg(fg).bg(bg);
+        frame.render_widget(paragraph, layout[i]);
+    }
+}
+
+fn render_bg_named_colors(frame: &mut Frame, fg: Color, area: Rect) {
+    let block = title_block(format!("Background colors with {fg} foreground"));
+    let inner = block.inner(area);
+    frame.render_widget(block, area);
+
+    let layout = Layout::vertical([Constraint::Length(1); 2])
+        .split(inner)
+        .iter()
+        .flat_map(|area| {
+            Layout::horizontal([Constraint::Ratio(1, 8); 8])
+                .split(*area)
+                .to_vec()
+        })
+        .collect_vec();
+    for (i, &bg) in NAMED_COLORS.iter().enumerate() {
+        let color_name = bg.to_string();
+        let paragraph = Paragraph::new(color_name).fg(fg).bg(bg);
+        frame.render_widget(paragraph, layout[i]);
+    }
+}
+
+fn render_indexed_colors(frame: &mut Frame, area: Rect) {
+    let block = title_block("Indexed colors".into());
+    let inner = block.inner(area);
+    frame.render_widget(block, area);
+
+    let layout = Layout::vertical([
+        Constraint::Length(1), // 0 - 15
+        Constraint::Length(1), // blank
+        Constraint::Min(6),    // 16 - 123
+        Constraint::Length(1), // blank
+        Constraint::Min(6),    // 124 - 231
+        Constraint::Length(1), // blank
+    ])
+    .split(inner);
+
+    //    0   1   2   3   4   5    6   7   8   9  10  11   12  13  14  15
+    let color_layout = Layout::horizontal([Constraint::Length(5); 16]).split(layout[0]);
+    for i in 0..16 {
+        let color = Color::Indexed(i);
+        let color_index = format!("{i:0>2}");
+        let bg = if i < 1 { Color::DarkGray } else { Color::Black };
+        let paragraph = Paragraph::new(Line::from(vec![
+            color_index.fg(color).bg(bg),
+            "██".bg(color).fg(color),
+        ]));
+        frame.render_widget(paragraph, color_layout[i as usize]);
+    }
+
+    //   16  17  18  19  20  21   52  53  54  55  56  57   88  89  90  91  92  93
+    //   22  23  24  25  26  27   58  59  60  61  62  63   94  95  96  97  98  99
+    //   28  29  30  31  32  33   64  65  66  67  68  69  100 101 102 103 104 105
+    //   34  35  36  37  38  39   70  71  72  73  74  75  106 107 108 109 110 111
+    //   40  41  42  43  44  45   76  77  78  79  80  81  112 113 114 115 116 117
+    //   46  47  48  49  50  51   82  83  84  85  86  87  118 119 120 121 122 123
+    //
+    //  124 125 126 127 128 129  160 161 162 163 164 165  196 197 198 199 200 201
+    //  130 131 132 133 134 135  166 167 168 169 170 171  202 203 204 205 206 207
+    //  136 137 138 139 140 141  172 173 174 175 176 177  208 209 210 211 212 213
+    //  142 143 144 145 146 147  178 179 180 181 182 183  214 215 216 217 218 219
+    //  148 149 150 151 152 153  184 185 186 187 188 189  220 221 222 223 224 225
+    //  154 155 156 157 158 159  190 191 192 193 194 195  226 227 228 229 230 231
+
+    // the above looks complex but it's so the colors are grouped into blocks that display nicely
+    let index_layout = [layout[2], layout[4]]
+        .iter()
+        // two rows of 3 columns
+        .flat_map(|area| {
+            Layout::horizontal([Constraint::Length(27); 3])
+                .split(*area)
+                .to_vec()
+        })
+        // each with 6 rows
+        .flat_map(|area| {
+            Layout::vertical([Constraint::Length(1); 6])
+                .split(area)
+                .to_vec()
+        })
+        // each with 6 columns
+        .flat_map(|area| {
+            Layout::horizontal([Constraint::Min(4); 6])
+                .split(area)
+                .to_vec()
+        })
+        .collect_vec();
+
+    for i in 16..=231 {
+        let color = Color::Indexed(i);
+        let color_index = format!("{i:0>3}");
+        let paragraph = Paragraph::new(Line::from(vec![
+            color_index.fg(color).bg(Color::Reset),
+            ".".bg(color).fg(color),
+            // There's a bug in VHS that seems to bleed backgrounds into the next
+            // character. This is a workaround to make the bug less obvious.
+            "███".reversed(),
+        ]));
+        frame.render_widget(paragraph, index_layout[i as usize - 16]);
+    }
+}
+
+fn title_block(title: String) -> Block<'static> {
+    Block::new()
+        .borders(Borders::TOP)
+        .title_alignment(Alignment::Center)
+        .border_style(Style::new().dark_gray())
+        .title_style(Style::new().reset())
+        .title(title)
+}
+
+fn render_indexed_grayscale(frame: &mut Frame, area: Rect) {
+    let layout = Layout::vertical([
+        Constraint::Length(1), // 232 - 243
+        Constraint::Length(1), // 244 - 255
+    ])
+    .split(area)
+    .iter()
+    .flat_map(|area| {
+        Layout::horizontal([Constraint::Length(6); 12])
+            .split(*area)
+            .to_vec()
+    })
+    .collect_vec();
+
+    for i in 232..=255 {
+        let color = Color::Indexed(i);
+        let color_index = format!("{i:0>3}");
+        // make the dark colors easier to read
+        let bg = if i < 244 { Color::Gray } else { Color::Black };
+        let paragraph = Paragraph::new(Line::from(vec![
+            color_index.fg(color).bg(bg),
+            "██".bg(color).fg(color),
+            // There's a bug in VHS that seems to bleed backgrounds into the next
+            // character. This is a workaround to make the bug less obvious.
+            "███████".reversed(),
+        ]));
+        frame.render_widget(paragraph, layout[i as usize - 232]);
+    }
+}
+
+fn setup_terminal() -> Result<Terminal<CrosstermBackend<Stdout>>> {
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;
+    terminal.hide_cursor()?;
+    Ok(terminal)
+}
+
+fn restore_terminal(mut terminal: Terminal<CrosstermBackend<Stdout>>) -> Result<()> {
+    disable_raw_mode()?;
+    execute!(terminal.backend_mut(), LeaveAlternateScreen)?;
+    terminal.show_cursor()?;
+    Ok(())
+}
--- a/examples/colors_rgb.rs
+++ b/examples/colors_rgb.rs
@@ -0,0 +1,298 @@
+//! # [Ratatui] `Colors_RGB` example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+// This example shows the full range of RGB colors that can be displayed in the terminal.
+//
+// Requires a terminal that supports 24-bit color (true color) and unicode.
+//
+// This example also demonstrates how implementing the Widget trait on a mutable reference
+// allows the widget to update its state while it is being rendered. This allows the fps
+// widget to update the fps calculation and the colors widget to update a cached version of
+// the colors to render instead of recalculating them every frame.
+//
+// This is an alternative to using the `StatefulWidget` trait and a separate state struct. It
+// is useful when the state is only used by the widget and doesn't need to be shared with
+// other widgets.
+
+use std::{
+    io::stdout,
+    panic,
+    time::{Duration, Instant},
+};
+
+use color_eyre::{config::HookBuilder, eyre, Result};
+use palette::{convert::FromColorUnclamped, Okhsv, Srgb};
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    buffer::Buffer,
+    crossterm::{
+        event::{self, Event, KeyCode, KeyEventKind},
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+        ExecutableCommand,
+    },
+    layout::{Constraint, Layout, Rect},
+    style::Color,
+    terminal::Terminal,
+    text::Text,
+    widgets::Widget,
+};
+
+#[derive(Debug, Default)]
+struct App {
+    /// The current state of the app (running or quit)
+    state: AppState,
+
+    /// A widget that displays the current frames per second
+    fps_widget: FpsWidget,
+
+    /// A widget that displays the full range of RGB colors that can be displayed in the terminal.
+    colors_widget: ColorsWidget,
+}
+
+#[derive(Debug, Default, PartialEq, Eq)]
+enum AppState {
+    /// The app is running
+    #[default]
+    Running,
+
+    /// The user has requested the app to quit
+    Quit,
+}
+
+/// A widget that displays the current frames per second
+#[derive(Debug)]
+struct FpsWidget {
+    /// The number of elapsed frames that have passed - used to calculate the fps
+    frame_count: usize,
+
+    /// The last instant that the fps was calculated
+    last_instant: Instant,
+
+    /// The current frames per second
+    fps: Option<f32>,
+}
+
+/// A widget that displays the full range of RGB colors that can be displayed in the terminal.
+///
+/// This widget is animated and will change colors over time.
+#[derive(Debug, Default)]
+struct ColorsWidget {
+    /// The colors to render - should be double the height of the area as we render two rows of
+    /// pixels for each row of the widget using the half block character. This is computed any time
+    /// the size of the widget changes.
+    colors: Vec<Vec<Color>>,
+
+    /// the number of elapsed frames that have passed - used to animate the colors by shifting the
+    /// x index by the frame number
+    frame_count: usize,
+}
+
+fn main() -> Result<()> {
+    install_error_hooks()?;
+    let terminal = init_terminal()?;
+    App::default().run(terminal)?;
+    restore_terminal()?;
+    Ok(())
+}
+
+impl App {
+    /// Run the app
+    ///
+    /// This is the main event loop for the app.
+    pub fn run(mut self, mut terminal: Terminal<impl Backend>) -> Result<()> {
+        while self.is_running() {
+            terminal.draw(|frame| frame.render_widget(&mut self, frame.size()))?;
+            self.handle_events()?;
+        }
+        Ok(())
+    }
+
+    const fn is_running(&self) -> bool {
+        matches!(self.state, AppState::Running)
+    }
+
+    /// Handle any events that have occurred since the last time the app was rendered.
+    ///
+    /// Currently, this only handles the q key to quit the app.
+    fn handle_events(&mut self) -> Result<()> {
+        // Ensure that the app only blocks for a period that allows the app to render at
+        // approximately 60 FPS (this doesn't account for the time to render the frame, and will
+        // also update the app immediately any time an event occurs)
+        let timeout = Duration::from_secs_f32(1.0 / 60.0);
+        if event::poll(timeout)? {
+            if let Event::Key(key) = event::read()? {
+                if key.kind == KeyEventKind::Press && key.code == KeyCode::Char('q') {
+                    self.state = AppState::Quit;
+                };
+            }
+        }
+        Ok(())
+    }
+}
+
+/// Implement the Widget trait for &mut App so that it can be rendered
+///
+/// This is implemented on a mutable reference so that the app can update its state while it is
+/// being rendered. This allows the fps widget to update the fps calculation and the colors widget
+/// to update the colors to render.
+impl Widget for &mut App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        use Constraint::{Length, Min};
+        let [top, colors] = Layout::vertical([Length(1), Min(0)]).areas(area);
+        let [title, fps] = Layout::horizontal([Min(0), Length(8)]).areas(top);
+        Text::from("colors_rgb example. Press q to quit")
+            .centered()
+            .render(title, buf);
+        self.fps_widget.render(fps, buf);
+        self.colors_widget.render(colors, buf);
+    }
+}
+
+/// Default impl for `FpsWidget`
+///
+/// Manual impl is required because we need to initialize the `last_instant` field to the current
+/// instant.
+impl Default for FpsWidget {
+    fn default() -> Self {
+        Self {
+            frame_count: 0,
+            last_instant: Instant::now(),
+            fps: None,
+        }
+    }
+}
+
+/// Widget impl for `FpsWidget`
+///
+/// This is implemented on a mutable reference so that we can update the frame count and fps
+/// calculation while rendering.
+impl Widget for &mut FpsWidget {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        self.calculate_fps();
+        if let Some(fps) = self.fps {
+            let text = format!("{fps:.1} fps");
+            Text::from(text).render(area, buf);
+        }
+    }
+}
+
+impl FpsWidget {
+    /// Update the fps calculation.
+    ///
+    /// This updates the fps once a second, but only if the widget has rendered at least 2 frames
+    /// since the last calculation. This avoids noise in the fps calculation when rendering on slow
+    /// machines that can't render at least 2 frames per second.
+    #[allow(clippy::cast_precision_loss)]
+    fn calculate_fps(&mut self) {
+        self.frame_count += 1;
+        let elapsed = self.last_instant.elapsed();
+        if elapsed > Duration::from_secs(1) && self.frame_count > 2 {
+            self.fps = Some(self.frame_count as f32 / elapsed.as_secs_f32());
+            self.frame_count = 0;
+            self.last_instant = Instant::now();
+        }
+    }
+}
+
+/// Widget impl for `ColorsWidget`
+///
+/// This is implemented on a mutable reference so that we can update the frame count and store a
+/// cached version of the colors to render instead of recalculating them every frame.
+impl Widget for &mut ColorsWidget {
+    /// Render the widget
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        self.setup_colors(area);
+        let colors = &self.colors;
+        for (xi, x) in (area.left()..area.right()).enumerate() {
+            // animate the colors by shifting the x index by the frame number
+            let xi = (xi + self.frame_count) % (area.width as usize);
+            for (yi, y) in (area.top()..area.bottom()).enumerate() {
+                // render a half block character for each row of pixels with the foreground color
+                // set to the color of the pixel and the background color set to the color of the
+                // pixel below it
+                let fg = colors[yi * 2][xi];
+                let bg = colors[yi * 2 + 1][xi];
+                buf.get_mut(x, y).set_char('▀').set_fg(fg).set_bg(bg);
+            }
+        }
+        self.frame_count += 1;
+    }
+}
+
+impl ColorsWidget {
+    /// Setup the colors to render.
+    ///
+    /// This is called once per frame to setup the colors to render. It caches the colors so that
+    /// they don't need to be recalculated every frame.
+    #[allow(clippy::cast_precision_loss)]
+    fn setup_colors(&mut self, size: Rect) {
+        let Rect { width, height, .. } = size;
+        // double the height because each screen row has two rows of half block pixels
+        let height = height as usize * 2;
+        let width = width as usize;
+        // only update the colors if the size has changed since the last time we rendered
+        if self.colors.len() == height && self.colors[0].len() == width {
+            return;
+        }
+        self.colors = Vec::with_capacity(height);
+        for y in 0..height {
+            let mut row = Vec::with_capacity(width);
+            for x in 0..width {
+                let hue = x as f32 * 360.0 / width as f32;
+                let value = (height - y) as f32 / height as f32;
+                let saturation = Okhsv::max_saturation();
+                let color = Okhsv::new(hue, saturation, value);
+                let color = Srgb::<f32>::from_color_unclamped(color);
+                let color: Srgb<u8> = color.into_format();
+                let color = Color::Rgb(color.red, color.green, color.blue);
+                row.push(color);
+            }
+            self.colors.push(row);
+        }
+    }
+}
+
+/// Install `color_eyre` panic and error hooks
+///
+/// The hooks restore the terminal to a usable state before printing the error message.
+fn install_error_hooks() -> Result<()> {
+    let (panic, error) = HookBuilder::default().into_hooks();
+    let panic = panic.into_panic_hook();
+    let error = error.into_eyre_hook();
+    eyre::set_hook(Box::new(move |e| {
+        let _ = restore_terminal();
+        error(e)
+    }))?;
+    panic::set_hook(Box::new(move |info| {
+        let _ = restore_terminal();
+        panic(info);
+    }));
+    Ok(())
+}
+
+fn init_terminal() -> Result<Terminal<impl Backend>> {
+    enable_raw_mode()?;
+    stdout().execute(EnterAlternateScreen)?;
+    let mut terminal = Terminal::new(CrosstermBackend::new(stdout()))?;
+    terminal.clear()?;
+    terminal.hide_cursor()?;
+    Ok(terminal)
+}
+
+fn restore_terminal() -> Result<()> {
+    disable_raw_mode()?;
+    stdout().execute(LeaveAlternateScreen)?;
+    Ok(())
+}
--- a/examples/constraint-explorer.rs
+++ b/examples/constraint-explorer.rs
@@ -0,0 +1,652 @@
+//! # [Ratatui] Constraint explorer example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+use std::io::{self, stdout};
+
+use color_eyre::{config::HookBuilder, Result};
+use itertools::Itertools;
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    buffer::Buffer,
+    crossterm::{
+        event::{self, Event, KeyCode, KeyEventKind},
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+        ExecutableCommand,
+    },
+    layout::{
+        Constraint::{self, Fill, Length, Max, Min, Percentage, Ratio},
+        Flex, Layout, Rect,
+    },
+    style::{
+        palette::tailwind::{BLUE, SKY, SLATE, STONE},
+        Color, Style, Stylize,
+    },
+    symbols::{self, line},
+    terminal::Terminal,
+    text::{Line, Span, Text},
+    widgets::{Block, Paragraph, Widget, Wrap},
+};
+use strum::{Display, EnumIter, FromRepr};
+
+#[derive(Default)]
+struct App {
+    mode: AppMode,
+    spacing: u16,
+    constraints: Vec<Constraint>,
+    selected_index: usize,
+    value: u16,
+}
+
+#[derive(Debug, Default, PartialEq, Eq)]
+enum AppMode {
+    #[default]
+    Running,
+    Quit,
+}
+
+/// A variant of [`Constraint`] that can be rendered as a tab.
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq, EnumIter, FromRepr, Display)]
+enum ConstraintName {
+    #[default]
+    Length,
+    Percentage,
+    Ratio,
+    Min,
+    Max,
+    Fill,
+}
+
+/// A widget that renders a [`Constraint`] as a block. E.g.:
+/// ```plain
+/// ┌──────────────┐
+/// │  Length(16)  │
+/// │     16px     │
+/// └──────────────┘
+/// ```
+struct ConstraintBlock {
+    constraint: Constraint,
+    legend: bool,
+    selected: bool,
+}
+
+/// A widget that renders a spacer with a label indicating the width of the spacer. E.g.:
+///
+/// ```plain
+/// ┌      ┐
+///   8 px
+/// └      ┘
+/// ```
+struct SpacerBlock;
+
+fn main() -> Result<()> {
+    init_error_hooks()?;
+    let terminal = init_terminal()?;
+    App::default().run(terminal)?;
+    restore_terminal()?;
+    Ok(())
+}
+
+// App behaviour
+impl App {
+    fn run(&mut self, mut terminal: Terminal<impl Backend>) -> Result<()> {
+        self.insert_test_defaults();
+
+        while self.is_running() {
+            self.draw(&mut terminal)?;
+            self.handle_events()?;
+        }
+        Ok(())
+    }
+
+    // TODO remove these - these are just for testing
+    fn insert_test_defaults(&mut self) {
+        self.constraints = vec![
+            Constraint::Length(20),
+            Constraint::Length(20),
+            Constraint::Length(20),
+        ];
+        self.value = 20;
+    }
+
+    fn is_running(&self) -> bool {
+        self.mode == AppMode::Running
+    }
+
+    fn draw(&self, terminal: &mut Terminal<impl Backend>) -> io::Result<()> {
+        terminal.draw(|frame| frame.render_widget(self, frame.size()))?;
+        Ok(())
+    }
+
+    fn handle_events(&mut self) -> Result<()> {
+        match event::read()? {
+            Event::Key(key) if key.kind == KeyEventKind::Press => match key.code {
+                KeyCode::Char('q') | KeyCode::Esc => self.exit(),
+                KeyCode::Char('1') => self.swap_constraint(ConstraintName::Min),
+                KeyCode::Char('2') => self.swap_constraint(ConstraintName::Max),
+                KeyCode::Char('3') => self.swap_constraint(ConstraintName::Length),
+                KeyCode::Char('4') => self.swap_constraint(ConstraintName::Percentage),
+                KeyCode::Char('5') => self.swap_constraint(ConstraintName::Ratio),
+                KeyCode::Char('6') => self.swap_constraint(ConstraintName::Fill),
+                KeyCode::Char('+') => self.increment_spacing(),
+                KeyCode::Char('-') => self.decrement_spacing(),
+                KeyCode::Char('x') => self.delete_block(),
+                KeyCode::Char('a') => self.insert_block(),
+                KeyCode::Char('k') | KeyCode::Up => self.increment_value(),
+                KeyCode::Char('j') | KeyCode::Down => self.decrement_value(),
+                KeyCode::Char('h') | KeyCode::Left => self.prev_block(),
+                KeyCode::Char('l') | KeyCode::Right => self.next_block(),
+                _ => {}
+            },
+            _ => {}
+        }
+        Ok(())
+    }
+
+    fn increment_value(&mut self) {
+        let Some(constraint) = self.constraints.get_mut(self.selected_index) else {
+            return;
+        };
+        match constraint {
+            Constraint::Length(v)
+            | Constraint::Min(v)
+            | Constraint::Max(v)
+            | Constraint::Fill(v)
+            | Constraint::Percentage(v) => *v = v.saturating_add(1),
+            Constraint::Ratio(_n, d) => *d = d.saturating_add(1),
+        };
+    }
+
+    fn decrement_value(&mut self) {
+        let Some(constraint) = self.constraints.get_mut(self.selected_index) else {
+            return;
+        };
+        match constraint {
+            Constraint::Length(v)
+            | Constraint::Min(v)
+            | Constraint::Max(v)
+            | Constraint::Fill(v)
+            | Constraint::Percentage(v) => *v = v.saturating_sub(1),
+            Constraint::Ratio(_n, d) => *d = d.saturating_sub(1),
+        };
+    }
+
+    /// select the next block with wrap around
+    fn next_block(&mut self) {
+        if self.constraints.is_empty() {
+            return;
+        }
+        let len = self.constraints.len();
+        self.selected_index = (self.selected_index + 1) % len;
+    }
+
+    /// select the previous block with wrap around
+    fn prev_block(&mut self) {
+        if self.constraints.is_empty() {
+            return;
+        }
+        let len = self.constraints.len();
+        self.selected_index = (self.selected_index + self.constraints.len() - 1) % len;
+    }
+
+    /// delete the selected block
+    fn delete_block(&mut self) {
+        if self.constraints.is_empty() {
+            return;
+        }
+        self.constraints.remove(self.selected_index);
+        self.selected_index = self.selected_index.saturating_sub(1);
+    }
+
+    /// insert a block after the selected block
+    fn insert_block(&mut self) {
+        let index = self
+            .selected_index
+            .saturating_add(1)
+            .min(self.constraints.len());
+        let constraint = Constraint::Length(self.value);
+        self.constraints.insert(index, constraint);
+        self.selected_index = index;
+    }
+
+    fn increment_spacing(&mut self) {
+        self.spacing = self.spacing.saturating_add(1);
+    }
+
+    fn decrement_spacing(&mut self) {
+        self.spacing = self.spacing.saturating_sub(1);
+    }
+
+    fn exit(&mut self) {
+        self.mode = AppMode::Quit;
+    }
+
+    fn swap_constraint(&mut self, name: ConstraintName) {
+        if self.constraints.is_empty() {
+            return;
+        }
+        let constraint = match name {
+            ConstraintName::Length => Length(self.value),
+            ConstraintName::Percentage => Percentage(self.value),
+            ConstraintName::Min => Min(self.value),
+            ConstraintName::Max => Max(self.value),
+            ConstraintName::Fill => Fill(self.value),
+            ConstraintName::Ratio => Ratio(1, u32::from(self.value) / 4), // for balance
+        };
+        self.constraints[self.selected_index] = constraint;
+    }
+}
+
+impl From<Constraint> for ConstraintName {
+    fn from(constraint: Constraint) -> Self {
+        match constraint {
+            Length(_) => Self::Length,
+            Percentage(_) => Self::Percentage,
+            Ratio(_, _) => Self::Ratio,
+            Min(_) => Self::Min,
+            Max(_) => Self::Max,
+            Fill(_) => Self::Fill,
+        }
+    }
+}
+
+impl Widget for &App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let [header_area, instructions_area, swap_legend_area, _, blocks_area] =
+            Layout::vertical([
+                Length(2), // header
+                Length(2), // instructions
+                Length(1), // swap key legend
+                Length(1), // gap
+                Fill(1),   // blocks
+            ])
+            .areas(area);
+
+        App::header().render(header_area, buf);
+        App::instructions().render(instructions_area, buf);
+        App::swap_legend().render(swap_legend_area, buf);
+        self.render_layout_blocks(blocks_area, buf);
+    }
+}
+
+// App rendering
+impl App {
+    const HEADER_COLOR: Color = SLATE.c200;
+    const TEXT_COLOR: Color = SLATE.c400;
+    const AXIS_COLOR: Color = SLATE.c500;
+
+    fn header() -> impl Widget {
+        let text = "Constraint Explorer";
+        text.bold().fg(Self::HEADER_COLOR).into_centered_line()
+    }
+
+    fn instructions() -> impl Widget {
+        let text = "◄ ►: select, ▲ ▼: edit, 1-6: swap, a: add, x: delete, q: quit, + -: spacing";
+        Paragraph::new(text)
+            .fg(Self::TEXT_COLOR)
+            .centered()
+            .wrap(Wrap { trim: false })
+    }
+
+    fn swap_legend() -> impl Widget {
+        #[allow(unstable_name_collisions)]
+        Paragraph::new(
+            Line::from(
+                [
+                    ConstraintName::Min,
+                    ConstraintName::Max,
+                    ConstraintName::Length,
+                    ConstraintName::Percentage,
+                    ConstraintName::Ratio,
+                    ConstraintName::Fill,
+                ]
+                .iter()
+                .enumerate()
+                .map(|(i, name)| {
+                    format!("  {i}: {name}  ", i = i + 1)
+                        .fg(SLATE.c200)
+                        .bg(name.color())
+                })
+                .intersperse(Span::from(" "))
+                .collect_vec(),
+            )
+            .centered(),
+        )
+        .wrap(Wrap { trim: false })
+    }
+
+    /// A bar like `<----- 80 px (gap: 2 px) ----->`
+    ///
+    /// Only shows the gap when spacing is not zero
+    fn axis(&self, width: u16) -> impl Widget {
+        let label = if self.spacing != 0 {
+            format!("{} px (gap: {} px)", width, self.spacing)
+        } else {
+            format!("{width} px")
+        };
+        let bar_width = width.saturating_sub(2) as usize; // we want to `<` and `>` at the ends
+        let width_bar = format!("<{label:-^bar_width$}>");
+        Paragraph::new(width_bar).fg(Self::AXIS_COLOR).centered()
+    }
+
+    fn render_layout_blocks(&self, area: Rect, buf: &mut Buffer) {
+        let [user_constraints, area] = Layout::vertical([Length(3), Fill(1)])
+            .spacing(1)
+            .areas(area);
+
+        self.render_user_constraints_legend(user_constraints, buf);
+
+        let [start, center, end, space_around, space_between] =
+            Layout::vertical([Length(7); 5]).areas(area);
+
+        self.render_layout_block(Flex::Start, start, buf);
+        self.render_layout_block(Flex::Center, center, buf);
+        self.render_layout_block(Flex::End, end, buf);
+        self.render_layout_block(Flex::SpaceAround, space_around, buf);
+        self.render_layout_block(Flex::SpaceBetween, space_between, buf);
+    }
+
+    fn render_user_constraints_legend(&self, area: Rect, buf: &mut Buffer) {
+        let blocks = Layout::horizontal(
+            self.constraints
+                .iter()
+                .map(|_| Constraint::Fill(1))
+                .collect_vec(),
+        )
+        .split(area);
+
+        for (i, (area, constraint)) in blocks.iter().zip(self.constraints.iter()).enumerate() {
+            let selected = self.selected_index == i;
+            ConstraintBlock::new(*constraint, selected, true).render(*area, buf);
+        }
+    }
+
+    fn render_layout_block(&self, flex: Flex, area: Rect, buf: &mut Buffer) {
+        let [label_area, axis_area, blocks_area] =
+            Layout::vertical([Length(1), Max(1), Length(4)]).areas(area);
+
+        if label_area.height > 0 {
+            format!("Flex::{flex:?}").bold().render(label_area, buf);
+        }
+
+        self.axis(area.width).render(axis_area, buf);
+
+        let (blocks, spacers) = Layout::horizontal(&self.constraints)
+            .flex(flex)
+            .spacing(self.spacing)
+            .split_with_spacers(blocks_area);
+
+        for (i, (area, constraint)) in blocks.iter().zip(self.constraints.iter()).enumerate() {
+            let selected = self.selected_index == i;
+            ConstraintBlock::new(*constraint, selected, false).render(*area, buf);
+        }
+
+        for area in spacers.iter() {
+            SpacerBlock.render(*area, buf);
+        }
+    }
+}
+
+impl Widget for ConstraintBlock {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        match area.height {
+            1 => self.render_1px(area, buf),
+            2 => self.render_2px(area, buf),
+            _ => self.render_4px(area, buf),
+        }
+    }
+}
+
+impl ConstraintBlock {
+    const TEXT_COLOR: Color = SLATE.c200;
+
+    const fn new(constraint: Constraint, selected: bool, legend: bool) -> Self {
+        Self {
+            constraint,
+            legend,
+            selected,
+        }
+    }
+
+    fn label(&self, width: u16) -> String {
+        let long_width = format!("{width} px");
+        let short_width = format!("{width}");
+        // border takes up 2 columns
+        let available_space = width.saturating_sub(2) as usize;
+        let width_label = if long_width.len() < available_space {
+            long_width
+        } else if short_width.len() < available_space {
+            short_width
+        } else {
+            String::new()
+        };
+        format!("{}\n{}", self.constraint, width_label)
+    }
+
+    fn render_1px(&self, area: Rect, buf: &mut Buffer) {
+        let lighter_color = ConstraintName::from(self.constraint).lighter_color();
+        let main_color = ConstraintName::from(self.constraint).color();
+        let selected_color = if self.selected {
+            lighter_color
+        } else {
+            main_color
+        };
+        Block::new()
+            .fg(Self::TEXT_COLOR)
+            .bg(selected_color)
+            .render(area, buf);
+    }
+
+    fn render_2px(&self, area: Rect, buf: &mut Buffer) {
+        let lighter_color = ConstraintName::from(self.constraint).lighter_color();
+        let main_color = ConstraintName::from(self.constraint).color();
+        let selected_color = if self.selected {
+            lighter_color
+        } else {
+            main_color
+        };
+        Block::bordered()
+            .border_set(symbols::border::QUADRANT_OUTSIDE)
+            .border_style(Style::reset().fg(selected_color).reversed())
+            .render(area, buf);
+    }
+
+    fn render_4px(&self, area: Rect, buf: &mut Buffer) {
+        let lighter_color = ConstraintName::from(self.constraint).lighter_color();
+        let main_color = ConstraintName::from(self.constraint).color();
+        let selected_color = if self.selected {
+            lighter_color
+        } else {
+            main_color
+        };
+        let color = if self.legend {
+            selected_color
+        } else {
+            main_color
+        };
+        let label = self.label(area.width);
+        let block = Block::bordered()
+            .border_set(symbols::border::QUADRANT_OUTSIDE)
+            .border_style(Style::reset().fg(color).reversed())
+            .fg(Self::TEXT_COLOR)
+            .bg(color);
+        Paragraph::new(label)
+            .centered()
+            .fg(Self::TEXT_COLOR)
+            .bg(color)
+            .block(block)
+            .render(area, buf);
+
+        if !self.legend {
+            let border_color = if self.selected {
+                lighter_color
+            } else {
+                main_color
+            };
+            if let Some(last_row) = area.rows().last() {
+                buf.set_style(last_row, border_color);
+            }
+        }
+    }
+}
+
+impl Widget for SpacerBlock {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        match area.height {
+            1 => (),
+            2 => Self::render_2px(area, buf),
+            3 => Self::render_3px(area, buf),
+            _ => Self::render_4px(area, buf),
+        }
+    }
+}
+
+impl SpacerBlock {
+    const TEXT_COLOR: Color = SLATE.c500;
+    const BORDER_COLOR: Color = SLATE.c600;
+
+    /// A block with a corner borders
+    fn block() -> impl Widget {
+        let corners_only = symbols::border::Set {
+            top_left: line::NORMAL.top_left,
+            top_right: line::NORMAL.top_right,
+            bottom_left: line::NORMAL.bottom_left,
+            bottom_right: line::NORMAL.bottom_right,
+            vertical_left: " ",
+            vertical_right: " ",
+            horizontal_top: " ",
+            horizontal_bottom: " ",
+        };
+        Block::bordered()
+            .border_set(corners_only)
+            .border_style(Self::BORDER_COLOR)
+    }
+
+    /// A vertical line used if there is not enough space to render the block
+    fn line() -> impl Widget {
+        Paragraph::new(Text::from(vec![
+            Line::from(""),
+            Line::from("│"),
+            Line::from("│"),
+            Line::from(""),
+        ]))
+        .style(Self::BORDER_COLOR)
+    }
+
+    /// A label that says "Spacer" if there is enough space
+    fn spacer_label(width: u16) -> impl Widget {
+        let label = if width >= 6 { "Spacer" } else { "" };
+        label.fg(Self::TEXT_COLOR).into_centered_line()
+    }
+
+    /// A label that says "8 px" if there is enough space
+    fn label(width: u16) -> impl Widget {
+        let long_label = format!("{width} px");
+        let short_label = format!("{width}");
+        let label = if long_label.len() < width as usize {
+            long_label
+        } else if short_label.len() < width as usize {
+            short_label
+        } else {
+            String::new()
+        };
+        Line::styled(label, Self::TEXT_COLOR).centered()
+    }
+
+    fn render_2px(area: Rect, buf: &mut Buffer) {
+        if area.width > 1 {
+            Self::block().render(area, buf);
+        } else {
+            Self::line().render(area, buf);
+        }
+    }
+
+    fn render_3px(area: Rect, buf: &mut Buffer) {
+        if area.width > 1 {
+            Self::block().render(area, buf);
+        } else {
+            Self::line().render(area, buf);
+        }
+
+        let row = area.rows().nth(1).unwrap_or_default();
+        Self::spacer_label(area.width).render(row, buf);
+    }
+
+    fn render_4px(area: Rect, buf: &mut Buffer) {
+        if area.width > 1 {
+            Self::block().render(area, buf);
+        } else {
+            Self::line().render(area, buf);
+        }
+
+        let row = area.rows().nth(1).unwrap_or_default();
+        Self::spacer_label(area.width).render(row, buf);
+
+        let row = area.rows().nth(2).unwrap_or_default();
+        Self::label(area.width).render(row, buf);
+    }
+}
+
+impl ConstraintName {
+    const fn color(self) -> Color {
+        match self {
+            Self::Length => SLATE.c700,
+            Self::Percentage => SLATE.c800,
+            Self::Ratio => SLATE.c900,
+            Self::Fill => SLATE.c950,
+            Self::Min => BLUE.c800,
+            Self::Max => BLUE.c900,
+        }
+    }
+
+    const fn lighter_color(self) -> Color {
+        match self {
+            Self::Length => STONE.c500,
+            Self::Percentage => STONE.c600,
+            Self::Ratio => STONE.c700,
+            Self::Fill => STONE.c800,
+            Self::Min => SKY.c600,
+            Self::Max => SKY.c700,
+        }
+    }
+}
+
+fn init_error_hooks() -> Result<()> {
+    let (panic, error) = HookBuilder::default().into_hooks();
+    let panic = panic.into_panic_hook();
+    let error = error.into_eyre_hook();
+    color_eyre::eyre::set_hook(Box::new(move |e| {
+        let _ = restore_terminal();
+        error(e)
+    }))?;
+    std::panic::set_hook(Box::new(move |info| {
+        let _ = restore_terminal();
+        panic(info);
+    }));
+    Ok(())
+}
+
+fn init_terminal() -> Result<Terminal<impl Backend>> {
+    enable_raw_mode()?;
+    stdout().execute(EnterAlternateScreen)?;
+    let backend = CrosstermBackend::new(stdout());
+    let terminal = Terminal::new(backend)?;
+    Ok(terminal)
+}
+
+fn restore_terminal() -> Result<()> {
+    disable_raw_mode()?;
+    stdout().execute(LeaveAlternateScreen)?;
+    Ok(())
+}
--- a/examples/constraints.rs
+++ b/examples/constraints.rs
@@ -0,0 +1,452 @@
+//! # [Ratatui] Constraints example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+use std::io::{self, stdout};
+
+use color_eyre::{config::HookBuilder, Result};
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    buffer::Buffer,
+    crossterm::{
+        event::{self, Event, KeyCode, KeyEventKind},
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+        ExecutableCommand,
+    },
+    layout::{
+        Constraint::{self, Fill, Length, Max, Min, Percentage, Ratio},
+        Layout, Rect,
+    },
+    style::{palette::tailwind, Color, Modifier, Style, Stylize},
+    symbols,
+    terminal::Terminal,
+    text::Line,
+    widgets::{
+        Block, Padding, Paragraph, Scrollbar, ScrollbarOrientation, ScrollbarState, StatefulWidget,
+        Tabs, Widget,
+    },
+};
+use strum::{Display, EnumIter, FromRepr, IntoEnumIterator};
+
+const SPACER_HEIGHT: u16 = 0;
+const ILLUSTRATION_HEIGHT: u16 = 4;
+const EXAMPLE_HEIGHT: u16 = ILLUSTRATION_HEIGHT + SPACER_HEIGHT;
+
+// priority 2
+const MIN_COLOR: Color = tailwind::BLUE.c900;
+const MAX_COLOR: Color = tailwind::BLUE.c800;
+// priority 3
+const LENGTH_COLOR: Color = tailwind::SLATE.c700;
+const PERCENTAGE_COLOR: Color = tailwind::SLATE.c800;
+const RATIO_COLOR: Color = tailwind::SLATE.c900;
+// priority 4
+const FILL_COLOR: Color = tailwind::SLATE.c950;
+
+#[derive(Default, Clone, Copy)]
+struct App {
+    selected_tab: SelectedTab,
+    scroll_offset: u16,
+    max_scroll_offset: u16,
+    state: AppState,
+}
+
+/// Tabs for the different examples
+///
+/// The order of the variants is the order in which they are displayed.
+#[derive(Default, Debug, Copy, Clone, Display, FromRepr, EnumIter, PartialEq, Eq)]
+enum SelectedTab {
+    #[default]
+    Min,
+    Max,
+    Length,
+    Percentage,
+    Ratio,
+    Fill,
+}
+
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
+enum AppState {
+    #[default]
+    Running,
+    Quit,
+}
+
+fn main() -> Result<()> {
+    init_error_hooks()?;
+    let terminal = init_terminal()?;
+
+    // increase the cache size to avoid flickering for indeterminate layouts
+    Layout::init_cache(100);
+
+    App::default().run(terminal)?;
+
+    restore_terminal()?;
+
+    Ok(())
+}
+
+impl App {
+    fn run(&mut self, mut terminal: Terminal<impl Backend>) -> Result<()> {
+        self.update_max_scroll_offset();
+        while self.is_running() {
+            self.draw(&mut terminal)?;
+            self.handle_events()?;
+        }
+        Ok(())
+    }
+
+    fn update_max_scroll_offset(&mut self) {
+        self.max_scroll_offset = (self.selected_tab.get_example_count() - 1) * EXAMPLE_HEIGHT;
+    }
+
+    fn is_running(self) -> bool {
+        self.state == AppState::Running
+    }
+
+    fn draw(self, terminal: &mut Terminal<impl Backend>) -> io::Result<()> {
+        terminal.draw(|frame| frame.render_widget(self, frame.size()))?;
+        Ok(())
+    }
+
+    fn handle_events(&mut self) -> Result<()> {
+        if let Event::Key(key) = event::read()? {
+            if key.kind != KeyEventKind::Press {
+                return Ok(());
+            }
+            match key.code {
+                KeyCode::Char('q') | KeyCode::Esc => self.quit(),
+                KeyCode::Char('l') | KeyCode::Right => self.next(),
+                KeyCode::Char('h') | KeyCode::Left => self.previous(),
+                KeyCode::Char('j') | KeyCode::Down => self.down(),
+                KeyCode::Char('k') | KeyCode::Up => self.up(),
+                KeyCode::Char('g') | KeyCode::Home => self.top(),
+                KeyCode::Char('G') | KeyCode::End => self.bottom(),
+                _ => (),
+            }
+        }
+        Ok(())
+    }
+
+    fn quit(&mut self) {
+        self.state = AppState::Quit;
+    }
+
+    fn next(&mut self) {
+        self.selected_tab = self.selected_tab.next();
+        self.update_max_scroll_offset();
+        self.scroll_offset = 0;
+    }
+
+    fn previous(&mut self) {
+        self.selected_tab = self.selected_tab.previous();
+        self.update_max_scroll_offset();
+        self.scroll_offset = 0;
+    }
+
+    fn up(&mut self) {
+        self.scroll_offset = self.scroll_offset.saturating_sub(1);
+    }
+
+    fn down(&mut self) {
+        self.scroll_offset = self
+            .scroll_offset
+            .saturating_add(1)
+            .min(self.max_scroll_offset);
+    }
+
+    fn top(&mut self) {
+        self.scroll_offset = 0;
+    }
+
+    fn bottom(&mut self) {
+        self.scroll_offset = self.max_scroll_offset;
+    }
+}
+
+impl Widget for App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let [tabs, axis, demo] = Layout::vertical([Length(3), Length(3), Fill(0)]).areas(area);
+
+        self.render_tabs(tabs, buf);
+        Self::render_axis(axis, buf);
+        self.render_demo(demo, buf);
+    }
+}
+
+impl App {
+    fn render_tabs(self, area: Rect, buf: &mut Buffer) {
+        let titles = SelectedTab::iter().map(SelectedTab::to_tab_title);
+        let block = Block::new()
+            .title("Constraints ".bold())
+            .title(" Use h l or ◄ ► to change tab and j k or ▲ ▼  to scroll");
+        Tabs::new(titles)
+            .block(block)
+            .highlight_style(Modifier::REVERSED)
+            .select(self.selected_tab as usize)
+            .padding("", "")
+            .divider(" ")
+            .render(area, buf);
+    }
+
+    fn render_axis(area: Rect, buf: &mut Buffer) {
+        let width = area.width as usize;
+        // a bar like `<----- 80 px ----->`
+        let width_label = format!("{width} px");
+        let width_bar = format!(
+            "<{width_label:-^width$}>",
+            width = width - width_label.len() / 2
+        );
+        Paragraph::new(width_bar.dark_gray())
+            .centered()
+            .block(Block::new().padding(Padding {
+                left: 0,
+                right: 0,
+                top: 1,
+                bottom: 0,
+            }))
+            .render(area, buf);
+    }
+
+    /// Render the demo content
+    ///
+    /// This function renders the demo content into a separate buffer and then splices the buffer
+    /// into the main buffer. This is done to make it possible to handle scrolling easily.
+    #[allow(clippy::cast_possible_truncation)]
+    fn render_demo(self, area: Rect, buf: &mut Buffer) {
+        // render demo content into a separate buffer so all examples fit we add an extra
+        // area.height to make sure the last example is fully visible even when the scroll offset is
+        // at the max
+        let height = self.selected_tab.get_example_count() * EXAMPLE_HEIGHT;
+        let demo_area = Rect::new(0, 0, area.width, height + area.height);
+        let mut demo_buf = Buffer::empty(demo_area);
+
+        let scrollbar_needed = self.scroll_offset != 0 || height > area.height;
+        let content_area = if scrollbar_needed {
+            Rect {
+                width: demo_area.width - 1,
+                ..demo_area
+            }
+        } else {
+            demo_area
+        };
+        self.selected_tab.render(content_area, &mut demo_buf);
+
+        let visible_content = demo_buf
+            .content
+            .into_iter()
+            .skip((demo_area.width * self.scroll_offset) as usize)
+            .take(area.area() as usize);
+        for (i, cell) in visible_content.enumerate() {
+            let x = i as u16 % area.width;
+            let y = i as u16 / area.width;
+            *buf.get_mut(area.x + x, area.y + y) = cell;
+        }
+
+        if scrollbar_needed {
+            let mut state = ScrollbarState::new(self.max_scroll_offset as usize)
+                .position(self.scroll_offset as usize);
+            Scrollbar::new(ScrollbarOrientation::VerticalRight).render(area, buf, &mut state);
+        }
+    }
+}
+
+impl SelectedTab {
+    /// Get the previous tab, if there is no previous tab return the current tab.
+    fn previous(self) -> Self {
+        let current_index: usize = self as usize;
+        let previous_index = current_index.saturating_sub(1);
+        Self::from_repr(previous_index).unwrap_or(self)
+    }
+
+    /// Get the next tab, if there is no next tab return the current tab.
+    fn next(self) -> Self {
+        let current_index = self as usize;
+        let next_index = current_index.saturating_add(1);
+        Self::from_repr(next_index).unwrap_or(self)
+    }
+
+    const fn get_example_count(self) -> u16 {
+        #[allow(clippy::match_same_arms)]
+        match self {
+            Self::Length => 4,
+            Self::Percentage => 5,
+            Self::Ratio => 4,
+            Self::Fill => 2,
+            Self::Min => 5,
+            Self::Max => 5,
+        }
+    }
+
+    fn to_tab_title(value: Self) -> Line<'static> {
+        let text = format!("  {value}  ");
+        let color = match value {
+            Self::Length => LENGTH_COLOR,
+            Self::Percentage => PERCENTAGE_COLOR,
+            Self::Ratio => RATIO_COLOR,
+            Self::Fill => FILL_COLOR,
+            Self::Min => MIN_COLOR,
+            Self::Max => MAX_COLOR,
+        };
+        text.fg(tailwind::SLATE.c200).bg(color).into()
+    }
+}
+
+impl Widget for SelectedTab {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        match self {
+            Self::Length => Self::render_length_example(area, buf),
+            Self::Percentage => Self::render_percentage_example(area, buf),
+            Self::Ratio => Self::render_ratio_example(area, buf),
+            Self::Fill => Self::render_fill_example(area, buf),
+            Self::Min => Self::render_min_example(area, buf),
+            Self::Max => Self::render_max_example(area, buf),
+        }
+    }
+}
+
+impl SelectedTab {
+    fn render_length_example(area: Rect, buf: &mut Buffer) {
+        let [example1, example2, example3, _] =
+            Layout::vertical([Length(EXAMPLE_HEIGHT); 4]).areas(area);
+
+        Example::new(&[Length(20), Length(20)]).render(example1, buf);
+        Example::new(&[Length(20), Min(20)]).render(example2, buf);
+        Example::new(&[Length(20), Max(20)]).render(example3, buf);
+    }
+
+    fn render_percentage_example(area: Rect, buf: &mut Buffer) {
+        let [example1, example2, example3, example4, example5, _] =
+            Layout::vertical([Length(EXAMPLE_HEIGHT); 6]).areas(area);
+
+        Example::new(&[Percentage(75), Fill(0)]).render(example1, buf);
+        Example::new(&[Percentage(25), Fill(0)]).render(example2, buf);
+        Example::new(&[Percentage(50), Min(20)]).render(example3, buf);
+        Example::new(&[Percentage(0), Max(0)]).render(example4, buf);
+        Example::new(&[Percentage(0), Fill(0)]).render(example5, buf);
+    }
+
+    fn render_ratio_example(area: Rect, buf: &mut Buffer) {
+        let [example1, example2, example3, example4, _] =
+            Layout::vertical([Length(EXAMPLE_HEIGHT); 5]).areas(area);
+
+        Example::new(&[Ratio(1, 2); 2]).render(example1, buf);
+        Example::new(&[Ratio(1, 4); 4]).render(example2, buf);
+        Example::new(&[Ratio(1, 2), Ratio(1, 3), Ratio(1, 4)]).render(example3, buf);
+        Example::new(&[Ratio(1, 2), Percentage(25), Length(10)]).render(example4, buf);
+    }
+
+    fn render_fill_example(area: Rect, buf: &mut Buffer) {
+        let [example1, example2, _] = Layout::vertical([Length(EXAMPLE_HEIGHT); 3]).areas(area);
+
+        Example::new(&[Fill(1), Fill(2), Fill(3)]).render(example1, buf);
+        Example::new(&[Fill(1), Percentage(50), Fill(1)]).render(example2, buf);
+    }
+
+    fn render_min_example(area: Rect, buf: &mut Buffer) {
+        let [example1, example2, example3, example4, example5, _] =
+            Layout::vertical([Length(EXAMPLE_HEIGHT); 6]).areas(area);
+
+        Example::new(&[Percentage(100), Min(0)]).render(example1, buf);
+        Example::new(&[Percentage(100), Min(20)]).render(example2, buf);
+        Example::new(&[Percentage(100), Min(40)]).render(example3, buf);
+        Example::new(&[Percentage(100), Min(60)]).render(example4, buf);
+        Example::new(&[Percentage(100), Min(80)]).render(example5, buf);
+    }
+
+    fn render_max_example(area: Rect, buf: &mut Buffer) {
+        let [example1, example2, example3, example4, example5, _] =
+            Layout::vertical([Length(EXAMPLE_HEIGHT); 6]).areas(area);
+
+        Example::new(&[Percentage(0), Max(0)]).render(example1, buf);
+        Example::new(&[Percentage(0), Max(20)]).render(example2, buf);
+        Example::new(&[Percentage(0), Max(40)]).render(example3, buf);
+        Example::new(&[Percentage(0), Max(60)]).render(example4, buf);
+        Example::new(&[Percentage(0), Max(80)]).render(example5, buf);
+    }
+}
+
+struct Example {
+    constraints: Vec<Constraint>,
+}
+
+impl Example {
+    fn new(constraints: &[Constraint]) -> Self {
+        Self {
+            constraints: constraints.into(),
+        }
+    }
+}
+
+impl Widget for Example {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let [area, _] =
+            Layout::vertical([Length(ILLUSTRATION_HEIGHT), Length(SPACER_HEIGHT)]).areas(area);
+        let blocks = Layout::horizontal(&self.constraints).split(area);
+
+        for (block, constraint) in blocks.iter().zip(&self.constraints) {
+            Self::illustration(*constraint, block.width).render(*block, buf);
+        }
+    }
+}
+
+impl Example {
+    fn illustration(constraint: Constraint, width: u16) -> impl Widget {
+        let color = match constraint {
+            Constraint::Length(_) => LENGTH_COLOR,
+            Constraint::Percentage(_) => PERCENTAGE_COLOR,
+            Constraint::Ratio(_, _) => RATIO_COLOR,
+            Constraint::Fill(_) => FILL_COLOR,
+            Constraint::Min(_) => MIN_COLOR,
+            Constraint::Max(_) => MAX_COLOR,
+        };
+        let fg = Color::White;
+        let title = format!("{constraint}");
+        let content = format!("{width} px");
+        let text = format!("{title}\n{content}");
+        let block = Block::bordered()
+            .border_set(symbols::border::QUADRANT_OUTSIDE)
+            .border_style(Style::reset().fg(color).reversed())
+            .style(Style::default().fg(fg).bg(color));
+        Paragraph::new(text).centered().block(block)
+    }
+}
+
+fn init_error_hooks() -> Result<()> {
+    let (panic, error) = HookBuilder::default().into_hooks();
+    let panic = panic.into_panic_hook();
+    let error = error.into_eyre_hook();
+    color_eyre::eyre::set_hook(Box::new(move |e| {
+        let _ = restore_terminal();
+        error(e)
+    }))?;
+    std::panic::set_hook(Box::new(move |info| {
+        let _ = restore_terminal();
+        panic(info);
+    }));
+    Ok(())
+}
+
+fn init_terminal() -> Result<Terminal<impl Backend>> {
+    enable_raw_mode()?;
+    stdout().execute(EnterAlternateScreen)?;
+    let backend = CrosstermBackend::new(stdout());
+    let terminal = Terminal::new(backend)?;
+    Ok(terminal)
+}
+
+fn restore_terminal() -> Result<()> {
+    disable_raw_mode()?;
+    stdout().execute(LeaveAlternateScreen)?;
+    Ok(())
+}
--- a/examples/custom_widget.rs
+++ b/examples/custom_widget.rs
@@ -1,39 +1,290 @@
-extern crate tui;
+//! # [Ratatui] Custom Widget example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md

-use tui::Terminal;
-use tui::backend::MouseBackend;
-use tui::widgets::Widget;
-use tui::buffer::Buffer;
-use tui::layout::Rect;
-use tui::style::Style;
+use std::{error::Error, io, ops::ControlFlow, time::Duration};

-struct Label<'a> {
-    text: &'a str,
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    buffer::Buffer,
+    crossterm::{
+        event::{
+            self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, MouseButton, MouseEvent,
+            MouseEventKind,
+        },
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    layout::{Constraint, Layout, Rect},
+    style::{Color, Style},
+    terminal::{Frame, Terminal},
+    text::Line,
+    widgets::{Paragraph, Widget},
+};
+
+/// A custom widget that renders a button with a label, theme and state.
+#[derive(Debug, Clone)]
+struct Button<'a> {
+    label: Line<'a>,
+    theme: Theme,
+    state: State,
 }

-impl<'a> Default for Label<'a> {
-    fn default() -> Label<'a> {
-        Label { text: "" }
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+enum State {
+    Normal,
+    Selected,
+    Active,
+}
+
+#[derive(Debug, Clone, Copy)]
+struct Theme {
+    text: Color,
+    background: Color,
+    highlight: Color,
+    shadow: Color,
+}
+
+const BLUE: Theme = Theme {
+    text: Color::Rgb(16, 24, 48),
+    background: Color::Rgb(48, 72, 144),
+    highlight: Color::Rgb(64, 96, 192),
+    shadow: Color::Rgb(32, 48, 96),
+};
+
+const RED: Theme = Theme {
+    text: Color::Rgb(48, 16, 16),
+    background: Color::Rgb(144, 48, 48),
+    highlight: Color::Rgb(192, 64, 64),
+    shadow: Color::Rgb(96, 32, 32),
+};
+
+const GREEN: Theme = Theme {
+    text: Color::Rgb(16, 48, 16),
+    background: Color::Rgb(48, 144, 48),
+    highlight: Color::Rgb(64, 192, 64),
+    shadow: Color::Rgb(32, 96, 32),
+};
+
+/// A button with a label that can be themed.
+impl<'a> Button<'a> {
+    pub fn new<T: Into<Line<'a>>>(label: T) -> Self {
+        Button {
+            label: label.into(),
+            theme: BLUE,
+            state: State::Normal,
+        }
    }
-}

-impl<'a> Widget for Label<'a> {
-    fn draw(&mut self, area: &Rect, buf: &mut Buffer) {
-        buf.set_string(area.left(), area.top(), self.text, &Style::default());
+    pub const fn theme(mut self, theme: Theme) -> Self {
+        self.theme = theme;
+        self
    }
-}

-impl<'a> Label<'a> {
-    fn text(&mut self, text: &'a str) -> &mut Label<'a> {
-        self.text = text;
+    pub const fn state(mut self, state: State) -> Self {
+        self.state = state;
        self
    }
 }

-fn main() {
-    let mut terminal = Terminal::new(MouseBackend::new().unwrap()).unwrap();
-    let size = terminal.size().unwrap();
-    terminal.clear().unwrap();
-    Label::default().text("Test").render(&mut terminal, &size);
-    terminal.draw().unwrap();
+impl<'a> Widget for Button<'a> {
+    #[allow(clippy::cast_possible_truncation)]
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let (background, text, shadow, highlight) = self.colors();
+        buf.set_style(area, Style::new().bg(background).fg(text));
+
+        // render top line if there's enough space
+        if area.height > 2 {
+            buf.set_string(
+                area.x,
+                area.y,
+                "▔".repeat(area.width as usize),
+                Style::new().fg(highlight).bg(background),
+            );
+        }
+        // render bottom line if there's enough space
+        if area.height > 1 {
+            buf.set_string(
+                area.x,
+                area.y + area.height - 1,
+                "▁".repeat(area.width as usize),
+                Style::new().fg(shadow).bg(background),
+            );
+        }
+        // render label centered
+        buf.set_line(
+            area.x + (area.width.saturating_sub(self.label.width() as u16)) / 2,
+            area.y + (area.height.saturating_sub(1)) / 2,
+            &self.label,
+            area.width,
+        );
+    }
+}
+
+impl Button<'_> {
+    const fn colors(&self) -> (Color, Color, Color, Color) {
+        let theme = self.theme;
+        match self.state {
+            State::Normal => (theme.background, theme.text, theme.shadow, theme.highlight),
+            State::Selected => (theme.highlight, theme.text, theme.shadow, theme.highlight),
+            State::Active => (theme.background, theme.text, theme.highlight, theme.shadow),
+        }
+    }
+}
+
+fn main() -> Result<(), Box<dyn Error>> {
+    // setup terminal
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;
+
+    // create app and run it
+    let res = run_app(&mut terminal);
+
+    // restore terminal
+    disable_raw_mode()?;
+    execute!(
+        terminal.backend_mut(),
+        LeaveAlternateScreen,
+        DisableMouseCapture
+    )?;
+    terminal.show_cursor()?;
+
+    if let Err(err) = res {
+        println!("{err:?}");
+    }
+
+    Ok(())
+}
+
+fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::Result<()> {
+    let mut selected_button: usize = 0;
+    let mut button_states = [State::Selected, State::Normal, State::Normal];
+    loop {
+        terminal.draw(|frame| ui(frame, button_states))?;
+        if !event::poll(Duration::from_millis(100))? {
+            continue;
+        }
+        match event::read()? {
+            Event::Key(key) => {
+                if key.kind != event::KeyEventKind::Press {
+                    continue;
+                }
+                if handle_key_event(key, &mut button_states, &mut selected_button).is_break() {
+                    break;
+                }
+            }
+            Event::Mouse(mouse) => {
+                handle_mouse_event(mouse, &mut button_states, &mut selected_button);
+            }
+            _ => (),
+        }
+    }
+    Ok(())
+}
+
+fn ui(frame: &mut Frame, states: [State; 3]) {
+    let vertical = Layout::vertical([
+        Constraint::Length(1),
+        Constraint::Max(3),
+        Constraint::Length(1),
+        Constraint::Min(0), // ignore remaining space
+    ]);
+    let [title, buttons, help, _] = vertical.areas(frame.size());
+
+    frame.render_widget(
+        Paragraph::new("Custom Widget Example (mouse enabled)"),
+        title,
+    );
+    render_buttons(frame, buttons, states);
+    frame.render_widget(Paragraph::new("←/→: select, Space: toggle, q: quit"), help);
+}
+
+fn render_buttons(frame: &mut Frame<'_>, area: Rect, states: [State; 3]) {
+    let horizontal = Layout::horizontal([
+        Constraint::Length(15),
+        Constraint::Length(15),
+        Constraint::Length(15),
+        Constraint::Min(0), // ignore remaining space
+    ]);
+    let [red, green, blue, _] = horizontal.areas(area);
+
+    frame.render_widget(Button::new("Red").theme(RED).state(states[0]), red);
+    frame.render_widget(Button::new("Green").theme(GREEN).state(states[1]), green);
+    frame.render_widget(Button::new("Blue").theme(BLUE).state(states[2]), blue);
+}
+
+fn handle_key_event(
+    key: event::KeyEvent,
+    button_states: &mut [State; 3],
+    selected_button: &mut usize,
+) -> ControlFlow<()> {
+    match key.code {
+        KeyCode::Char('q') => return ControlFlow::Break(()),
+        KeyCode::Left | KeyCode::Char('h') => {
+            button_states[*selected_button] = State::Normal;
+            *selected_button = selected_button.saturating_sub(1);
+            button_states[*selected_button] = State::Selected;
+        }
+        KeyCode::Right | KeyCode::Char('l') => {
+            button_states[*selected_button] = State::Normal;
+            *selected_button = selected_button.saturating_add(1).min(2);
+            button_states[*selected_button] = State::Selected;
+        }
+        KeyCode::Char(' ') => {
+            if button_states[*selected_button] == State::Active {
+                button_states[*selected_button] = State::Normal;
+            } else {
+                button_states[*selected_button] = State::Active;
+            }
+        }
+        _ => (),
+    }
+    ControlFlow::Continue(())
+}
+
+fn handle_mouse_event(
+    mouse: MouseEvent,
+    button_states: &mut [State; 3],
+    selected_button: &mut usize,
+) {
+    match mouse.kind {
+        MouseEventKind::Moved => {
+            let old_selected_button = *selected_button;
+            *selected_button = match mouse.column {
+                x if x < 15 => 0,
+                x if x < 30 => 1,
+                _ => 2,
+            };
+            if old_selected_button != *selected_button {
+                if button_states[old_selected_button] != State::Active {
+                    button_states[old_selected_button] = State::Normal;
+                }
+                if button_states[*selected_button] != State::Active {
+                    button_states[*selected_button] = State::Selected;
+                }
+            }
+        }
+        MouseEventKind::Down(MouseButton::Left) => {
+            if button_states[*selected_button] == State::Active {
+                button_states[*selected_button] = State::Normal;
+            } else {
+                button_states[*selected_button] = State::Active;
+            }
+        }
+        _ => (),
+    }
 }
--- a/examples/demo.rs
+++ b/examples/demo.rs
@@ -1,517 +0,0 @@
-#[macro_use]
-extern crate log;
-extern crate stderrlog;
-extern crate termion;
-extern crate tui;
-
-mod util;
-
-use std::io;
-use std::thread;
-use std::time;
-use std::sync::mpsc;
-
-use termion::event;
-use termion::input::TermRead;
-
-use tui::Terminal;
-use tui::backend::MouseBackend;
-use tui::widgets::{Axis, BarChart, Block, Borders, Chart, Dataset, Gauge, Item, List, Marker,
-                   Paragraph, Row, SelectableList, Sparkline, Table, Tabs, Widget};
-use tui::widgets::canvas::{Canvas, Line, Map, MapResolution};
-use tui::layout::{Direction, Group, Rect, Size};
-use tui::style::{Color, Modifier, Style};
-
-use util::*;
-
-struct Server<'a> {
-    name: &'a str,
-    location: &'a str,
-    coords: (f64, f64),
-    status: &'a str,
-}
-
-struct App<'a> {
-    size: Rect,
-    items: Vec<&'a str>,
-    events: Vec<(&'a str, &'a str)>,
-    selected: usize,
-    tabs: MyTabs<'a>,
-    show_chart: bool,
-    progress: u16,
-    data: Vec<u64>,
-    data2: Vec<(f64, f64)>,
-    data3: Vec<(f64, f64)>,
-    data4: Vec<(&'a str, u64)>,
-    window: [f64; 2],
-    colors: [Color; 2],
-    color_index: usize,
-    servers: Vec<Server<'a>>,
-}
-
-enum Event {
-    Input(event::Key),
-    Tick,
-}
-
-fn main() {
-    stderrlog::new()
-        .module(module_path!())
-        .verbosity(4)
-        .init()
-        .unwrap();
-    info!("Start");
-
-    let mut rand_signal = RandomSignal::new(0, 100);
-    let mut sin_signal = SinSignal::new(0.2, 3.0, 18.0);
-    let mut sin_signal2 = SinSignal::new(0.1, 2.0, 10.0);
-
-    let mut app = App {
-        size: Rect::default(),
-        items: vec![
-            "Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7", "Item8", "Item9",
-            "Item10", "Item11", "Item12", "Item13", "Item14", "Item15", "Item16", "Item17",
-            "Item18", "Item19", "Item20", "Item21", "Item22", "Item23", "Item24",
-        ],
-        events: vec![
-            ("Event1", "INFO"),
-            ("Event2", "INFO"),
-            ("Event3", "CRITICAL"),
-            ("Event4", "ERROR"),
-            ("Event5", "INFO"),
-            ("Event6", "INFO"),
-            ("Event7", "WARNING"),
-            ("Event8", "INFO"),
-            ("Event9", "INFO"),
-            ("Event10", "INFO"),
-            ("Event11", "CRITICAL"),
-            ("Event12", "INFO"),
-            ("Event13", "INFO"),
-            ("Event14", "INFO"),
-            ("Event15", "INFO"),
-            ("Event16", "INFO"),
-            ("Event17", "ERROR"),
-            ("Event18", "ERROR"),
-            ("Event19", "INFO"),
-            ("Event20", "INFO"),
-            ("Event21", "WARNING"),
-            ("Event22", "INFO"),
-            ("Event23", "INFO"),
-            ("Event24", "WARNING"),
-            ("Event25", "INFO"),
-            ("Event26", "INFO"),
-        ],
-        selected: 0,
-        tabs: MyTabs {
-            titles: vec!["Tab0", "Tab1"],
-            selection: 0,
-        },
-        show_chart: true,
-        progress: 0,
-        data: rand_signal.clone().take(300).collect(),
-        data2: sin_signal.clone().take(100).collect(),
-        data3: sin_signal2.clone().take(200).collect(),
-        data4: vec![
-            ("B1", 9),
-            ("B2", 12),
-            ("B3", 5),
-            ("B4", 8),
-            ("B5", 2),
-            ("B6", 4),
-            ("B7", 5),
-            ("B8", 9),
-            ("B9", 14),
-            ("B10", 15),
-            ("B11", 1),
-            ("B12", 0),
-            ("B13", 4),
-            ("B14", 6),
-            ("B15", 4),
-            ("B16", 6),
-            ("B17", 4),
-            ("B18", 7),
-            ("B19", 13),
-            ("B20", 8),
-            ("B21", 11),
-            ("B22", 9),
-            ("B23", 3),
-            ("B24", 5),
-        ],
-        window: [0.0, 20.0],
-        colors: [Color::Magenta, Color::Red],
-        color_index: 0,
-        servers: vec![
-            Server {
-                name: "NorthAmerica-1",
-                location: "New York City",
-                coords: (40.71, -74.00),
-                status: "Up",
-            },
-            Server {
-                name: "Europe-1",
-                location: "Paris",
-                coords: (48.85, 2.35),
-                status: "Failure",
-            },
-            Server {
-                name: "SouthAmerica-1",
-                location: "São Paulo",
-                coords: (-23.54, -46.62),
-                status: "Up",
-            },
-            Server {
-                name: "Asia-1",
-                location: "Singapore",
-                coords: (1.35, 103.86),
-                status: "Up",
-            },
-        ],
-    };
-    let (tx, rx) = mpsc::channel();
-    let input_tx = tx.clone();
-
-    for _ in 0..100 {
-        sin_signal.next();
-    }
-    for _ in 0..200 {
-        sin_signal2.next();
-    }
-
-    thread::spawn(move || {
-        let stdin = io::stdin();
-        for c in stdin.keys() {
-            let evt = c.unwrap();
-            input_tx.send(Event::Input(evt)).unwrap();
-            if evt == event::Key::Char('q') {
-                break;
-            }
-        }
-    });
-
-    thread::spawn(move || {
-        let tx = tx.clone();
-        loop {
-            tx.send(Event::Tick).unwrap();
-            thread::sleep(time::Duration::from_millis(200));
-        }
-    });
-
-    let backend = MouseBackend::new().unwrap();
-    let mut terminal = Terminal::new(backend).unwrap();
-    terminal.clear().unwrap();
-    terminal.hide_cursor().unwrap();
-
-    loop {
-        let size = terminal.size().unwrap();
-        if size != app.size {
-            terminal.resize(size).unwrap();
-            app.size = size;
-        }
-        draw(&mut terminal, &app).unwrap();
-        let evt = rx.recv().unwrap();
-        match evt {
-            Event::Input(input) => match input {
-                event::Key::Char('q') => {
-                    break;
-                }
-                event::Key::Up => {
-                    if app.selected > 0 {
-                        app.selected -= 1
-                    };
-                }
-                event::Key::Down => if app.selected < app.items.len() - 1 {
-                    app.selected += 1;
-                },
-                event::Key::Left => {
-                    app.tabs.previous();
-                }
-                event::Key::Right => {
-                    app.tabs.next();
-                }
-                event::Key::Char('t') => {
-                    app.show_chart = !app.show_chart;
-                }
-                _ => {}
-            },
-            Event::Tick => {
-                app.progress += 5;
-                if app.progress > 100 {
-                    app.progress = 0;
-                }
-                app.data.insert(0, rand_signal.next().unwrap());
-                app.data.pop();
-                for _ in 0..5 {
-                    app.data2.remove(0);
-                    app.data2.push(sin_signal.next().unwrap());
-                }
-                for _ in 0..10 {
-                    app.data3.remove(0);
-                    app.data3.push(sin_signal2.next().unwrap());
-                }
-                let i = app.data4.pop().unwrap();
-                app.data4.insert(0, i);
-                app.window[0] += 1.0;
-                app.window[1] += 1.0;
-                let i = app.events.pop().unwrap();
-                app.events.insert(0, i);
-                app.color_index += 1;
-                if app.color_index >= app.colors.len() {
-                    app.color_index = 0;
-                }
-            }
-        }
-    }
-    terminal.show_cursor().unwrap();
-    terminal.clear().unwrap();
-}
-
-fn draw(t: &mut Terminal<MouseBackend>, app: &App) -> Result<(), io::Error> {
-    Group::default()
-        .direction(Direction::Vertical)
-        .sizes(&[Size::Fixed(3), Size::Min(0)])
-        .render(t, &app.size, |t, chunks| {
-            Tabs::default()
-                .block(Block::default().borders(Borders::ALL).title("Tabs"))
-                .titles(&app.tabs.titles)
-                .style(Style::default().fg(Color::Green))
-                .highlight_style(Style::default().fg(Color::Yellow))
-                .select(app.tabs.selection)
-                .render(t, &chunks[0]);
-            match app.tabs.selection {
-                0 => {
-                    draw_first_tab(t, app, &chunks[1]);
-                }
-                1 => {
-                    draw_second_tab(t, app, &chunks[1]);
-                }
-                _ => {}
-            };
-        });
-    try!(t.draw());
-    Ok(())
-}
-
-fn draw_first_tab(t: &mut Terminal<MouseBackend>, app: &App, area: &Rect) {
-    Group::default()
-        .direction(Direction::Vertical)
-        .sizes(&[Size::Fixed(7), Size::Min(7), Size::Fixed(7)])
-        .render(t, area, |t, chunks| {
-            draw_gauges(t, app, &chunks[0]);
-            draw_charts(t, app, &chunks[1]);
-            draw_text(t, &chunks[2]);
-        });
-}
-
-fn draw_gauges(t: &mut Terminal<MouseBackend>, app: &App, area: &Rect) {
-    Block::default()
-        .borders(Borders::ALL)
-        .title("Graphs")
-        .render(t, area);
-    Group::default()
-        .direction(Direction::Vertical)
-        .margin(1)
-        .sizes(&[Size::Fixed(2), Size::Fixed(3)])
-        .render(t, area, |t, chunks| {
-            Gauge::default()
-                .block(Block::default().title("Gauge:"))
-                .style(
-                    Style::default()
-                        .fg(Color::Magenta)
-                        .bg(Color::Black)
-                        .modifier(Modifier::Italic),
-                )
-                .label(&format!("{} / 100", app.progress))
-                .percent(app.progress)
-                .render(t, &chunks[0]);
-            Sparkline::default()
-                .block(Block::default().title("Sparkline:"))
-                .style(Style::default().fg(Color::Green))
-                .data(&app.data)
-                .render(t, &chunks[1]);
-        });
-}
-
-fn draw_charts(t: &mut Terminal<MouseBackend>, app: &App, area: &Rect) {
-    let sizes = if app.show_chart {
-        vec![Size::Percent(50), Size::Percent(50)]
-    } else {
-        vec![Size::Percent(100)]
-    };
-    Group::default()
-        .direction(Direction::Horizontal)
-        .sizes(&sizes)
-        .render(t, area, |t, chunks| {
-            Group::default()
-                .direction(Direction::Vertical)
-                .sizes(&[Size::Percent(50), Size::Percent(50)])
-                .render(t, &chunks[0], |t, chunks| {
-                    Group::default()
-                        .direction(Direction::Horizontal)
-                        .sizes(&[Size::Percent(50), Size::Percent(50)])
-                        .render(t, &chunks[0], |t, chunks| {
-                            SelectableList::default()
-                                .block(Block::default().borders(Borders::ALL).title("List"))
-                                .items(&app.items)
-                                .select(app.selected)
-                                .highlight_style(
-                                    Style::default().fg(Color::Yellow).modifier(Modifier::Bold),
-                                )
-                                .highlight_symbol(">")
-                                .render(t, &chunks[0]);
-                            let info_style = Style::default().fg(Color::White);
-                            let warning_style = Style::default().fg(Color::Yellow);
-                            let error_style = Style::default().fg(Color::Magenta);
-                            let critical_style = Style::default().fg(Color::Red);
-                            let events = app.events.iter().map(|&(evt, level)| {
-                                Item::StyledData(
-                                    format!("{}: {}", level, evt),
-                                    match level {
-                                        "ERROR" => &error_style,
-                                        "CRITICAL" => &critical_style,
-                                        "WARNING" => &warning_style,
-                                        _ => &info_style,
-                                    },
-                                )
-                            });
-                            List::new(events)
-                                .block(Block::default().borders(Borders::ALL).title("List"))
-                                .render(t, &chunks[1]);
-                        });
-                    BarChart::default()
-                        .block(Block::default().borders(Borders::ALL).title("Bar chart"))
-                        .data(&app.data4)
-                        .bar_width(3)
-                        .bar_gap(2)
-                        .value_style(
-                            Style::default()
-                                .fg(Color::Black)
-                                .bg(Color::Green)
-                                .modifier(Modifier::Italic),
-                        )
-                        .label_style(Style::default().fg(Color::Yellow))
-                        .style(Style::default().fg(Color::Green))
-                        .render(t, &chunks[1]);
-                });
-            if app.show_chart {
-                Chart::default()
-                    .block(
-                        Block::default()
-                            .title("Chart")
-                            .title_style(Style::default().fg(Color::Cyan).modifier(Modifier::Bold))
-                            .borders(Borders::ALL),
-                    )
-                    .x_axis(
-                        Axis::default()
-                            .title("X Axis")
-                            .style(Style::default().fg(Color::Gray))
-                            .labels_style(Style::default().modifier(Modifier::Italic))
-                            .bounds(app.window)
-                            .labels(&[
-                                &format!("{}", app.window[0]),
-                                &format!("{}", (app.window[0] + app.window[1]) / 2.0),
-                                &format!("{}", app.window[1]),
-                            ]),
-                    )
-                    .y_axis(
-                        Axis::default()
-                            .title("Y Axis")
-                            .style(Style::default().fg(Color::Gray))
-                            .labels_style(Style::default().modifier(Modifier::Italic))
-                            .bounds([-20.0, 20.0])
-                            .labels(&["-20", "0", "20"]),
-                    )
-                    .datasets(&[
-                        Dataset::default()
-                            .name("data2")
-                            .marker(Marker::Dot)
-                            .style(Style::default().fg(Color::Cyan))
-                            .data(&app.data2),
-                        Dataset::default()
-                            .name("data3")
-                            .marker(Marker::Braille)
-                            .style(Style::default().fg(Color::Yellow))
-                            .data(&app.data3),
-                    ])
-                    .render(t, &chunks[1]);
-            }
-        });
-}
-
-fn draw_text(t: &mut Terminal<MouseBackend>, area: &Rect) {
-    Paragraph::default()
-        .block(
-            Block::default()
-                .borders(Borders::ALL)
-                .title("Footer")
-                .title_style(Style::default().fg(Color::Magenta).modifier(Modifier::Bold)),
-        )
-        .wrap(true)
-        .text(
-            "This is a paragraph with several lines.\nYou can change the color.\nUse \
-             \\{fg=[color];bg=[color];mod=[modifier] [text]} to highlight the text with a color. \
-             For example, {fg=red u}{fg=green n}{fg=yellow d}{fg=magenta e}{fg=cyan r} \
-             {fg=gray t}{fg=light_gray h}{fg=light_red e} {fg=light_green r}{fg=light_yellow a} \
-             {fg=light_magenta i}{fg=light_cyan n}{fg=white b}{fg=red o}{fg=green w}.\n\
-             Oh, and if you didn't {mod=italic notice} you can {mod=bold automatically} \
-             {mod=invert wrap} your {mod=underline text} =).\nOne more thing is that \
-             it should display unicode characters properly: 日本国, ٩(-̮̮̃-̃)۶ ٩(●̮̮̃•̃)۶ ٩(͡๏̯͡๏)۶ \
-             ٩(-̮̮̃•̃).",
-        )
-        .render(t, area);
-}
-
-fn draw_second_tab(t: &mut Terminal<MouseBackend>, app: &App, area: &Rect) {
-    Group::default()
-        .direction(Direction::Horizontal)
-        .sizes(&[Size::Percent(30), Size::Percent(70)])
-        .render(t, area, |t, chunks| {
-            let up_style = Style::default().fg(Color::Green);
-            let failure_style = Style::default().fg(Color::Red);
-            Table::new(
-                ["Server", "Location", "Status"].into_iter(),
-                app.servers.iter().map(|s| {
-                    let style = if s.status == "Up" {
-                        &up_style
-                    } else {
-                        &failure_style
-                    };
-                    Row::StyledData(vec![s.name, s.location, s.status].into_iter(), style)
-                }),
-            ).block(Block::default().title("Servers").borders(Borders::ALL))
-                .header_style(Style::default().fg(Color::Yellow))
-                .widths(&[15, 15, 10])
-                .render(t, &chunks[0]);
-
-            Canvas::default()
-                .block(Block::default().title("World").borders(Borders::ALL))
-                .paint(|ctx| {
-                    ctx.draw(&Map {
-                        color: Color::White,
-                        resolution: MapResolution::High,
-                    });
-                    ctx.layer();
-                    for (i, s1) in app.servers.iter().enumerate() {
-                        for s2 in &app.servers[i + 1..] {
-                            ctx.draw(&Line {
-                                x1: s1.coords.1,
-                                y1: s1.coords.0,
-                                y2: s2.coords.0,
-                                x2: s2.coords.1,
-                                color: Color::Yellow,
-                            });
-                        }
-                    }
-                    for server in &app.servers {
-                        let color = if server.status == "Up" {
-                            Color::Green
-                        } else {
-                            Color::Red
-                        };
-                        ctx.print(server.coords.1, server.coords.0, "X", color);
-                    }
-                })
-                .x_bounds([-180.0, 180.0])
-                .y_bounds([-90.0, 90.0])
-                .render(t, &chunks[1]);
-        })
-}
--- a/examples/demo/app.rs
+++ b/examples/demo/app.rs
@@ -0,0 +1,346 @@
+use rand::{
+    distributions::{Distribution, Uniform},
+    rngs::ThreadRng,
+};
+use ratatui::widgets::ListState;
+
+const TASKS: [&str; 24] = [
+    "Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7", "Item8", "Item9", "Item10",
+    "Item11", "Item12", "Item13", "Item14", "Item15", "Item16", "Item17", "Item18", "Item19",
+    "Item20", "Item21", "Item22", "Item23", "Item24",
+];
+
+const LOGS: [(&str, &str); 26] = [
+    ("Event1", "INFO"),
+    ("Event2", "INFO"),
+    ("Event3", "CRITICAL"),
+    ("Event4", "ERROR"),
+    ("Event5", "INFO"),
+    ("Event6", "INFO"),
+    ("Event7", "WARNING"),
+    ("Event8", "INFO"),
+    ("Event9", "INFO"),
+    ("Event10", "INFO"),
+    ("Event11", "CRITICAL"),
+    ("Event12", "INFO"),
+    ("Event13", "INFO"),
+    ("Event14", "INFO"),
+    ("Event15", "INFO"),
+    ("Event16", "INFO"),
+    ("Event17", "ERROR"),
+    ("Event18", "ERROR"),
+    ("Event19", "INFO"),
+    ("Event20", "INFO"),
+    ("Event21", "WARNING"),
+    ("Event22", "INFO"),
+    ("Event23", "INFO"),
+    ("Event24", "WARNING"),
+    ("Event25", "INFO"),
+    ("Event26", "INFO"),
+];
+
+const EVENTS: [(&str, u64); 24] = [
+    ("B1", 9),
+    ("B2", 12),
+    ("B3", 5),
+    ("B4", 8),
+    ("B5", 2),
+    ("B6", 4),
+    ("B7", 5),
+    ("B8", 9),
+    ("B9", 14),
+    ("B10", 15),
+    ("B11", 1),
+    ("B12", 0),
+    ("B13", 4),
+    ("B14", 6),
+    ("B15", 4),
+    ("B16", 6),
+    ("B17", 4),
+    ("B18", 7),
+    ("B19", 13),
+    ("B20", 8),
+    ("B21", 11),
+    ("B22", 9),
+    ("B23", 3),
+    ("B24", 5),
+];
+
+#[derive(Clone)]
+pub struct RandomSignal {
+    distribution: Uniform<u64>,
+    rng: ThreadRng,
+}
+
+impl RandomSignal {
+    pub fn new(lower: u64, upper: u64) -> Self {
+        Self {
+            distribution: Uniform::new(lower, upper),
+            rng: rand::thread_rng(),
+        }
+    }
+}
+
+impl Iterator for RandomSignal {
+    type Item = u64;
+    fn next(&mut self) -> Option<u64> {
+        Some(self.distribution.sample(&mut self.rng))
+    }
+}
+
+#[derive(Clone)]
+pub struct SinSignal {
+    x: f64,
+    interval: f64,
+    period: f64,
+    scale: f64,
+}
+
+impl SinSignal {
+    pub const fn new(interval: f64, period: f64, scale: f64) -> Self {
+        Self {
+            x: 0.0,
+            interval,
+            period,
+            scale,
+        }
+    }
+}
+
+impl Iterator for SinSignal {
+    type Item = (f64, f64);
+    fn next(&mut self) -> Option<Self::Item> {
+        let point = (self.x, (self.x * 1.0 / self.period).sin() * self.scale);
+        self.x += self.interval;
+        Some(point)
+    }
+}
+
+pub struct TabsState<'a> {
+    pub titles: Vec<&'a str>,
+    pub index: usize,
+}
+
+impl<'a> TabsState<'a> {
+    pub fn new(titles: Vec<&'a str>) -> TabsState {
+        TabsState { titles, index: 0 }
+    }
+    pub fn next(&mut self) {
+        self.index = (self.index + 1) % self.titles.len();
+    }
+
+    pub fn previous(&mut self) {
+        if self.index > 0 {
+            self.index -= 1;
+        } else {
+            self.index = self.titles.len() - 1;
+        }
+    }
+}
+
+pub struct StatefulList<T> {
+    pub state: ListState,
+    pub items: Vec<T>,
+}
+
+impl<T> StatefulList<T> {
+    pub fn with_items(items: Vec<T>) -> Self {
+        Self {
+            state: ListState::default(),
+            items,
+        }
+    }
+
+    pub fn next(&mut self) {
+        let i = match self.state.selected() {
+            Some(i) => {
+                if i >= self.items.len() - 1 {
+                    0
+                } else {
+                    i + 1
+                }
+            }
+            None => 0,
+        };
+        self.state.select(Some(i));
+    }
+
+    pub fn previous(&mut self) {
+        let i = match self.state.selected() {
+            Some(i) => {
+                if i == 0 {
+                    self.items.len() - 1
+                } else {
+                    i - 1
+                }
+            }
+            None => 0,
+        };
+        self.state.select(Some(i));
+    }
+}
+
+pub struct Signal<S: Iterator> {
+    source: S,
+    pub points: Vec<S::Item>,
+    tick_rate: usize,
+}
+
+impl<S> Signal<S>
+where
+    S: Iterator,
+{
+    fn on_tick(&mut self) {
+        self.points.drain(0..self.tick_rate);
+        self.points
+            .extend(self.source.by_ref().take(self.tick_rate));
+    }
+}
+
+pub struct Signals {
+    pub sin1: Signal<SinSignal>,
+    pub sin2: Signal<SinSignal>,
+    pub window: [f64; 2],
+}
+
+impl Signals {
+    fn on_tick(&mut self) {
+        self.sin1.on_tick();
+        self.sin2.on_tick();
+        self.window[0] += 1.0;
+        self.window[1] += 1.0;
+    }
+}
+
+pub struct Server<'a> {
+    pub name: &'a str,
+    pub location: &'a str,
+    pub coords: (f64, f64),
+    pub status: &'a str,
+}
+
+pub struct App<'a> {
+    pub title: &'a str,
+    pub should_quit: bool,
+    pub tabs: TabsState<'a>,
+    pub show_chart: bool,
+    pub progress: f64,
+    pub sparkline: Signal<RandomSignal>,
+    pub tasks: StatefulList<&'a str>,
+    pub logs: StatefulList<(&'a str, &'a str)>,
+    pub signals: Signals,
+    pub barchart: Vec<(&'a str, u64)>,
+    pub servers: Vec<Server<'a>>,
+    pub enhanced_graphics: bool,
+}
+
+impl<'a> App<'a> {
+    pub fn new(title: &'a str, enhanced_graphics: bool) -> Self {
+        let mut rand_signal = RandomSignal::new(0, 100);
+        let sparkline_points = rand_signal.by_ref().take(300).collect();
+        let mut sin_signal = SinSignal::new(0.2, 3.0, 18.0);
+        let sin1_points = sin_signal.by_ref().take(100).collect();
+        let mut sin_signal2 = SinSignal::new(0.1, 2.0, 10.0);
+        let sin2_points = sin_signal2.by_ref().take(200).collect();
+        App {
+            title,
+            should_quit: false,
+            tabs: TabsState::new(vec!["Tab0", "Tab1", "Tab2"]),
+            show_chart: true,
+            progress: 0.0,
+            sparkline: Signal {
+                source: rand_signal,
+                points: sparkline_points,
+                tick_rate: 1,
+            },
+            tasks: StatefulList::with_items(TASKS.to_vec()),
+            logs: StatefulList::with_items(LOGS.to_vec()),
+            signals: Signals {
+                sin1: Signal {
+                    source: sin_signal,
+                    points: sin1_points,
+                    tick_rate: 5,
+                },
+                sin2: Signal {
+                    source: sin_signal2,
+                    points: sin2_points,
+                    tick_rate: 10,
+                },
+                window: [0.0, 20.0],
+            },
+            barchart: EVENTS.to_vec(),
+            servers: vec![
+                Server {
+                    name: "NorthAmerica-1",
+                    location: "New York City",
+                    coords: (40.71, -74.00),
+                    status: "Up",
+                },
+                Server {
+                    name: "Europe-1",
+                    location: "Paris",
+                    coords: (48.85, 2.35),
+                    status: "Failure",
+                },
+                Server {
+                    name: "SouthAmerica-1",
+                    location: "São Paulo",
+                    coords: (-23.54, -46.62),
+                    status: "Up",
+                },
+                Server {
+                    name: "Asia-1",
+                    location: "Singapore",
+                    coords: (1.35, 103.86),
+                    status: "Up",
+                },
+            ],
+            enhanced_graphics,
+        }
+    }
+
+    pub fn on_up(&mut self) {
+        self.tasks.previous();
+    }
+
+    pub fn on_down(&mut self) {
+        self.tasks.next();
+    }
+
+    pub fn on_right(&mut self) {
+        self.tabs.next();
+    }
+
+    pub fn on_left(&mut self) {
+        self.tabs.previous();
+    }
+
+    pub fn on_key(&mut self, c: char) {
+        match c {
+            'q' => {
+                self.should_quit = true;
+            }
+            't' => {
+                self.show_chart = !self.show_chart;
+            }
+            _ => {}
+        }
+    }
+
+    pub fn on_tick(&mut self) {
+        // Update progress
+        self.progress += 0.001;
+        if self.progress > 1.0 {
+            self.progress = 0.0;
+        }
+
+        self.sparkline.on_tick();
+        self.signals.on_tick();
+
+        let log = self.logs.items.pop().unwrap();
+        self.logs.items.insert(0, log);
+
+        let event = self.barchart.pop().unwrap();
+        self.barchart.insert(0, event);
+    }
+}
--- a/examples/demo/crossterm.rs
+++ b/examples/demo/crossterm.rs
@@ -0,0 +1,79 @@
+use std::{
+    error::Error,
+    io,
+    time::{Duration, Instant},
+};
+
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    crossterm::{
+        event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEventKind},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    terminal::Terminal,
+};
+
+use crate::{app::App, ui};
+
+pub fn run(tick_rate: Duration, enhanced_graphics: bool) -> Result<(), Box<dyn Error>> {
+    // setup terminal
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;
+
+    // create app and run it
+    let app = App::new("Crossterm Demo", enhanced_graphics);
+    let res = run_app(&mut terminal, app, tick_rate);
+
+    // restore terminal
+    disable_raw_mode()?;
+    execute!(
+        terminal.backend_mut(),
+        LeaveAlternateScreen,
+        DisableMouseCapture
+    )?;
+    terminal.show_cursor()?;
+
+    if let Err(err) = res {
+        println!("{err:?}");
+    }
+
+    Ok(())
+}
+
+fn run_app<B: Backend>(
+    terminal: &mut Terminal<B>,
+    mut app: App,
+    tick_rate: Duration,
+) -> io::Result<()> {
+    let mut last_tick = Instant::now();
+    loop {
+        terminal.draw(|f| ui::draw(f, &mut app))?;
+
+        let timeout = tick_rate.saturating_sub(last_tick.elapsed());
+        if crossterm::event::poll(timeout)? {
+            if let Event::Key(key) = event::read()? {
+                if key.kind == KeyEventKind::Press {
+                    match key.code {
+                        KeyCode::Left | KeyCode::Char('h') => app.on_left(),
+                        KeyCode::Up | KeyCode::Char('k') => app.on_up(),
+                        KeyCode::Right | KeyCode::Char('l') => app.on_right(),
+                        KeyCode::Down | KeyCode::Char('j') => app.on_down(),
+                        KeyCode::Char(c) => app.on_key(c),
+                        _ => {}
+                    }
+                }
+            }
+        }
+        if last_tick.elapsed() >= tick_rate {
+            app.on_tick();
+            last_tick = Instant::now();
+        }
+        if app.should_quit {
+            return Ok(());
+        }
+    }
+}
--- a/examples/demo/main.rs
+++ b/examples/demo/main.rs
@@ -0,0 +1,51 @@
+//! # [Ratatui] Original Demo example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+use std::{error::Error, time::Duration};
+
+use argh::FromArgs;
+
+mod app;
+#[cfg(feature = "crossterm")]
+mod crossterm;
+#[cfg(feature = "termion")]
+mod termion;
+#[cfg(feature = "termwiz")]
+mod termwiz;
+
+mod ui;
+
+/// Demo
+#[derive(Debug, FromArgs)]
+struct Cli {
+    /// time in ms between two ticks.
+    #[argh(option, default = "250")]
+    tick_rate: u64,
+    /// whether unicode symbols are used to improve the overall look of the app
+    #[argh(option, default = "true")]
+    enhanced_graphics: bool,
+}
+
+fn main() -> Result<(), Box<dyn Error>> {
+    let cli: Cli = argh::from_env();
+    let tick_rate = Duration::from_millis(cli.tick_rate);
+    #[cfg(feature = "crossterm")]
+    crate::crossterm::run(tick_rate, cli.enhanced_graphics)?;
+    #[cfg(feature = "termion")]
+    crate::termion::run(tick_rate, cli.enhanced_graphics)?;
+    #[cfg(feature = "termwiz")]
+    crate::termwiz::run(tick_rate, cli.enhanced_graphics)?;
+    Ok(())
+}
--- a/examples/demo/termion.rs
+++ b/examples/demo/termion.rs
@@ -0,0 +1,85 @@
+use std::{error::Error, io, sync::mpsc, thread, time::Duration};
+
+use ratatui::{
+    backend::{Backend, TermionBackend},
+    terminal::Terminal,
+    termion::{
+        event::Key,
+        input::{MouseTerminal, TermRead},
+        raw::IntoRawMode,
+        screen::IntoAlternateScreen,
+    },
+};
+
+use crate::{app::App, ui};
+
+pub fn run(tick_rate: Duration, enhanced_graphics: bool) -> Result<(), Box<dyn Error>> {
+    // setup terminal
+    let stdout = io::stdout()
+        .into_raw_mode()
+        .unwrap()
+        .into_alternate_screen()
+        .unwrap();
+    let stdout = MouseTerminal::from(stdout);
+    let backend = TermionBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;
+
+    // create app and run it
+    let app = App::new("Termion demo", enhanced_graphics);
+    run_app(&mut terminal, app, tick_rate)?;
+
+    Ok(())
+}
+
+fn run_app<B: Backend>(
+    terminal: &mut Terminal<B>,
+    mut app: App,
+    tick_rate: Duration,
+) -> Result<(), Box<dyn Error>> {
+    let events = events(tick_rate);
+    loop {
+        terminal.draw(|f| ui::draw(f, &mut app))?;
+
+        match events.recv()? {
+            Event::Input(key) => match key {
+                Key::Up | Key::Char('k') => app.on_up(),
+                Key::Down | Key::Char('j') => app.on_down(),
+                Key::Left | Key::Char('h') => app.on_left(),
+                Key::Right | Key::Char('l') => app.on_right(),
+                Key::Char(c) => app.on_key(c),
+                _ => {}
+            },
+            Event::Tick => app.on_tick(),
+        }
+        if app.should_quit {
+            return Ok(());
+        }
+    }
+}
+
+enum Event {
+    Input(Key),
+    Tick,
+}
+
+fn events(tick_rate: Duration) -> mpsc::Receiver<Event> {
+    let (tx, rx) = mpsc::channel();
+    let keys_tx = tx.clone();
+    thread::spawn(move || {
+        let stdin = io::stdin();
+        for key in stdin.keys().flatten() {
+            if let Err(err) = keys_tx.send(Event::Input(key)) {
+                eprintln!("{err}");
+                return;
+            }
+        }
+    });
+    thread::spawn(move || loop {
+        if let Err(err) = tx.send(Event::Tick) {
+            eprintln!("{err}");
+            break;
+        }
+        thread::sleep(tick_rate);
+    });
+    rx
+}
--- a/examples/demo/termwiz.rs
+++ b/examples/demo/termwiz.rs
@@ -0,0 +1,79 @@
+use std::{
+    error::Error,
+    time::{Duration, Instant},
+};
+
+use ratatui::{
+    backend::TermwizBackend,
+    terminal::Terminal,
+    termwiz::{
+        input::{InputEvent, KeyCode},
+        terminal::Terminal as TermwizTerminal,
+    },
+};
+
+use crate::{app::App, ui};
+
+pub fn run(tick_rate: Duration, enhanced_graphics: bool) -> Result<(), Box<dyn Error>> {
+    let backend = TermwizBackend::new()?;
+    let mut terminal = Terminal::new(backend)?;
+    terminal.hide_cursor()?;
+
+    // create app and run it
+    let app = App::new("Termwiz Demo", enhanced_graphics);
+    let res = run_app(&mut terminal, app, tick_rate);
+
+    terminal.show_cursor()?;
+    terminal.flush()?;
+
+    if let Err(err) = res {
+        println!("{err:?}");
+    }
+
+    Ok(())
+}
+
+fn run_app(
+    terminal: &mut Terminal<TermwizBackend>,
+    mut app: App,
+    tick_rate: Duration,
+) -> Result<(), Box<dyn Error>> {
+    let mut last_tick = Instant::now();
+    loop {
+        terminal.draw(|f| ui::draw(f, &mut app))?;
+
+        let timeout = tick_rate.saturating_sub(last_tick.elapsed());
+        if let Some(input) = terminal
+            .backend_mut()
+            .buffered_terminal_mut()
+            .terminal()
+            .poll_input(Some(timeout))?
+        {
+            match input {
+                InputEvent::Key(key_code) => match key_code.key {
+                    KeyCode::UpArrow | KeyCode::Char('k') => app.on_up(),
+                    KeyCode::DownArrow | KeyCode::Char('j') => app.on_down(),
+                    KeyCode::LeftArrow | KeyCode::Char('h') => app.on_left(),
+                    KeyCode::RightArrow | KeyCode::Char('l') => app.on_right(),
+                    KeyCode::Char(c) => app.on_key(c),
+                    _ => {}
+                },
+                InputEvent::Resized { cols, rows } => {
+                    terminal
+                        .backend_mut()
+                        .buffered_terminal_mut()
+                        .resize(cols, rows);
+                }
+                _ => {}
+            }
+        }
+
+        if last_tick.elapsed() >= tick_rate {
+            app.on_tick();
+            last_tick = Instant::now();
+        }
+        if app.should_quit {
+            return Ok(());
+        }
+    }
+}
--- a/examples/demo/ui.rs
+++ b/examples/demo/ui.rs
@@ -0,0 +1,400 @@
+use ratatui::{
+    layout::{Constraint, Layout, Rect},
+    style::{Color, Modifier, Style},
+    symbols,
+    terminal::Frame,
+    text::{self, Span},
+    widgets::{
+        canvas::{self, Canvas, Circle, Map, MapResolution, Rectangle},
+        Axis, BarChart, Block, Cell, Chart, Dataset, Gauge, LineGauge, List, ListItem, Paragraph,
+        Row, Sparkline, Table, Tabs, Wrap,
+    },
+};
+
+use crate::app::App;
+
+pub fn draw(f: &mut Frame, app: &mut App) {
+    let chunks = Layout::vertical([Constraint::Length(3), Constraint::Min(0)]).split(f.size());
+    let tabs = app
+        .tabs
+        .titles
+        .iter()
+        .map(|t| text::Line::from(Span::styled(*t, Style::default().fg(Color::Green))))
+        .collect::<Tabs>()
+        .block(Block::bordered().title(app.title))
+        .highlight_style(Style::default().fg(Color::Yellow))
+        .select(app.tabs.index);
+    f.render_widget(tabs, chunks[0]);
+    match app.tabs.index {
+        0 => draw_first_tab(f, app, chunks[1]),
+        1 => draw_second_tab(f, app, chunks[1]),
+        2 => draw_third_tab(f, app, chunks[1]),
+        _ => {}
+    };
+}
+
+fn draw_first_tab(f: &mut Frame, app: &mut App, area: Rect) {
+    let chunks = Layout::vertical([
+        Constraint::Length(9),
+        Constraint::Min(8),
+        Constraint::Length(7),
+    ])
+    .split(area);
+    draw_gauges(f, app, chunks[0]);
+    draw_charts(f, app, chunks[1]);
+    draw_text(f, chunks[2]);
+}
+
+fn draw_gauges(f: &mut Frame, app: &mut App, area: Rect) {
+    let chunks = Layout::vertical([
+        Constraint::Length(2),
+        Constraint::Length(3),
+        Constraint::Length(1),
+    ])
+    .margin(1)
+    .split(area);
+    let block = Block::bordered().title("Graphs");
+    f.render_widget(block, area);
+
+    let label = format!("{:.2}%", app.progress * 100.0);
+    let gauge = Gauge::default()
+        .block(Block::new().title("Gauge:"))
+        .gauge_style(
+            Style::default()
+                .fg(Color::Magenta)
+                .bg(Color::Black)
+                .add_modifier(Modifier::ITALIC | Modifier::BOLD),
+        )
+        .use_unicode(app.enhanced_graphics)
+        .label(label)
+        .ratio(app.progress);
+    f.render_widget(gauge, chunks[0]);
+
+    let sparkline = Sparkline::default()
+        .block(Block::new().title("Sparkline:"))
+        .style(Style::default().fg(Color::Green))
+        .data(&app.sparkline.points)
+        .bar_set(if app.enhanced_graphics {
+            symbols::bar::NINE_LEVELS
+        } else {
+            symbols::bar::THREE_LEVELS
+        });
+    f.render_widget(sparkline, chunks[1]);
+
+    let line_gauge = LineGauge::default()
+        .block(Block::new().title("LineGauge:"))
+        .filled_style(Style::default().fg(Color::Magenta))
+        .line_set(if app.enhanced_graphics {
+            symbols::line::THICK
+        } else {
+            symbols::line::NORMAL
+        })
+        .ratio(app.progress);
+    f.render_widget(line_gauge, chunks[2]);
+}
+
+#[allow(clippy::too_many_lines)]
+fn draw_charts(f: &mut Frame, app: &mut App, area: Rect) {
+    let constraints = if app.show_chart {
+        vec![Constraint::Percentage(50), Constraint::Percentage(50)]
+    } else {
+        vec![Constraint::Percentage(100)]
+    };
+    let chunks = Layout::horizontal(constraints).split(area);
+    {
+        let chunks = Layout::vertical([Constraint::Percentage(50), Constraint::Percentage(50)])
+            .split(chunks[0]);
+        {
+            let chunks =
+                Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)])
+                    .split(chunks[0]);
+
+            // Draw tasks
+            let tasks: Vec<ListItem> = app
+                .tasks
+                .items
+                .iter()
+                .map(|i| ListItem::new(vec![text::Line::from(Span::raw(*i))]))
+                .collect();
+            let tasks = List::new(tasks)
+                .block(Block::bordered().title("List"))
+                .highlight_style(Style::default().add_modifier(Modifier::BOLD))
+                .highlight_symbol("> ");
+            f.render_stateful_widget(tasks, chunks[0], &mut app.tasks.state);
+
+            // Draw logs
+            let info_style = Style::default().fg(Color::Blue);
+            let warning_style = Style::default().fg(Color::Yellow);
+            let error_style = Style::default().fg(Color::Magenta);
+            let critical_style = Style::default().fg(Color::Red);
+            let logs: Vec<ListItem> = app
+                .logs
+                .items
+                .iter()
+                .map(|&(evt, level)| {
+                    let s = match level {
+                        "ERROR" => error_style,
+                        "CRITICAL" => critical_style,
+                        "WARNING" => warning_style,
+                        _ => info_style,
+                    };
+                    let content = vec![text::Line::from(vec![
+                        Span::styled(format!("{level:<9}"), s),
+                        Span::raw(evt),
+                    ])];
+                    ListItem::new(content)
+                })
+                .collect();
+            let logs = List::new(logs).block(Block::bordered().title("List"));
+            f.render_stateful_widget(logs, chunks[1], &mut app.logs.state);
+        }
+
+        let barchart = BarChart::default()
+            .block(Block::bordered().title("Bar chart"))
+            .data(&app.barchart)
+            .bar_width(3)
+            .bar_gap(2)
+            .bar_set(if app.enhanced_graphics {
+                symbols::bar::NINE_LEVELS
+            } else {
+                symbols::bar::THREE_LEVELS
+            })
+            .value_style(
+                Style::default()
+                    .fg(Color::Black)
+                    .bg(Color::Green)
+                    .add_modifier(Modifier::ITALIC),
+            )
+            .label_style(Style::default().fg(Color::Yellow))
+            .bar_style(Style::default().fg(Color::Green));
+        f.render_widget(barchart, chunks[1]);
+    }
+    if app.show_chart {
+        let x_labels = vec![
+            Span::styled(
+                format!("{}", app.signals.window[0]),
+                Style::default().add_modifier(Modifier::BOLD),
+            ),
+            Span::raw(format!(
+                "{}",
+                (app.signals.window[0] + app.signals.window[1]) / 2.0
+            )),
+            Span::styled(
+                format!("{}", app.signals.window[1]),
+                Style::default().add_modifier(Modifier::BOLD),
+            ),
+        ];
+        let datasets = vec![
+            Dataset::default()
+                .name("data2")
+                .marker(symbols::Marker::Dot)
+                .style(Style::default().fg(Color::Cyan))
+                .data(&app.signals.sin1.points),
+            Dataset::default()
+                .name("data3")
+                .marker(if app.enhanced_graphics {
+                    symbols::Marker::Braille
+                } else {
+                    symbols::Marker::Dot
+                })
+                .style(Style::default().fg(Color::Yellow))
+                .data(&app.signals.sin2.points),
+        ];
+        let chart = Chart::new(datasets)
+            .block(
+                Block::bordered().title(Span::styled(
+                    "Chart",
+                    Style::default()
+                        .fg(Color::Cyan)
+                        .add_modifier(Modifier::BOLD),
+                )),
+            )
+            .x_axis(
+                Axis::default()
+                    .title("X Axis")
+                    .style(Style::default().fg(Color::Gray))
+                    .bounds(app.signals.window)
+                    .labels(x_labels),
+            )
+            .y_axis(
+                Axis::default()
+                    .title("Y Axis")
+                    .style(Style::default().fg(Color::Gray))
+                    .bounds([-20.0, 20.0])
+                    .labels(vec![
+                        Span::styled("-20", Style::default().add_modifier(Modifier::BOLD)),
+                        Span::raw("0"),
+                        Span::styled("20", Style::default().add_modifier(Modifier::BOLD)),
+                    ]),
+            );
+        f.render_widget(chart, chunks[1]);
+    }
+}
+
+fn draw_text(f: &mut Frame, area: Rect) {
+    let text = vec![
+        text::Line::from("This is a paragraph with several lines. You can change style your text the way you want"),
+        text::Line::from(""),
+        text::Line::from(vec![
+            Span::from("For example: "),
+            Span::styled("under", Style::default().fg(Color::Red)),
+            Span::raw(" "),
+            Span::styled("the", Style::default().fg(Color::Green)),
+            Span::raw(" "),
+            Span::styled("rainbow", Style::default().fg(Color::Blue)),
+            Span::raw("."),
+        ]),
+        text::Line::from(vec![
+            Span::raw("Oh and if you didn't "),
+            Span::styled("notice", Style::default().add_modifier(Modifier::ITALIC)),
+            Span::raw(" you can "),
+            Span::styled("automatically", Style::default().add_modifier(Modifier::BOLD)),
+            Span::raw(" "),
+            Span::styled("wrap", Style::default().add_modifier(Modifier::REVERSED)),
+            Span::raw(" your "),
+            Span::styled("text", Style::default().add_modifier(Modifier::UNDERLINED)),
+            Span::raw(".")
+        ]),
+        text::Line::from(
+            "One more thing is that it should display unicode characters: 10€"
+        ),
+    ];
+    let block = Block::bordered().title(Span::styled(
+        "Footer",
+        Style::default()
+            .fg(Color::Magenta)
+            .add_modifier(Modifier::BOLD),
+    ));
+    let paragraph = Paragraph::new(text).block(block).wrap(Wrap { trim: true });
+    f.render_widget(paragraph, area);
+}
+
+fn draw_second_tab(f: &mut Frame, app: &mut App, area: Rect) {
+    let chunks =
+        Layout::horizontal([Constraint::Percentage(30), Constraint::Percentage(70)]).split(area);
+    let up_style = Style::default().fg(Color::Green);
+    let failure_style = Style::default()
+        .fg(Color::Red)
+        .add_modifier(Modifier::RAPID_BLINK | Modifier::CROSSED_OUT);
+    let rows = app.servers.iter().map(|s| {
+        let style = if s.status == "Up" {
+            up_style
+        } else {
+            failure_style
+        };
+        Row::new(vec![s.name, s.location, s.status]).style(style)
+    });
+    let table = Table::new(
+        rows,
+        [
+            Constraint::Length(15),
+            Constraint::Length(15),
+            Constraint::Length(10),
+        ],
+    )
+    .header(
+        Row::new(vec!["Server", "Location", "Status"])
+            .style(Style::default().fg(Color::Yellow))
+            .bottom_margin(1),
+    )
+    .block(Block::bordered().title("Servers"));
+    f.render_widget(table, chunks[0]);
+
+    let map = Canvas::default()
+        .block(Block::bordered().title("World"))
+        .paint(|ctx| {
+            ctx.draw(&Map {
+                color: Color::White,
+                resolution: MapResolution::High,
+            });
+            ctx.layer();
+            ctx.draw(&Rectangle {
+                x: 0.0,
+                y: 30.0,
+                width: 10.0,
+                height: 10.0,
+                color: Color::Yellow,
+            });
+            ctx.draw(&Circle {
+                x: app.servers[2].coords.1,
+                y: app.servers[2].coords.0,
+                radius: 10.0,
+                color: Color::Green,
+            });
+            for (i, s1) in app.servers.iter().enumerate() {
+                for s2 in &app.servers[i + 1..] {
+                    ctx.draw(&canvas::Line {
+                        x1: s1.coords.1,
+                        y1: s1.coords.0,
+                        y2: s2.coords.0,
+                        x2: s2.coords.1,
+                        color: Color::Yellow,
+                    });
+                }
+            }
+            for server in &app.servers {
+                let color = if server.status == "Up" {
+                    Color::Green
+                } else {
+                    Color::Red
+                };
+                ctx.print(
+                    server.coords.1,
+                    server.coords.0,
+                    Span::styled("X", Style::default().fg(color)),
+                );
+            }
+        })
+        .marker(if app.enhanced_graphics {
+            symbols::Marker::Braille
+        } else {
+            symbols::Marker::Dot
+        })
+        .x_bounds([-180.0, 180.0])
+        .y_bounds([-90.0, 90.0]);
+    f.render_widget(map, chunks[1]);
+}
+
+fn draw_third_tab(f: &mut Frame, _app: &mut App, area: Rect) {
+    let chunks = Layout::horizontal([Constraint::Ratio(1, 2), Constraint::Ratio(1, 2)]).split(area);
+    let colors = [
+        Color::Reset,
+        Color::Black,
+        Color::Red,
+        Color::Green,
+        Color::Yellow,
+        Color::Blue,
+        Color::Magenta,
+        Color::Cyan,
+        Color::Gray,
+        Color::DarkGray,
+        Color::LightRed,
+        Color::LightGreen,
+        Color::LightYellow,
+        Color::LightBlue,
+        Color::LightMagenta,
+        Color::LightCyan,
+        Color::White,
+    ];
+    let items: Vec<Row> = colors
+        .iter()
+        .map(|c| {
+            let cells = vec![
+                Cell::from(Span::raw(format!("{c:?}: "))),
+                Cell::from(Span::styled("Foreground", Style::default().fg(*c))),
+                Cell::from(Span::styled("Background", Style::default().bg(*c))),
+            ];
+            Row::new(cells)
+        })
+        .collect();
+    let table = Table::new(
+        items,
+        [
+            Constraint::Ratio(1, 3),
+            Constraint::Ratio(1, 3),
+            Constraint::Ratio(1, 3),
+        ],
+    )
+    .block(Block::bordered().title("Colors"));
+    f.render_widget(table, chunks[0]);
+}
--- a/examples/demo2/app.rs
+++ b/examples/demo2/app.rs
@@ -0,0 +1,229 @@
+use std::time::Duration;
+
+use color_eyre::{eyre::Context, Result};
+use itertools::Itertools;
+use ratatui::{
+    backend::Backend,
+    buffer::Buffer,
+    crossterm::event::{Event, KeyCode, KeyEvent, KeyEventKind},
+    layout::{Constraint, Layout, Rect},
+    style::Color,
+    terminal::Terminal,
+    text::{Line, Span},
+    widgets::{Block, Tabs, Widget},
+};
+use strum::{Display, EnumIter, FromRepr, IntoEnumIterator};
+
+use crate::{
+    destroy,
+    tabs::{AboutTab, EmailTab, RecipeTab, TracerouteTab, WeatherTab},
+    term, THEME,
+};
+
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
+pub struct App {
+    mode: Mode,
+    tab: Tab,
+    about_tab: AboutTab,
+    recipe_tab: RecipeTab,
+    email_tab: EmailTab,
+    traceroute_tab: TracerouteTab,
+    weather_tab: WeatherTab,
+}
+
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
+enum Mode {
+    #[default]
+    Running,
+    Destroy,
+    Quit,
+}
+
+#[derive(Debug, Clone, Copy, Default, Display, EnumIter, FromRepr, PartialEq, Eq)]
+enum Tab {
+    #[default]
+    About,
+    Recipe,
+    Email,
+    Traceroute,
+    Weather,
+}
+
+pub fn run(terminal: &mut Terminal<impl Backend>) -> Result<()> {
+    App::default().run(terminal)
+}
+
+impl App {
+    /// Run the app until the user quits.
+    pub fn run(&mut self, terminal: &mut Terminal<impl Backend>) -> Result<()> {
+        while self.is_running() {
+            self.draw(terminal)?;
+            self.handle_events()?;
+        }
+        Ok(())
+    }
+
+    fn is_running(&self) -> bool {
+        self.mode != Mode::Quit
+    }
+
+    /// Draw a single frame of the app.
+    fn draw(&self, terminal: &mut Terminal<impl Backend>) -> Result<()> {
+        terminal
+            .draw(|frame| {
+                frame.render_widget(self, frame.size());
+                if self.mode == Mode::Destroy {
+                    destroy::destroy(frame);
+                }
+            })
+            .wrap_err("terminal.draw")?;
+        Ok(())
+    }
+
+    /// Handle events from the terminal.
+    ///
+    /// This function is called once per frame, The events are polled from the stdin with timeout of
+    /// 1/50th of a second. This was chosen to try to match the default frame rate of a GIF in VHS.
+    fn handle_events(&mut self) -> Result<()> {
+        let timeout = Duration::from_secs_f64(1.0 / 50.0);
+        match term::next_event(timeout)? {
+            Some(Event::Key(key)) if key.kind == KeyEventKind::Press => self.handle_key_press(key),
+            _ => {}
+        }
+        Ok(())
+    }
+
+    fn handle_key_press(&mut self, key: KeyEvent) {
+        match key.code {
+            KeyCode::Char('q') | KeyCode::Esc => self.mode = Mode::Quit,
+            KeyCode::Char('h') | KeyCode::Left => self.prev_tab(),
+            KeyCode::Char('l') | KeyCode::Right => self.next_tab(),
+            KeyCode::Char('k') | KeyCode::Up => self.prev(),
+            KeyCode::Char('j') | KeyCode::Down => self.next(),
+            KeyCode::Char('d') | KeyCode::Delete => self.destroy(),
+            _ => {}
+        };
+    }
+
+    fn prev(&mut self) {
+        match self.tab {
+            Tab::About => self.about_tab.prev_row(),
+            Tab::Recipe => self.recipe_tab.prev(),
+            Tab::Email => self.email_tab.prev(),
+            Tab::Traceroute => self.traceroute_tab.prev_row(),
+            Tab::Weather => self.weather_tab.prev(),
+        }
+    }
+
+    fn next(&mut self) {
+        match self.tab {
+            Tab::About => self.about_tab.next_row(),
+            Tab::Recipe => self.recipe_tab.next(),
+            Tab::Email => self.email_tab.next(),
+            Tab::Traceroute => self.traceroute_tab.next_row(),
+            Tab::Weather => self.weather_tab.next(),
+        }
+    }
+
+    fn prev_tab(&mut self) {
+        self.tab = self.tab.prev();
+    }
+
+    fn next_tab(&mut self) {
+        self.tab = self.tab.next();
+    }
+
+    fn destroy(&mut self) {
+        self.mode = Mode::Destroy;
+    }
+}
+
+/// Implement Widget for &App rather than for App as we would otherwise have to clone or copy the
+/// entire app state on every frame. For this example, the app state is small enough that it doesn't
+/// matter, but for larger apps this can be a significant performance improvement.
+impl Widget for &App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let vertical = Layout::vertical([
+            Constraint::Length(1),
+            Constraint::Min(0),
+            Constraint::Length(1),
+        ]);
+        let [title_bar, tab, bottom_bar] = vertical.areas(area);
+
+        Block::new().style(THEME.root).render(area, buf);
+        self.render_title_bar(title_bar, buf);
+        self.render_selected_tab(tab, buf);
+        App::render_bottom_bar(bottom_bar, buf);
+    }
+}
+
+impl App {
+    fn render_title_bar(&self, area: Rect, buf: &mut Buffer) {
+        let layout = Layout::horizontal([Constraint::Min(0), Constraint::Length(43)]);
+        let [title, tabs] = layout.areas(area);
+
+        Span::styled("Ratatui", THEME.app_title).render(title, buf);
+        let titles = Tab::iter().map(Tab::title);
+        Tabs::new(titles)
+            .style(THEME.tabs)
+            .highlight_style(THEME.tabs_selected)
+            .select(self.tab as usize)
+            .divider("")
+            .padding("", "")
+            .render(tabs, buf);
+    }
+
+    fn render_selected_tab(&self, area: Rect, buf: &mut Buffer) {
+        match self.tab {
+            Tab::About => self.about_tab.render(area, buf),
+            Tab::Recipe => self.recipe_tab.render(area, buf),
+            Tab::Email => self.email_tab.render(area, buf),
+            Tab::Traceroute => self.traceroute_tab.render(area, buf),
+            Tab::Weather => self.weather_tab.render(area, buf),
+        };
+    }
+
+    fn render_bottom_bar(area: Rect, buf: &mut Buffer) {
+        let keys = [
+            ("H/←", "Left"),
+            ("L/→", "Right"),
+            ("K/↑", "Up"),
+            ("J/↓", "Down"),
+            ("D/Del", "Destroy"),
+            ("Q/Esc", "Quit"),
+        ];
+        let spans = keys
+            .iter()
+            .flat_map(|(key, desc)| {
+                let key = Span::styled(format!(" {key} "), THEME.key_binding.key);
+                let desc = Span::styled(format!(" {desc} "), THEME.key_binding.description);
+                [key, desc]
+            })
+            .collect_vec();
+        Line::from(spans)
+            .centered()
+            .style((Color::Indexed(236), Color::Indexed(232)))
+            .render(area, buf);
+    }
+}
+
+impl Tab {
+    fn next(self) -> Self {
+        let current_index = self as usize;
+        let next_index = current_index.saturating_add(1);
+        Self::from_repr(next_index).unwrap_or(self)
+    }
+
+    fn prev(self) -> Self {
+        let current_index = self as usize;
+        let prev_index = current_index.saturating_sub(1);
+        Self::from_repr(prev_index).unwrap_or(self)
+    }
+
+    fn title(self) -> String {
+        match self {
+            Self::About => String::new(),
+            tab => format!(" {tab} "),
+        }
+    }
+}
--- a/examples/demo2/big_text.rs
+++ b/examples/demo2/big_text.rs
@@ -0,0 +1,841 @@
+//! [tui-big-text] is a rust crate that renders large pixel text as a [Ratatui] widget using the
+//! glyphs from the [font8x8] crate.
+//!
+//! ![Hello World example](https://vhs.charm.sh/vhs-2UxNc2SJgiNqHoowbsXAMW.gif)
+//!
+//! # Installation
+//!
+//! ```shell
+//! cargo add ratatui tui-big-text
+//! ```
+//!
+//! # Usage
+//!
+//! Create a [`BigText`] widget using `BigTextBuilder` and pass it to [`Frame::render_widget`] to
+//! render be rendered. The builder allows you to customize the [`Style`] of the widget and the
+//! [`PixelSize`] of the glyphs. The [`PixelSize`] can be used to control how many character cells
+//! are used to represent a single pixel of the 8x8 font.
+//!
+//! # Example
+//!
+//! ```rust
+//! use anyhow::Result;
+//! use ratatui::{
+//!     backend::{self, Backend, CrosstermBackend},
+//!     buffer::{self, Buffer},
+//!     layout::{self, Alignment, Constraint, Direction, Layout, Margin, Rect},
+//!     style::{self, Color, Modifier, Style, Styled, Stylize},
+//!     symbols::{self, Marker},
+//!     terminal::{CompletedFrame, Frame, Terminal, TerminalOptions, Viewport},
+//!     text::{self, Line, Masked, Span, Text},
+//!     widgets::{block::BlockExt, StatefulWidget, Widget},
+//! };
+//! use tui_big_text::{BigTextBuilder, PixelSize};
+//!
+//! fn render(frame: &mut Frame) -> Result<()> {
+//!     let big_text = BigTextBuilder::default()
+//!         .pixel_size(PixelSize::Full)
+//!         .style(Style::new().blue())
+//!         .lines(vec![
+//!             "Hello".red().into(),
+//!             "World".white().into(),
+//!             "~~~~~".into(),
+//!         ])
+//!         .build()?;
+//!     frame.render_widget(big_text, frame.size());
+//!     Ok(())
+//! }
+//! ```
+//!
+//! [tui-big-text]: https://crates.io/crates/tui-big-text
+//! [Ratatui]: https://crates.io/crates/ratatui
+//! [font8x8]: https://crates.io/crates/font8x8
+//! [`BigText`]: crate::BigText
+//! [`PixelSize`]: crate::PixelSize
+//! [`Frame::render_widget`]: ratatui::Frame::render_widget
+//! [`Style`]: ratatui::style::Style
+
+use std::cmp::min;
+
+use derive_builder::Builder;
+use font8x8::UnicodeFonts;
+use ratatui::{
+    buffer::Buffer,
+    layout::Rect,
+    style::Style,
+    text::{Line, StyledGrapheme},
+    widgets::Widget,
+};
+
+#[allow(unused)]
+#[derive(Debug, Clone, Copy, Eq, PartialEq, Hash, Default)]
+pub enum PixelSize {
+    #[default]
+    /// A pixel from the 8x8 font is represented by a full character cell in the terminal.
+    Full,
+    /// A pixel from the 8x8 font is represented by a half (upper/lower) character cell in the
+    /// terminal.
+    HalfHeight,
+    /// A pixel from the 8x8 font is represented by a half (left/right) character cell in the
+    /// terminal.
+    HalfWidth,
+    /// A pixel from the 8x8 font is represented by a quadrant of a character cell in the terminal.
+    Quadrant,
+}
+
+/// Displays one or more lines of text using 8x8 pixel characters.
+///
+/// The text is rendered using the [font8x8](https://crates.io/crates/font8x8) crate.
+///
+/// Using the `pixel_size` method, you can also chose, how 'big' a pixel should be.
+/// Currently a pixel of the 8x8 font can be represented by one full or half
+/// (horizontal/vertical/both) character cell of the terminal.
+///
+/// # Examples
+///
+/// ```rust
+/// use ratatui::{
+///     backend::{self, Backend, CrosstermBackend},
+///     buffer::{self, Buffer},
+///     layout::{self, Alignment, Constraint, Direction, Layout, Margin, Rect},
+///     style::{self, Color, Modifier, Style, Styled, Stylize},
+///     symbols::{self, Marker},
+///     terminal::{CompletedFrame, Frame, Terminal, TerminalOptions, Viewport},
+///     text::{self, Line, Masked, Span, Text},
+///     widgets::{block::BlockExt, StatefulWidget, Widget},
+/// };
+/// use tui_big_text::{BigTextBuilder, PixelSize};
+///
+/// BigText::builder()
+///     .pixel_size(PixelSize::Full)
+///     .style(Style::new().white())
+///     .lines(vec![
+///         "Hello".red().into(),
+///         "World".blue().into(),
+///         "=====".into(),
+///     ])
+///     .build();
+/// ```
+///
+/// Renders:
+///
+/// ```plain
+/// ██  ██           ███     ███
+/// ██  ██            ██      ██
+/// ██  ██   ████     ██      ██     ████
+/// ██████  ██  ██    ██      ██    ██  ██
+/// ██  ██  ██████    ██      ██    ██  ██
+/// ██  ██  ██        ██      ██    ██  ██
+/// ██  ██   ████    ████    ████    ████
+///
+/// ██   ██                  ███       ███
+/// ██   ██                   ██        ██
+/// ██   ██  ████   ██ ███    ██        ██
+/// ██ █ ██ ██  ██   ███ ██   ██     █████
+/// ███████ ██  ██   ██  ██   ██    ██  ██
+/// ███ ███ ██  ██   ██       ██    ██  ██
+/// ██   ██  ████   ████     ████    ███ ██
+///
+///  ███ ██  ███ ██  ███ ██  ███ ██  ███ ██
+/// ██ ███  ██ ███  ██ ███  ██ ███  ██ ███
+/// ```
+#[derive(Debug, Builder, Clone, PartialEq, Eq, Hash)]
+pub struct BigText<'a> {
+    /// The text to display
+    #[builder(setter(into))]
+    lines: Vec<Line<'a>>,
+
+    /// The style of the widget
+    ///
+    /// Defaults to `Style::default()`
+    #[builder(default)]
+    style: Style,
+
+    /// The size of single glyphs
+    ///
+    /// Defaults to `BigTextSize::default()` (=> `BigTextSize::Full`)
+    #[builder(default)]
+    pixel_size: PixelSize,
+}
+
+impl Widget for BigText<'_> {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let layout = layout(area, self.pixel_size);
+        for (line, line_layout) in self.lines.iter().zip(layout) {
+            for (g, cell) in line.styled_graphemes(self.style).zip(line_layout) {
+                render_symbol(&g, cell, buf, self.pixel_size);
+            }
+        }
+    }
+}
+
+/// Returns how many cells are needed to display a full 8x8 glyphe using the given font size
+const fn cells_per_glyph(size: PixelSize) -> (u16, u16) {
+    match size {
+        PixelSize::Full => (8, 8),
+        PixelSize::HalfHeight => (8, 4),
+        PixelSize::HalfWidth => (4, 8),
+        PixelSize::Quadrant => (4, 4),
+    }
+}
+
+/// Chunk the area into as many x*y cells as possible returned as a 2D iterator of `Rect`s
+/// representing the rows of cells.
+/// The size of each cell depends on given font size
+fn layout(
+    area: Rect,
+    pixel_size: PixelSize,
+) -> impl IntoIterator<Item = impl IntoIterator<Item = Rect>> {
+    let (width, height) = cells_per_glyph(pixel_size);
+    (area.top()..area.bottom())
+        .step_by(height as usize)
+        .map(move |y| {
+            (area.left()..area.right())
+                .step_by(width as usize)
+                .map(move |x| {
+                    let width = min(area.right() - x, width);
+                    let height = min(area.bottom() - y, height);
+                    Rect::new(x, y, width, height)
+                })
+        })
+}
+
+/// Render a single grapheme into a cell by looking up the corresponding 8x8 bitmap in the
+/// `BITMAPS` array and setting the corresponding cells in the buffer.
+fn render_symbol(grapheme: &StyledGrapheme, area: Rect, buf: &mut Buffer, pixel_size: PixelSize) {
+    buf.set_style(area, grapheme.style);
+    let c = grapheme.symbol.chars().next().unwrap(); // TODO: handle multi-char graphemes
+    if let Some(glyph) = font8x8::BASIC_FONTS.get(c) {
+        render_glyph(glyph, area, buf, pixel_size);
+    }
+}
+
+/// Get the correct unicode symbol for two vertical "pixels"
+const fn get_symbol_half_height(top: u8, bottom: u8) -> char {
+    match top {
+        0 => match bottom {
+            0 => ' ',
+            _ => '▄',
+        },
+        _ => match bottom {
+            0 => '▀',
+            _ => '█',
+        },
+    }
+}
+
+/// Get the correct unicode symbol for two horizontal "pixels"
+const fn get_symbol_half_width(left: u8, right: u8) -> char {
+    match left {
+        0 => match right {
+            0 => ' ',
+            _ => '▐',
+        },
+        _ => match right {
+            0 => '▌',
+            _ => '█',
+        },
+    }
+}
+
+/// Get the correct unicode symbol for 2x2 "pixels"
+const fn get_symbol_half_size(
+    top_left: u8,
+    top_right: u8,
+    bottom_left: u8,
+    bottom_right: u8,
+) -> char {
+    const QUADRANT_SYMBOLS: [char; 16] = [
+        ' ', '▘', '▝', '▀', '▖', '▌', '▞', '▛', '▗', '▚', '▐', '▜', '▄', '▙', '▟', '█',
+    ];
+
+    let top_left = if top_left > 0 { 1 } else { 0 };
+    let top_right = if top_right > 0 { 1 << 1 } else { 0 };
+    let bottom_left = if bottom_left > 0 { 1 << 2 } else { 0 };
+    let bottom_right = if bottom_right > 0 { 1 << 3 } else { 0 };
+
+    QUADRANT_SYMBOLS[top_left + top_right + bottom_left + bottom_right]
+}
+
+/// Render a single 8x8 glyph into a cell by setting the corresponding cells in the buffer.
+fn render_glyph(glyph: [u8; 8], area: Rect, buf: &mut Buffer, pixel_size: PixelSize) {
+    let (width, height) = cells_per_glyph(pixel_size);
+
+    let glyph_vertical_index = (0..glyph.len()).step_by(8 / height as usize);
+    let glyph_horizontal_bit_selector = (0..8).step_by(8 / width as usize);
+
+    for (row, y) in glyph_vertical_index.zip(area.top()..area.bottom()) {
+        for (col, x) in glyph_horizontal_bit_selector
+            .clone()
+            .zip(area.left()..area.right())
+        {
+            let cell = buf.get_mut(x, y);
+            let symbol_character = match pixel_size {
+                PixelSize::Full => match glyph[row] & (1 << col) {
+                    0 => ' ',
+                    _ => '█',
+                },
+                PixelSize::HalfHeight => {
+                    let top = glyph[row] & (1 << col);
+                    let bottom = glyph[row + 1] & (1 << col);
+                    get_symbol_half_height(top, bottom)
+                }
+                PixelSize::HalfWidth => {
+                    let left = glyph[row] & (1 << col);
+                    let right = glyph[row] & (1 << (col + 1));
+                    get_symbol_half_width(left, right)
+                }
+                PixelSize::Quadrant => {
+                    let top_left = glyph[row] & (1 << col);
+                    let top_right = glyph[row] & (1 << (col + 1));
+                    let bottom_left = glyph[row + 1] & (1 << col);
+                    let bottom_right = glyph[row + 1] & (1 << (col + 1));
+                    get_symbol_half_size(top_left, top_right, bottom_left, bottom_right)
+                }
+            };
+            cell.set_char(symbol_character);
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use ratatui::style::Stylize;
+
+    use super::*;
+
+    type Result<T> = std::result::Result<T, Box<dyn std::error::Error>>;
+
+    #[test]
+    fn build() -> Result<()> {
+        let lines = vec![Line::from(vec!["Hello".red(), "World".blue()])];
+        let style = Style::new().green();
+        let pixel_size = PixelSize::default();
+        assert_eq!(
+            BigTextBuilder::default()
+                .lines(lines.clone())
+                .style(style)
+                .build()?,
+            BigText {
+                lines,
+                style,
+                pixel_size
+            }
+        );
+        Ok(())
+    }
+
+    #[test]
+    fn render_single_line() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .lines(vec![Line::from("SingleLine")])
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 80, 8));
+        big_text.render(buf.area, &mut buf);
+        let expected = Buffer::with_lines([
+            " ████     ██                     ███            ████      ██                    ",
+            "██  ██                            ██             ██                             ",
+            "███      ███    █████    ███ ██   ██     ████    ██      ███    █████    ████   ",
+            " ███      ██    ██  ██  ██  ██    ██    ██  ██   ██       ██    ██  ██  ██  ██  ",
+            "   ███    ██    ██  ██  ██  ██    ██    ██████   ██   █   ██    ██  ██  ██████  ",
+            "██  ██    ██    ██  ██   █████    ██    ██       ██  ██   ██    ██  ██  ██      ",
+            " ████    ████   ██  ██      ██   ████    ████   ███████  ████   ██  ██   ████   ",
+            "                        █████                                                   ",
+        ]);
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_truncated() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .lines(vec![Line::from("Truncated")])
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 70, 6));
+        big_text.render(buf.area, &mut buf);
+        let expected = Buffer::with_lines([
+            "██████                                             █               ███",
+            "█ ██ █                                            ██                ██",
+            "  ██    ██ ███  ██  ██  █████    ████    ████    █████   ████       ██",
+            "  ██     ███ ██ ██  ██  ██  ██  ██  ██      ██    ██    ██  ██   █████",
+            "  ██     ██  ██ ██  ██  ██  ██  ██       █████    ██    ██████  ██  ██",
+            "  ██     ██     ██  ██  ██  ██  ██  ██  ██  ██    ██ █  ██      ██  ██",
+        ]);
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_multiple_lines() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .lines(vec![Line::from("Multi"), Line::from("Lines")])
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 40, 16));
+        big_text.render(buf.area, &mut buf);
+        let expected = Buffer::with_lines([
+            "██   ██          ███       █      ██    ",
+            "███ ███           ██      ██            ",
+            "███████ ██  ██    ██     █████   ███    ",
+            "███████ ██  ██    ██      ██      ██    ",
+            "██ █ ██ ██  ██    ██      ██      ██    ",
+            "██   ██ ██  ██    ██      ██ █    ██    ",
+            "██   ██  ███ ██  ████      ██    ████   ",
+            "                                        ",
+            "████      ██                            ",
+            " ██                                     ",
+            " ██      ███    █████    ████    █████  ",
+            " ██       ██    ██  ██  ██  ██  ██      ",
+            " ██   █   ██    ██  ██  ██████   ████   ",
+            " ██  ██   ██    ██  ██  ██          ██  ",
+            "███████  ████   ██  ██   ████   █████   ",
+            "                                        ",
+        ]);
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_widget_style() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .lines(vec![Line::from("Styled")])
+            .style(Style::new().bold())
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 48, 8));
+        big_text.render(buf.area, &mut buf);
+        let expected = Buffer::with_lines([
+            " ████      █             ███               ███  ".bold(),
+            "██  ██    ██              ██                ██  ".bold(),
+            "███      █████  ██  ██    ██     ████       ██  ".bold(),
+            " ███      ██    ██  ██    ██    ██  ██   █████  ".bold(),
+            "   ███    ██    ██  ██    ██    ██████  ██  ██  ".bold(),
+            "██  ██    ██ █   █████    ██    ██      ██  ██  ".bold(),
+            " ████      ██       ██   ████    ████    ███ ██ ".bold(),
+            "                █████                           ".bold(),
+        ]);
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_line_style() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .lines(vec![
+                Line::from("Red".red()),
+                Line::from("Green".green()),
+                Line::from("Blue".blue()),
+            ])
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 40, 24));
+        big_text.render(buf.area, &mut buf);
+        let mut expected = Buffer::with_lines([
+            "██████             ███                  ",
+            " ██  ██             ██                  ",
+            " ██  ██  ████       ██                  ",
+            " █████  ██  ██   █████                  ",
+            " ██ ██  ██████  ██  ██                  ",
+            " ██  ██ ██      ██  ██                  ",
+            "███  ██  ████    ███ ██                 ",
+            "                                        ",
+            "  ████                                  ",
+            " ██  ██                                 ",
+            "██      ██ ███   ████    ████   █████   ",
+            "██       ███ ██ ██  ██  ██  ██  ██  ██  ",
+            "██  ███  ██  ██ ██████  ██████  ██  ██  ",
+            " ██  ██  ██     ██      ██      ██  ██  ",
+            "  █████ ████     ████    ████   ██  ██  ",
+            "                                        ",
+            "██████   ███                            ",
+            " ██  ██   ██                            ",
+            " ██  ██   ██    ██  ██   ████           ",
+            " █████    ██    ██  ██  ██  ██          ",
+            " ██  ██   ██    ██  ██  ██████          ",
+            " ██  ██   ██    ██  ██  ██              ",
+            "██████   ████    ███ ██  ████           ",
+            "                                        ",
+        ]);
+        expected.set_style(Rect::new(0, 0, 24, 8), Style::new().red());
+        expected.set_style(Rect::new(0, 8, 40, 8), Style::new().green());
+        expected.set_style(Rect::new(0, 16, 32, 8), Style::new().blue());
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_half_height_single_line() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .pixel_size(PixelSize::HalfHeight)
+            .lines(vec![Line::from("SingleLine")])
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 80, 4));
+        big_text.render(buf.area, &mut buf);
+        let expected = Buffer::with_lines([
+            "▄█▀▀█▄    ▀▀                     ▀██            ▀██▀      ▀▀                    ",
+            "▀██▄     ▀██    ██▀▀█▄  ▄█▀▀▄█▀   ██    ▄█▀▀█▄   ██      ▀██    ██▀▀█▄  ▄█▀▀█▄  ",
+            "▄▄ ▀██    ██    ██  ██  ▀█▄▄██    ██    ██▀▀▀▀   ██  ▄█   ██    ██  ██  ██▀▀▀▀  ",
+            " ▀▀▀▀    ▀▀▀▀   ▀▀  ▀▀  ▄▄▄▄█▀   ▀▀▀▀    ▀▀▀▀   ▀▀▀▀▀▀▀  ▀▀▀▀   ▀▀  ▀▀   ▀▀▀▀   ",
+        ]);
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_half_height_truncated() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .pixel_size(PixelSize::HalfHeight)
+            .lines(vec![Line::from("Truncated")])
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 70, 3));
+        big_text.render(buf.area, &mut buf);
+        let expected = Buffer::with_lines([
+            "█▀██▀█                                            ▄█               ▀██",
+            "  ██    ▀█▄█▀█▄ ██  ██  ██▀▀█▄  ▄█▀▀█▄   ▀▀▀█▄   ▀██▀▀  ▄█▀▀█▄   ▄▄▄██",
+            "  ██     ██  ▀▀ ██  ██  ██  ██  ██  ▄▄  ▄█▀▀██    ██ ▄  ██▀▀▀▀  ██  ██",
+        ]);
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_half_height_multiple_lines() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .pixel_size(PixelSize::HalfHeight)
+            .lines(vec![Line::from("Multi"), Line::from("Lines")])
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 40, 8));
+        big_text.render(buf.area, &mut buf);
+        let expected = Buffer::with_lines([
+            "██▄ ▄██          ▀██      ▄█      ▀▀    ",
+            "███████ ██  ██    ██     ▀██▀▀   ▀██    ",
+            "██ ▀ ██ ██  ██    ██      ██ ▄    ██    ",
+            "▀▀   ▀▀  ▀▀▀ ▀▀  ▀▀▀▀      ▀▀    ▀▀▀▀   ",
+            "▀██▀      ▀▀                            ",
+            " ██      ▀██    ██▀▀█▄  ▄█▀▀█▄  ▄█▀▀▀▀  ",
+            " ██  ▄█   ██    ██  ██  ██▀▀▀▀   ▀▀▀█▄  ",
+            "▀▀▀▀▀▀▀  ▀▀▀▀   ▀▀  ▀▀   ▀▀▀▀   ▀▀▀▀▀   ",
+        ]);
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_half_height_widget_style() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .pixel_size(PixelSize::HalfHeight)
+            .lines(vec![Line::from("Styled")])
+            .style(Style::new().bold())
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 48, 4));
+        big_text.render(buf.area, &mut buf);
+        let expected = Buffer::with_lines([
+            "▄█▀▀█▄    ▄█             ▀██               ▀██  ".bold(),
+            "▀██▄     ▀██▀▀  ██  ██    ██    ▄█▀▀█▄   ▄▄▄██  ".bold(),
+            "▄▄ ▀██    ██ ▄  ▀█▄▄██    ██    ██▀▀▀▀  ██  ██  ".bold(),
+            " ▀▀▀▀      ▀▀   ▄▄▄▄█▀   ▀▀▀▀    ▀▀▀▀    ▀▀▀ ▀▀ ".bold(),
+        ]);
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_half_height_line_style() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .pixel_size(PixelSize::HalfHeight)
+            .lines(vec![
+                Line::from("Red".red()),
+                Line::from("Green".green()),
+                Line::from("Blue".blue()),
+            ])
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 40, 12));
+        big_text.render(buf.area, &mut buf);
+        let mut expected = Buffer::with_lines([
+            "▀██▀▀█▄            ▀██                  ",
+            " ██▄▄█▀ ▄█▀▀█▄   ▄▄▄██                  ",
+            " ██ ▀█▄ ██▀▀▀▀  ██  ██                  ",
+            "▀▀▀  ▀▀  ▀▀▀▀    ▀▀▀ ▀▀                 ",
+            " ▄█▀▀█▄                                 ",
+            "██      ▀█▄█▀█▄ ▄█▀▀█▄  ▄█▀▀█▄  ██▀▀█▄  ",
+            "▀█▄ ▀██  ██  ▀▀ ██▀▀▀▀  ██▀▀▀▀  ██  ██  ",
+            "  ▀▀▀▀▀ ▀▀▀▀     ▀▀▀▀    ▀▀▀▀   ▀▀  ▀▀  ",
+            "▀██▀▀█▄  ▀██                            ",
+            " ██▄▄█▀   ██    ██  ██  ▄█▀▀█▄          ",
+            " ██  ██   ██    ██  ██  ██▀▀▀▀          ",
+            "▀▀▀▀▀▀   ▀▀▀▀    ▀▀▀ ▀▀  ▀▀▀▀           ",
+        ]);
+        expected.set_style(Rect::new(0, 0, 24, 4), Style::new().red());
+        expected.set_style(Rect::new(0, 4, 40, 4), Style::new().green());
+        expected.set_style(Rect::new(0, 8, 32, 4), Style::new().blue());
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_half_width_single_line() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .pixel_size(PixelSize::HalfWidth)
+            .lines(vec![Line::from("SingleLine")])
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 40, 8));
+        big_text.render(buf.area, &mut buf);
+        let expected = Buffer::with_lines([
+            "▐█▌  █          ▐█      ██   █          ",
+            "█ █              █      ▐▌              ",
+            "█▌  ▐█  ██▌ ▐█▐▌ █  ▐█▌ ▐▌  ▐█  ██▌ ▐█▌ ",
+            "▐█   █  █ █ █ █  █  █ █ ▐▌   █  █ █ █ █ ",
+            " ▐█  █  █ █ █ █  █  ███ ▐▌ ▌ █  █ █ ███ ",
+            "█ █  █  █ █ ▐██  █  █   ▐▌▐▌ █  █ █ █   ",
+            "▐█▌ ▐█▌ █ █   █ ▐█▌ ▐█▌ ███▌▐█▌ █ █ ▐█▌ ",
+            "            ██▌                         ",
+        ]);
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_half_width_truncated() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .pixel_size(PixelSize::HalfWidth)
+            .lines(vec![Line::from("Truncated")])
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 35, 6));
+        big_text.render(buf.area, &mut buf);
+        let expected = Buffer::with_lines([
+            "███                      ▐       ▐█",
+            "▌█▐                      █        █",
+            " █  █▐█ █ █ ██▌ ▐█▌ ▐█▌ ▐██ ▐█▌   █",
+            " █  ▐█▐▌█ █ █ █ █ █   █  █  █ █ ▐██",
+            " █  ▐▌▐▌█ █ █ █ █   ▐██  █  ███ █ █",
+            " █  ▐▌  █ █ █ █ █ █ █ █  █▐ █   █ █",
+        ]);
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_half_width_multiple_lines() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .pixel_size(PixelSize::HalfWidth)
+            .lines(vec![Line::from("Multi"), Line::from("Lines")])
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 20, 16));
+        big_text.render(buf.area, &mut buf);
+        let expected = Buffer::with_lines([
+            "█ ▐▌    ▐█   ▐   █  ",
+            "█▌█▌     █   █      ",
+            "███▌█ █  █  ▐██ ▐█  ",
+            "███▌█ █  █   █   █  ",
+            "█▐▐▌█ █  █   █   █  ",
+            "█ ▐▌█ █  █   █▐  █  ",
+            "█ ▐▌▐█▐▌▐█▌  ▐▌ ▐█▌ ",
+            "                    ",
+            "██   █              ",
+            "▐▌                  ",
+            "▐▌  ▐█  ██▌ ▐█▌ ▐██ ",
+            "▐▌   █  █ █ █ █ █   ",
+            "▐▌ ▌ █  █ █ ███ ▐█▌ ",
+            "▐▌▐▌ █  █ █ █     █ ",
+            "███▌▐█▌ █ █ ▐█▌ ██▌ ",
+            "                    ",
+        ]);
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_half_width_widget_style() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .pixel_size(PixelSize::HalfWidth)
+            .lines(vec![Line::from("Styled")])
+            .style(Style::new().bold())
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 24, 8));
+        big_text.render(buf.area, &mut buf);
+        let expected = Buffer::with_lines([
+            "▐█▌  ▐      ▐█       ▐█ ".bold(),
+            "█ █  █       █        █ ".bold(),
+            "█▌  ▐██ █ █  █  ▐█▌   █ ".bold(),
+            "▐█   █  █ █  █  █ █ ▐██ ".bold(),
+            " ▐█  █  █ █  █  ███ █ █ ".bold(),
+            "█ █  █▐ ▐██  █  █   █ █ ".bold(),
+            "▐█▌  ▐▌   █ ▐█▌ ▐█▌ ▐█▐▌".bold(),
+            "        ██▌             ".bold(),
+        ]);
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_half_width_line_style() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .pixel_size(PixelSize::HalfWidth)
+            .lines(vec![
+                Line::from("Red".red()),
+                Line::from("Green".green()),
+                Line::from("Blue".blue()),
+            ])
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 20, 24));
+        big_text.render(buf.area, &mut buf);
+        let mut expected = Buffer::with_lines([
+            "███      ▐█         ",
+            "▐▌▐▌      █         ",
+            "▐▌▐▌▐█▌   █         ",
+            "▐██ █ █ ▐██         ",
+            "▐▌█ ███ █ █         ",
+            "▐▌▐▌█   █ █         ",
+            "█▌▐▌▐█▌ ▐█▐▌        ",
+            "                    ",
+            " ██                 ",
+            "▐▌▐▌                ",
+            "█   █▐█ ▐█▌ ▐█▌ ██▌ ",
+            "█   ▐█▐▌█ █ █ █ █ █ ",
+            "█ █▌▐▌▐▌███ ███ █ █ ",
+            "▐▌▐▌▐▌  █   █   █ █ ",
+            " ██▌██  ▐█▌ ▐█▌ █ █ ",
+            "                    ",
+            "███ ▐█              ",
+            "▐▌▐▌ █              ",
+            "▐▌▐▌ █  █ █ ▐█▌     ",
+            "▐██  █  █ █ █ █     ",
+            "▐▌▐▌ █  █ █ ███     ",
+            "▐▌▐▌ █  █ █ █       ",
+            "███ ▐█▌ ▐█▐▌▐█▌     ",
+            "                    ",
+        ]);
+        expected.set_style(Rect::new(0, 0, 12, 8), Style::new().red());
+        expected.set_style(Rect::new(0, 8, 20, 8), Style::new().green());
+        expected.set_style(Rect::new(0, 16, 16, 8), Style::new().blue());
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn check_half_size_symbols() -> Result<()> {
+        assert_eq!(get_symbol_half_size(0, 0, 0, 0), ' ');
+        assert_eq!(get_symbol_half_size(1, 0, 0, 0), '▘');
+        assert_eq!(get_symbol_half_size(0, 1, 0, 0), '▝');
+        assert_eq!(get_symbol_half_size(1, 1, 0, 0), '▀');
+        assert_eq!(get_symbol_half_size(0, 0, 1, 0), '▖');
+        assert_eq!(get_symbol_half_size(1, 0, 1, 0), '▌');
+        assert_eq!(get_symbol_half_size(0, 1, 1, 0), '▞');
+        assert_eq!(get_symbol_half_size(1, 1, 1, 0), '▛');
+        assert_eq!(get_symbol_half_size(0, 0, 0, 1), '▗');
+        assert_eq!(get_symbol_half_size(1, 0, 0, 1), '▚');
+        assert_eq!(get_symbol_half_size(0, 1, 0, 1), '▐');
+        assert_eq!(get_symbol_half_size(1, 1, 0, 1), '▜');
+        assert_eq!(get_symbol_half_size(0, 0, 1, 1), '▄');
+        assert_eq!(get_symbol_half_size(1, 0, 1, 1), '▙');
+        assert_eq!(get_symbol_half_size(0, 1, 1, 1), '▟');
+        assert_eq!(get_symbol_half_size(1, 1, 1, 1), '█');
+        Ok(())
+    }
+
+    #[test]
+    fn render_half_size_single_line() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .pixel_size(PixelSize::Quadrant)
+            .lines(vec![Line::from("SingleLine")])
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 40, 4));
+        big_text.render(buf.area, &mut buf);
+        let expected = Buffer::with_lines([
+            "▟▀▙  ▀          ▝█      ▜▛   ▀          ",
+            "▜▙  ▝█  █▀▙ ▟▀▟▘ █  ▟▀▙ ▐▌  ▝█  █▀▙ ▟▀▙ ",
+            "▄▝█  █  █ █ ▜▄█  █  █▀▀ ▐▌▗▌ █  █ █ █▀▀ ",
+            "▝▀▘ ▝▀▘ ▀ ▀ ▄▄▛ ▝▀▘ ▝▀▘ ▀▀▀▘▝▀▘ ▀ ▀ ▝▀▘ ",
+        ]);
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_half_size_truncated() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .pixel_size(PixelSize::Quadrant)
+            .lines(vec![Line::from("Truncated")])
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 35, 3));
+        big_text.render(buf.area, &mut buf);
+        let expected = Buffer::with_lines([
+            "▛█▜                      ▟       ▝█",
+            " █  ▜▟▜▖█ █ █▀▙ ▟▀▙ ▝▀▙ ▝█▀ ▟▀▙ ▗▄█",
+            " █  ▐▌▝▘█ █ █ █ █ ▄ ▟▀█  █▗ █▀▀ █ █",
+        ]);
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_half_size_multiple_lines() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .pixel_size(PixelSize::Quadrant)
+            .lines(vec![Line::from("Multi"), Line::from("Lines")])
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 20, 8));
+        big_text.render(buf.area, &mut buf);
+        let expected = Buffer::with_lines([
+            "█▖▟▌    ▝█   ▟   ▀  ",
+            "███▌█ █  █  ▝█▀ ▝█  ",
+            "█▝▐▌█ █  █   █▗  █  ",
+            "▀ ▝▘▝▀▝▘▝▀▘  ▝▘ ▝▀▘ ",
+            "▜▛   ▀              ",
+            "▐▌  ▝█  █▀▙ ▟▀▙ ▟▀▀ ",
+            "▐▌▗▌ █  █ █ █▀▀ ▝▀▙ ",
+            "▀▀▀▘▝▀▘ ▀ ▀ ▝▀▘ ▀▀▘ ",
+        ]);
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_half_size_widget_style() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .pixel_size(PixelSize::Quadrant)
+            .lines(vec![Line::from("Styled")])
+            .style(Style::new().bold())
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 24, 4));
+        big_text.render(buf.area, &mut buf);
+        let expected = Buffer::with_lines([
+            "▟▀▙  ▟      ▝█       ▝█ ".bold(),
+            "▜▙  ▝█▀ █ █  █  ▟▀▙ ▗▄█ ".bold(),
+            "▄▝█  █▗ ▜▄█  █  █▀▀ █ █ ".bold(),
+            "▝▀▘  ▝▘ ▄▄▛ ▝▀▘ ▝▀▘ ▝▀▝▘".bold(),
+        ]);
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn render_half_size_line_style() -> Result<()> {
+        let big_text = BigTextBuilder::default()
+            .pixel_size(PixelSize::Quadrant)
+            .lines(vec![
+                Line::from("Red".red()),
+                Line::from("Green".green()),
+                Line::from("Blue".blue()),
+            ])
+            .build()?;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 20, 12));
+        big_text.render(buf.area, &mut buf);
+        let mut expected = Buffer::with_lines([
+            "▜▛▜▖     ▝█         ",
+            "▐▙▟▘▟▀▙ ▗▄█         ",
+            "▐▌▜▖█▀▀ █ █         ",
+            "▀▘▝▘▝▀▘ ▝▀▝▘        ",
+            "▗▛▜▖                ",
+            "█   ▜▟▜▖▟▀▙ ▟▀▙ █▀▙ ",
+            "▜▖▜▌▐▌▝▘█▀▀ █▀▀ █ █ ",
+            " ▀▀▘▀▀  ▝▀▘ ▝▀▘ ▀ ▀ ",
+            "▜▛▜▖▝█              ",
+            "▐▙▟▘ █  █ █ ▟▀▙     ",
+            "▐▌▐▌ █  █ █ █▀▀     ",
+            "▀▀▀ ▝▀▘ ▝▀▝▘▝▀▘     ",
+        ]);
+        expected.set_style(Rect::new(0, 0, 12, 4), Style::new().red());
+        expected.set_style(Rect::new(0, 4, 20, 4), Style::new().green());
+        expected.set_style(Rect::new(0, 8, 16, 4), Style::new().blue());
+        assert_eq!(buf, expected);
+        Ok(())
+    }
+}
--- a/examples/demo2/colors.rs
+++ b/examples/demo2/colors.rs
@@ -0,0 +1,35 @@
+use palette::{IntoColor, Okhsv, Srgb};
+use ratatui::{buffer::Buffer, layout::Rect, style::Color, widgets::Widget};
+
+/// A widget that renders a color swatch of RGB colors.
+///
+/// The widget is rendered as a rectangle with the hue changing along the x-axis from 0.0 to 360.0
+/// and the value changing along the y-axis (from 1.0 to 0.0). Each pixel is rendered as a block
+/// character with the top half slightly lighter than the bottom half.
+pub struct RgbSwatch;
+
+impl Widget for RgbSwatch {
+    #[allow(clippy::cast_precision_loss, clippy::similar_names)]
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        for (yi, y) in (area.top()..area.bottom()).enumerate() {
+            let value = f32::from(area.height) - yi as f32;
+            let value_fg = value / f32::from(area.height);
+            let value_bg = (value - 0.5) / f32::from(area.height);
+            for (xi, x) in (area.left()..area.right()).enumerate() {
+                let hue = xi as f32 * 360.0 / f32::from(area.width);
+                let fg = color_from_oklab(hue, Okhsv::max_saturation(), value_fg);
+                let bg = color_from_oklab(hue, Okhsv::max_saturation(), value_bg);
+                buf.get_mut(x, y).set_char('▀').set_fg(fg).set_bg(bg);
+            }
+        }
+    }
+}
+
+/// Convert a hue and value into an RGB color via the Oklab color space.
+///
+/// See <https://bottosson.github.io/posts/oklab/> for more details.
+pub fn color_from_oklab(hue: f32, saturation: f32, value: f32) -> Color {
+    let color: Srgb = Okhsv::new(hue, saturation, value).into_color();
+    let color = color.into_format();
+    Color::Rgb(color.red, color.green, color.blue)
+}
--- a/examples/demo2/destroy.rs
+++ b/examples/demo2/destroy.rs
@@ -0,0 +1,146 @@
+use rand::Rng;
+use rand_chacha::rand_core::SeedableRng;
+use ratatui::{
+    buffer::Buffer,
+    layout::{Flex, Layout, Rect},
+    style::{Color, Style},
+    terminal::Frame,
+    widgets::Widget,
+};
+use unicode_width::UnicodeWidthStr;
+
+use crate::big_text::{BigTextBuilder, PixelSize};
+
+/// delay the start of the animation so it doesn't start immediately
+const DELAY: usize = 240;
+/// higher means more pixels per frame are modified in the animation
+const DRIP_SPEED: usize = 50;
+/// delay the start of the text animation so it doesn't start immediately after the initial delay
+const TEXT_DELAY: usize = 240;
+
+/// Destroy mode activated by pressing `d`
+pub fn destroy(frame: &mut Frame<'_>) {
+    let frame_count = frame.count().saturating_sub(DELAY);
+    if frame_count == 0 {
+        return;
+    }
+
+    let area = frame.size();
+    let buf = frame.buffer_mut();
+
+    drip(frame_count, area, buf);
+    text(frame_count, area, buf);
+}
+
+/// Move a bunch of random pixels down one row.
+///
+/// Each pick some random pixels and move them each down one row. This is a very inefficient way to
+/// do this, but it works well enough for this demo.
+#[allow(
+    clippy::cast_possible_truncation,
+    clippy::cast_precision_loss,
+    clippy::cast_sign_loss
+)]
+fn drip(frame_count: usize, area: Rect, buf: &mut Buffer) {
+    // a seeded rng as we have to move the same random pixels each frame
+    let mut rng = rand_chacha::ChaCha8Rng::seed_from_u64(10);
+    let ramp_frames = 450;
+    let fractional_speed = frame_count as f64 / f64::from(ramp_frames);
+    let variable_speed = DRIP_SPEED as f64 * fractional_speed * fractional_speed * fractional_speed;
+    let pixel_count = (frame_count as f64 * variable_speed).floor() as usize;
+    for _ in 0..pixel_count {
+        let src_x = rng.gen_range(0..area.width);
+        let src_y = rng.gen_range(1..area.height - 2);
+        let src = buf.get_mut(src_x, src_y).clone();
+        // 1% of the time, move a blank or pixel (10:1) to the top line of the screen
+        if rng.gen_ratio(1, 100) {
+            let dest_x = rng
+                .gen_range(src_x.saturating_sub(5)..src_x.saturating_add(5))
+                .clamp(area.left(), area.right() - 1);
+            let dest_y = area.top() + 1;
+
+            let dest = buf.get_mut(dest_x, dest_y);
+            // copy the cell to the new location about 1/10 of the time blank out the cell the rest
+            // of the time. This has the effect of gradually removing the pixels from the screen.
+            if rng.gen_ratio(1, 10) {
+                *dest = src;
+            } else {
+                dest.reset();
+            }
+        } else {
+            // move the pixel down one row
+            let dest_x = src_x;
+            let dest_y = src_y.saturating_add(1).min(area.bottom() - 2);
+            // copy the cell to the new location
+            let dest = buf.get_mut(dest_x, dest_y);
+            *dest = src;
+        }
+    }
+}
+
+/// draw some text fading in and out from black to red and back
+#[allow(clippy::cast_possible_truncation, clippy::cast_precision_loss)]
+fn text(frame_count: usize, area: Rect, buf: &mut Buffer) {
+    let sub_frame = frame_count.saturating_sub(TEXT_DELAY);
+    if sub_frame == 0 {
+        return;
+    }
+
+    let line = "RATATUI";
+    let big_text = BigTextBuilder::default()
+        .lines([line.into()])
+        .pixel_size(PixelSize::Full)
+        .style(Style::new().fg(Color::Rgb(255, 0, 0)))
+        .build()
+        .unwrap();
+
+    // the font size is 8x8 for each character and we have 1 line
+    let area = centered_rect(area, line.width() as u16 * 8, 8);
+
+    let mask_buf = &mut Buffer::empty(area);
+    big_text.render(area, mask_buf);
+
+    let percentage = (sub_frame as f64 / 480.0).clamp(0.0, 1.0);
+
+    for row in area.rows() {
+        for col in row.columns() {
+            let cell = buf.get_mut(col.x, col.y);
+            let mask_cell = mask_buf.get(col.x, col.y);
+            cell.set_symbol(mask_cell.symbol());
+
+            // blend the mask cell color with the cell color
+            let cell_color = cell.style().bg.unwrap_or(Color::Rgb(0, 0, 0));
+            let mask_color = mask_cell.style().fg.unwrap_or(Color::Rgb(255, 0, 0));
+
+            let color = blend(mask_color, cell_color, percentage);
+            cell.set_style(Style::new().fg(color));
+        }
+    }
+}
+
+fn blend(mask_color: Color, cell_color: Color, percentage: f64) -> Color {
+    let Color::Rgb(mask_red, mask_green, mask_blue) = mask_color else {
+        return mask_color;
+    };
+    let Color::Rgb(cell_red, cell_green, cell_blue) = cell_color else {
+        return mask_color;
+    };
+
+    let remain = 1.0 - percentage;
+
+    let red = f64::from(mask_red).mul_add(percentage, f64::from(cell_red) * remain);
+    let green = f64::from(mask_green).mul_add(percentage, f64::from(cell_green) * remain);
+    let blue = f64::from(mask_blue).mul_add(percentage, f64::from(cell_blue) * remain);
+
+    #[allow(clippy::cast_possible_truncation, clippy::cast_sign_loss)]
+    Color::Rgb(red as u8, green as u8, blue as u8)
+}
+
+/// a centered rect of the given size
+fn centered_rect(area: Rect, width: u16, height: u16) -> Rect {
+    let horizontal = Layout::horizontal([width]).flex(Flex::Center);
+    let vertical = Layout::vertical([height]).flex(Flex::Center);
+    let [area] = vertical.areas(area);
+    let [area] = horizontal.areas(area);
+    area
+}
--- a/examples/demo2/errors.rs
+++ b/examples/demo2/errors.rs
@@ -0,0 +1,18 @@
+use color_eyre::{config::HookBuilder, Result};
+
+use crate::term;
+
+pub fn init_hooks() -> Result<()> {
+    let (panic, error) = HookBuilder::default().into_hooks();
+    let panic = panic.into_panic_hook();
+    let error = error.into_eyre_hook();
+    color_eyre::eyre::set_hook(Box::new(move |e| {
+        let _ = term::restore();
+        error(e)
+    }))?;
+    std::panic::set_hook(Box::new(move |info| {
+        let _ = term::restore();
+        panic(info);
+    }));
+    Ok(())
+}
--- a/examples/demo2/main.rs
+++ b/examples/demo2/main.rs
@@ -0,0 +1,44 @@
+//! # [Ratatui] Demo2 example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+#![allow(
+    clippy::missing_errors_doc,
+    clippy::module_name_repetitions,
+    clippy::must_use_candidate
+)]
+
+mod app;
+mod big_text;
+mod colors;
+mod destroy;
+mod errors;
+mod tabs;
+mod term;
+mod theme;
+
+use color_eyre::Result;
+
+pub use self::{
+    colors::{color_from_oklab, RgbSwatch},
+    theme::THEME,
+};
+
+fn main() -> Result<()> {
+    errors::init_hooks()?;
+    let terminal = &mut term::init()?;
+    app::run(terminal)?;
+    term::restore()?;
+    Ok(())
+}
--- a/examples/demo2/tabs.rs
+++ b/examples/demo2/tabs.rs
@@ -0,0 +1,11 @@
+mod about;
+mod email;
+mod recipe;
+mod traceroute;
+mod weather;
+
+pub use about::AboutTab;
+pub use email::EmailTab;
+pub use recipe::RecipeTab;
+pub use traceroute::TracerouteTab;
+pub use weather::WeatherTab;
--- a/examples/demo2/tabs/about.rs
+++ b/examples/demo2/tabs/about.rs
@@ -0,0 +1,165 @@
+use itertools::Itertools;
+use ratatui::{
+    buffer::Buffer,
+    layout::{Alignment, Constraint, Layout, Margin, Rect},
+    widgets::{Block, Borders, Clear, Padding, Paragraph, Widget, Wrap},
+};
+
+use crate::{RgbSwatch, THEME};
+
+const RATATUI_LOGO: [&str; 32] = [
+    "               ███              ",
+    "             ██████             ",
+    "            ███████             ",
+    "           ████████             ",
+    "          █████████             ",
+    "         ██████████             ",
+    "        ████████████            ",
+    "        █████████████           ",
+    "        █████████████     ██████",
+    "         ███████████    ████████",
+    "              █████ ███████████ ",
+    "               ███ ██ee████████ ",
+    "                █ █████████████ ",
+    "            ████ █████████████  ",
+    "           █████████████████    ",
+    "           ████████████████     ",
+    "           ████████████████     ",
+    "            ███ ██████████      ",
+    "          ██    █████████       ",
+    "         █xx█   █████████       ",
+    "        █xxxx█ ██████████       ",
+    "       █xx█xxx█ █████████       ",
+    "      █xx██xxxx█ ████████       ",
+    "     █xxxxxxxxxx█ ██████████    ",
+    "    █xxxxxxxxxxxx█ ██████████   ",
+    "   █xxxxxxx██xxxxx█ █████████   ",
+    "  █xxxxxxxxx██xxxxx█ ████  ███  ",
+    " █xxxxxxxxxxxxxxxxxx█ ██   ███  ",
+    "█xxxxxxxxxxxxxxxxxxxx█ █   ███  ",
+    "█xxxxxxxxxxxxxxxxxxxxx█   ███   ",
+    " █xxxxxxxxxxxxxxxxxxxxx█ ███    ",
+    "  █xxxxxxxxxxxxxxxxxxxxx█ █     ",
+];
+
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
+pub struct AboutTab {
+    row_index: usize,
+}
+
+impl AboutTab {
+    pub fn prev_row(&mut self) {
+        self.row_index = self.row_index.saturating_sub(1);
+    }
+
+    pub fn next_row(&mut self) {
+        self.row_index = self.row_index.saturating_add(1);
+    }
+}
+
+impl Widget for AboutTab {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        RgbSwatch.render(area, buf);
+        let horizontal = Layout::horizontal([Constraint::Length(34), Constraint::Min(0)]);
+        let [description, logo] = horizontal.areas(area);
+        render_crate_description(description, buf);
+        render_logo(self.row_index, logo, buf);
+    }
+}
+
+fn render_crate_description(area: Rect, buf: &mut Buffer) {
+    let area = area.inner(Margin {
+        vertical: 4,
+        horizontal: 2,
+    });
+    Clear.render(area, buf); // clear out the color swatches
+    Block::new().style(THEME.content).render(area, buf);
+    let area = area.inner(Margin {
+        vertical: 1,
+        horizontal: 2,
+    });
+    let text = "- cooking up terminal user interfaces -
+
+    Ratatui is a Rust crate that provides widgets (e.g. Paragraph, Table) and draws them to the \
+    screen efficiently every frame.";
+    Paragraph::new(text)
+        .style(THEME.description)
+        .block(
+            Block::new()
+                .title(" Ratatui ")
+                .title_alignment(Alignment::Center)
+                .borders(Borders::TOP)
+                .border_style(THEME.description_title)
+                .padding(Padding::new(0, 0, 0, 0)),
+        )
+        .wrap(Wrap { trim: true })
+        .scroll((0, 0))
+        .render(area, buf);
+}
+
+/// Use half block characters to render a logo based on the `RATATUI_LOGO` const.
+///
+/// The logo is rendered in three colors, one for the rat, one for the terminal, and one for the
+/// rat's eye. The eye color alternates between two colors based on the selected row.
+#[allow(clippy::cast_possible_truncation)]
+pub fn render_logo(selected_row: usize, area: Rect, buf: &mut Buffer) {
+    let eye_color = if selected_row % 2 == 0 {
+        THEME.logo.rat_eye
+    } else {
+        THEME.logo.rat_eye_alt
+    };
+    let area = area.inner(Margin {
+        vertical: 0,
+        horizontal: 2,
+    });
+    for (y, (line1, line2)) in RATATUI_LOGO.iter().tuples().enumerate() {
+        for (x, (ch1, ch2)) in line1.chars().zip(line2.chars()).enumerate() {
+            let x = area.left() + x as u16;
+            let y = area.top() + y as u16;
+            let cell = buf.get_mut(x, y);
+            let rat_color = THEME.logo.rat;
+            let term_color = THEME.logo.term;
+            match (ch1, ch2) {
+                ('█', '█') => {
+                    cell.set_char('█');
+                    cell.fg = rat_color;
+                    cell.bg = rat_color;
+                }
+                ('█', ' ') => {
+                    cell.set_char('▀');
+                    cell.fg = rat_color;
+                }
+                (' ', '█') => {
+                    cell.set_char('▄');
+                    cell.fg = rat_color;
+                }
+                ('█', 'x') => {
+                    cell.set_char('▀');
+                    cell.fg = rat_color;
+                    cell.bg = term_color;
+                }
+                ('x', '█') => {
+                    cell.set_char('▄');
+                    cell.fg = rat_color;
+                    cell.bg = term_color;
+                }
+                ('x', 'x') => {
+                    cell.set_char(' ');
+                    cell.fg = term_color;
+                    cell.bg = term_color;
+                }
+                ('█', 'e') => {
+                    cell.set_char('▀');
+                    cell.fg = rat_color;
+                    cell.bg = eye_color;
+                }
+                ('e', '█') => {
+                    cell.set_char('▄');
+                    cell.fg = rat_color;
+                    cell.bg = eye_color;
+                }
+                (_, _) => {}
+            };
+        }
+    }
+}
--- a/examples/demo2/tabs/email.rs
+++ b/examples/demo2/tabs/email.rs
@@ -0,0 +1,161 @@
+use itertools::Itertools;
+use ratatui::{
+    buffer::Buffer,
+    layout::{Constraint, Layout, Margin, Rect},
+    style::{Styled, Stylize},
+    text::Line,
+    widgets::{
+        Block, BorderType, Borders, Clear, List, ListItem, ListState, Padding, Paragraph,
+        Scrollbar, ScrollbarState, StatefulWidget, Tabs, Widget,
+    },
+};
+use unicode_width::UnicodeWidthStr;
+
+use crate::{RgbSwatch, THEME};
+
+#[derive(Debug, Default)]
+pub struct Email {
+    from: &'static str,
+    subject: &'static str,
+    body: &'static str,
+}
+
+const EMAILS: &[Email] = &[
+    Email {
+        from: "Alice <alice@example.com>",
+        subject: "Hello",
+        body: "Hi Bob,\nHow are you?\n\nAlice",
+    },
+    Email {
+        from: "Bob <bob@example.com>",
+        subject: "Re: Hello",
+        body: "Hi Alice,\nI'm fine, thanks!\n\nBob",
+    },
+    Email {
+        from: "Charlie <charlie@example.com>",
+        subject: "Re: Hello",
+        body: "Hi Alice,\nI'm fine, thanks!\n\nCharlie",
+    },
+    Email {
+        from: "Dave <dave@example.com>",
+        subject: "Re: Hello (STOP REPLYING TO ALL)",
+        body: "Hi Everyone,\nPlease stop replying to all.\n\nDave",
+    },
+    Email {
+        from: "Eve <eve@example.com>",
+        subject: "Re: Hello (STOP REPLYING TO ALL)",
+        body: "Hi Everyone,\nI'm reading all your emails.\n\nEve",
+    },
+];
+
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
+pub struct EmailTab {
+    row_index: usize,
+}
+
+impl EmailTab {
+    /// Select the previous email (with wrap around).
+    pub fn prev(&mut self) {
+        self.row_index = self.row_index.saturating_add(EMAILS.len() - 1) % EMAILS.len();
+    }
+
+    /// Select the next email (with wrap around).
+    pub fn next(&mut self) {
+        self.row_index = self.row_index.saturating_add(1) % EMAILS.len();
+    }
+}
+
+impl Widget for EmailTab {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        RgbSwatch.render(area, buf);
+        let area = area.inner(Margin {
+            vertical: 1,
+            horizontal: 2,
+        });
+        Clear.render(area, buf);
+        let vertical = Layout::vertical([Constraint::Length(5), Constraint::Min(0)]);
+        let [inbox, email] = vertical.areas(area);
+        render_inbox(self.row_index, inbox, buf);
+        render_email(self.row_index, email, buf);
+    }
+}
+fn render_inbox(selected_index: usize, area: Rect, buf: &mut Buffer) {
+    let vertical = Layout::vertical([Constraint::Length(1), Constraint::Min(0)]);
+    let [tabs, inbox] = vertical.areas(area);
+    let theme = THEME.email;
+    Tabs::new(vec![" Inbox ", " Sent ", " Drafts "])
+        .style(theme.tabs)
+        .highlight_style(theme.tabs_selected)
+        .select(0)
+        .divider("")
+        .render(tabs, buf);
+
+    let highlight_symbol = ">>";
+    let from_width = EMAILS
+        .iter()
+        .map(|e| e.from.width())
+        .max()
+        .unwrap_or_default();
+    let items = EMAILS
+        .iter()
+        .map(|e| {
+            let from = format!("{:width$}", e.from, width = from_width).into();
+            ListItem::new(Line::from(vec![from, " ".into(), e.subject.into()]))
+        })
+        .collect_vec();
+    let mut state = ListState::default().with_selected(Some(selected_index));
+    StatefulWidget::render(
+        List::new(items)
+            .style(theme.inbox)
+            .highlight_style(theme.selected_item)
+            .highlight_symbol(highlight_symbol),
+        inbox,
+        buf,
+        &mut state,
+    );
+    let mut scrollbar_state = ScrollbarState::default()
+        .content_length(EMAILS.len())
+        .position(selected_index);
+    Scrollbar::default()
+        .begin_symbol(None)
+        .end_symbol(None)
+        .track_symbol(None)
+        .thumb_symbol("▐")
+        .render(inbox, buf, &mut scrollbar_state);
+}
+
+fn render_email(selected_index: usize, area: Rect, buf: &mut Buffer) {
+    let theme = THEME.email;
+    let email = EMAILS.get(selected_index);
+    let block = Block::new()
+        .style(theme.body)
+        .padding(Padding::new(2, 2, 0, 0))
+        .borders(Borders::TOP)
+        .border_type(BorderType::Thick);
+    let inner = block.inner(area);
+    block.render(area, buf);
+    if let Some(email) = email {
+        let vertical = Layout::vertical([Constraint::Length(3), Constraint::Min(0)]);
+        let [headers_area, body_area] = vertical.areas(inner);
+        let headers = vec![
+            Line::from(vec![
+                "From: ".set_style(theme.header),
+                email.from.set_style(theme.header_value),
+            ]),
+            Line::from(vec![
+                "Subject: ".set_style(theme.header),
+                email.subject.set_style(theme.header_value),
+            ]),
+            "-".repeat(inner.width as usize).dim().into(),
+        ];
+        Paragraph::new(headers)
+            .style(theme.body)
+            .render(headers_area, buf);
+        let body = email.body.lines().map(Line::from).collect_vec();
+        Paragraph::new(body)
+            .style(theme.body)
+            .render(body_area, buf);
+    } else {
+        Paragraph::new("No email selected").render(inner, buf);
+    }
+}
--- a/examples/demo2/tabs/recipe.rs
+++ b/examples/demo2/tabs/recipe.rs
@@ -0,0 +1,185 @@
+use itertools::Itertools;
+use ratatui::{
+    buffer::Buffer,
+    layout::{Alignment, Constraint, Layout, Margin, Rect},
+    style::{Style, Stylize},
+    text::Line,
+    widgets::{
+        Block, Clear, Padding, Paragraph, Row, Scrollbar, ScrollbarOrientation, ScrollbarState,
+        StatefulWidget, Table, TableState, Widget, Wrap,
+    },
+};
+
+use crate::{RgbSwatch, THEME};
+
+#[derive(Debug, Default, Clone, Copy)]
+struct Ingredient {
+    quantity: &'static str,
+    name: &'static str,
+}
+
+impl Ingredient {
+    #[allow(clippy::cast_possible_truncation)]
+    fn height(&self) -> u16 {
+        self.name.lines().count() as u16
+    }
+}
+
+impl<'a> From<Ingredient> for Row<'a> {
+    fn from(i: Ingredient) -> Self {
+        Row::new(vec![i.quantity, i.name]).height(i.height())
+    }
+}
+
+// https://www.realsimple.com/food-recipes/browse-all-recipes/ratatouille
+const RECIPE: &[(&str, &str)] = &[
+    (
+        "Step 1: ",
+        "Over medium-low heat, add the oil to a large skillet with the onion, garlic, and bay \
+        leaf, stirring occasionally, until the onion has softened.",
+    ),
+    (
+        "Step 2: ",
+        "Add the eggplant and cook, stirring occasionally, for 8 minutes or until the eggplant \
+        has softened. Stir in the zucchini, red bell pepper, tomatoes, and salt, and cook over \
+        medium heat, stirring occasionally, for 5 to 7 minutes or until the vegetables are \
+        tender. Stir in the basil and few grinds of pepper to taste.",
+    ),
+];
+
+const INGREDIENTS: &[Ingredient] = &[
+    Ingredient {
+        quantity: "4 tbsp",
+        name: "olive oil",
+    },
+    Ingredient {
+        quantity: "1",
+        name: "onion thinly sliced",
+    },
+    Ingredient {
+        quantity: "4",
+        name: "cloves garlic\npeeled and sliced",
+    },
+    Ingredient {
+        quantity: "1",
+        name: "small bay leaf",
+    },
+    Ingredient {
+        quantity: "1",
+        name: "small eggplant cut\ninto 1/2 inch cubes",
+    },
+    Ingredient {
+        quantity: "1",
+        name: "small zucchini halved\nlengthwise and cut\ninto thin slices",
+    },
+    Ingredient {
+        quantity: "1",
+        name: "red bell pepper cut\ninto slivers",
+    },
+    Ingredient {
+        quantity: "4",
+        name: "plum tomatoes\ncoarsely chopped",
+    },
+    Ingredient {
+        quantity: "1 tsp",
+        name: "kosher salt",
+    },
+    Ingredient {
+        quantity: "1/4 cup",
+        name: "shredded fresh basil\nleaves",
+    },
+    Ingredient {
+        quantity: "",
+        name: "freshly ground black\npepper",
+    },
+];
+
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
+pub struct RecipeTab {
+    row_index: usize,
+}
+
+impl RecipeTab {
+    /// Select the previous item in the ingredients list (with wrap around)
+    pub fn prev(&mut self) {
+        self.row_index = self.row_index.saturating_add(INGREDIENTS.len() - 1) % INGREDIENTS.len();
+    }
+
+    /// Select the next item in the ingredients list (with wrap around)
+    pub fn next(&mut self) {
+        self.row_index = self.row_index.saturating_add(1) % INGREDIENTS.len();
+    }
+}
+
+impl Widget for RecipeTab {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        RgbSwatch.render(area, buf);
+        let area = area.inner(Margin {
+            vertical: 1,
+            horizontal: 2,
+        });
+        Clear.render(area, buf);
+        Block::new()
+            .title("Ratatouille Recipe".bold().white())
+            .title_alignment(Alignment::Center)
+            .style(THEME.content)
+            .padding(Padding::new(1, 1, 2, 1))
+            .render(area, buf);
+
+        let scrollbar_area = Rect {
+            y: area.y + 2,
+            height: area.height - 3,
+            ..area
+        };
+        render_scrollbar(self.row_index, scrollbar_area, buf);
+
+        let area = area.inner(Margin {
+            horizontal: 2,
+            vertical: 1,
+        });
+        let [recipe, ingredients] =
+            Layout::horizontal([Constraint::Length(44), Constraint::Min(0)]).areas(area);
+
+        render_recipe(recipe, buf);
+        render_ingredients(self.row_index, ingredients, buf);
+    }
+}
+
+fn render_recipe(area: Rect, buf: &mut Buffer) {
+    let lines = RECIPE
+        .iter()
+        .map(|(step, text)| Line::from(vec![step.white().bold(), text.gray()]))
+        .collect_vec();
+    Paragraph::new(lines)
+        .wrap(Wrap { trim: true })
+        .block(Block::new().padding(Padding::new(0, 1, 0, 0)))
+        .render(area, buf);
+}
+
+fn render_ingredients(selected_row: usize, area: Rect, buf: &mut Buffer) {
+    let mut state = TableState::default().with_selected(Some(selected_row));
+    let rows = INGREDIENTS.iter().copied();
+    let theme = THEME.recipe;
+    StatefulWidget::render(
+        Table::new(rows, [Constraint::Length(7), Constraint::Length(30)])
+            .block(Block::new().style(theme.ingredients))
+            .header(Row::new(vec!["Qty", "Ingredient"]).style(theme.ingredients_header))
+            .highlight_style(Style::new().light_yellow()),
+        area,
+        buf,
+        &mut state,
+    );
+}
+
+fn render_scrollbar(position: usize, area: Rect, buf: &mut Buffer) {
+    let mut state = ScrollbarState::default()
+        .content_length(INGREDIENTS.len())
+        .viewport_content_length(6)
+        .position(position);
+    Scrollbar::new(ScrollbarOrientation::VerticalRight)
+        .begin_symbol(None)
+        .end_symbol(None)
+        .track_symbol(None)
+        .thumb_symbol("▐")
+        .render(area, buf, &mut state);
+}
--- a/examples/demo2/tabs/traceroute.rs
+++ b/examples/demo2/tabs/traceroute.rs
@@ -0,0 +1,209 @@
+use itertools::Itertools;
+use ratatui::{
+    buffer::Buffer,
+    layout::{Alignment, Constraint, Layout, Margin, Rect},
+    style::{Styled, Stylize},
+    symbols::Marker,
+    widgets::{
+        canvas::{self, Canvas, Map, MapResolution, Points},
+        Block, BorderType, Clear, Padding, Row, Scrollbar, ScrollbarOrientation, ScrollbarState,
+        Sparkline, StatefulWidget, Table, TableState, Widget,
+    },
+};
+
+use crate::{RgbSwatch, THEME};
+
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
+pub struct TracerouteTab {
+    row_index: usize,
+}
+
+impl TracerouteTab {
+    /// Select the previous row (with wrap around).
+    pub fn prev_row(&mut self) {
+        self.row_index = self.row_index.saturating_add(HOPS.len() - 1) % HOPS.len();
+    }
+
+    /// Select the next row (with wrap around).
+    pub fn next_row(&mut self) {
+        self.row_index = self.row_index.saturating_add(1) % HOPS.len();
+    }
+}
+
+impl Widget for TracerouteTab {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        RgbSwatch.render(area, buf);
+        let area = area.inner(Margin {
+            vertical: 1,
+            horizontal: 2,
+        });
+        Clear.render(area, buf);
+        Block::new().style(THEME.content).render(area, buf);
+        let horizontal = Layout::horizontal([Constraint::Ratio(1, 2), Constraint::Ratio(1, 2)]);
+        let vertical = Layout::vertical([Constraint::Min(0), Constraint::Length(3)]);
+        let [left, map] = horizontal.areas(area);
+        let [hops, pings] = vertical.areas(left);
+
+        render_hops(self.row_index, hops, buf);
+        render_ping(self.row_index, pings, buf);
+        render_map(self.row_index, map, buf);
+    }
+}
+
+fn render_hops(selected_row: usize, area: Rect, buf: &mut Buffer) {
+    let mut state = TableState::default().with_selected(Some(selected_row));
+    let rows = HOPS
+        .iter()
+        .map(|hop| Row::new(vec![hop.host, hop.address]))
+        .collect_vec();
+    let block = Block::new()
+        .padding(Padding::new(1, 1, 1, 1))
+        .title_alignment(Alignment::Center)
+        .title("Traceroute bad.horse".bold().white());
+    StatefulWidget::render(
+        Table::new(rows, [Constraint::Max(100), Constraint::Length(15)])
+            .header(Row::new(vec!["Host", "Address"]).set_style(THEME.traceroute.header))
+            .highlight_style(THEME.traceroute.selected)
+            .block(block),
+        area,
+        buf,
+        &mut state,
+    );
+    let mut scrollbar_state = ScrollbarState::default()
+        .content_length(HOPS.len())
+        .position(selected_row);
+    let area = Rect {
+        width: area.width + 1,
+        y: area.y + 3,
+        height: area.height - 4,
+        ..area
+    };
+    Scrollbar::default()
+        .orientation(ScrollbarOrientation::VerticalLeft)
+        .begin_symbol(None)
+        .end_symbol(None)
+        .track_symbol(None)
+        .thumb_symbol("▌")
+        .render(area, buf, &mut scrollbar_state);
+}
+
+pub fn render_ping(progress: usize, area: Rect, buf: &mut Buffer) {
+    let mut data = [
+        8, 8, 8, 8, 7, 7, 7, 6, 6, 5, 4, 3, 3, 2, 2, 1, 1, 1, 2, 2, 3, 4, 5, 6, 7, 7, 8, 8, 8, 7,
+        7, 6, 5, 4, 3, 2, 1, 1, 1, 1, 1, 2, 4, 6, 7, 8, 8, 8, 8, 6, 4, 2, 1, 1, 1, 1, 2, 2, 2, 3,
+        3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6, 7, 7, 7,
+    ];
+    let mid = progress % data.len();
+    data.rotate_left(mid);
+    Sparkline::default()
+        .block(
+            Block::new()
+                .title("Ping")
+                .title_alignment(Alignment::Center)
+                .border_type(BorderType::Thick),
+        )
+        .data(&data)
+        .style(THEME.traceroute.ping)
+        .render(area, buf);
+}
+
+fn render_map(selected_row: usize, area: Rect, buf: &mut Buffer) {
+    let theme = THEME.traceroute.map;
+    let path: Option<(&Hop, &Hop)> = HOPS.iter().tuple_windows().nth(selected_row);
+    let map = Map {
+        resolution: MapResolution::High,
+        color: theme.color,
+    };
+    Canvas::default()
+        .background_color(theme.background_color)
+        .block(
+            Block::new()
+                .padding(Padding::new(1, 0, 1, 0))
+                .style(theme.style),
+        )
+        .marker(Marker::HalfBlock)
+        // picked to show Australia for the demo as it's the most interesting part of the map
+        // (and the only part with hops ;))
+        .x_bounds([112.0, 155.0])
+        .y_bounds([-46.0, -11.0])
+        .paint(|context| {
+            context.draw(&map);
+            if let Some(path) = path {
+                context.draw(&canvas::Line::new(
+                    path.0.location.0,
+                    path.0.location.1,
+                    path.1.location.0,
+                    path.1.location.1,
+                    theme.path,
+                ));
+                context.draw(&Points {
+                    color: theme.source,
+                    coords: &[path.0.location], // sydney
+                });
+                context.draw(&Points {
+                    color: theme.destination,
+                    coords: &[path.1.location], // perth
+                });
+            }
+        })
+        .render(area, buf);
+}
+
+#[derive(Debug)]
+struct Hop {
+    host: &'static str,
+    address: &'static str,
+    location: (f64, f64),
+}
+
+impl Hop {
+    const fn new(name: &'static str, address: &'static str, location: (f64, f64)) -> Self {
+        Self {
+            host: name,
+            address,
+            location,
+        }
+    }
+}
+
+const CANBERRA: (f64, f64) = (149.1, -35.3);
+const SYDNEY: (f64, f64) = (151.1, -33.9);
+const MELBOURNE: (f64, f64) = (144.9, -37.8);
+const PERTH: (f64, f64) = (115.9, -31.9);
+const DARWIN: (f64, f64) = (130.8, -12.4);
+const BRISBANE: (f64, f64) = (153.0, -27.5);
+const ADELAIDE: (f64, f64) = (138.6, -34.9);
+
+// Go traceroute bad.horse some time, it's fun. these locations are made up and don't correspond
+// to the actual IP addresses (which are in Toronto, Canada).
+const HOPS: &[Hop] = &[
+    Hop::new("home", "127.0.0.1", CANBERRA),
+    Hop::new("bad.horse", "162.252.205.130", SYDNEY),
+    Hop::new("bad.horse", "162.252.205.131", MELBOURNE),
+    Hop::new("bad.horse", "162.252.205.132", BRISBANE),
+    Hop::new("bad.horse", "162.252.205.133", SYDNEY),
+    Hop::new("he.rides.across.the.nation", "162.252.205.134", PERTH),
+    Hop::new("the.thoroughbred.of.sin", "162.252.205.135", DARWIN),
+    Hop::new("he.got.the.application", "162.252.205.136", BRISBANE),
+    Hop::new("that.you.just.sent.in", "162.252.205.137", ADELAIDE),
+    Hop::new("it.needs.evaluation", "162.252.205.138", DARWIN),
+    Hop::new("so.let.the.games.begin", "162.252.205.139", PERTH),
+    Hop::new("a.heinous.crime", "162.252.205.140", BRISBANE),
+    Hop::new("a.show.of.force", "162.252.205.141", CANBERRA),
+    Hop::new("a.murder.would.be.nice.of.course", "162.252.205.142", PERTH),
+    Hop::new("bad.horse", "162.252.205.143", MELBOURNE),
+    Hop::new("bad.horse", "162.252.205.144", DARWIN),
+    Hop::new("bad.horse", "162.252.205.145", MELBOURNE),
+    Hop::new("he-s.bad", "162.252.205.146", PERTH),
+    Hop::new("the.evil.league.of.evil", "162.252.205.147", BRISBANE),
+    Hop::new("is.watching.so.beware", "162.252.205.148", DARWIN),
+    Hop::new("the.grade.that.you.receive", "162.252.205.149", PERTH),
+    Hop::new("will.be.your.last.we.swear", "162.252.205.150", ADELAIDE),
+    Hop::new("so.make.the.bad.horse.gleeful", "162.252.205.151", SYDNEY),
+    Hop::new("or.he-ll.make.you.his.mare", "162.252.205.152", MELBOURNE),
+    Hop::new("o_o", "162.252.205.153", BRISBANE),
+    Hop::new("you-re.saddled.up", "162.252.205.154", DARWIN),
+    Hop::new("there-s.no.recourse", "162.252.205.155", PERTH),
+    Hop::new("it-s.hi-ho.silver", "162.252.205.156", SYDNEY),
+    Hop::new("signed.bad.horse", "162.252.205.157", CANBERRA),
+];
--- a/examples/demo2/tabs/weather.rs
+++ b/examples/demo2/tabs/weather.rs
@@ -0,0 +1,164 @@
+use itertools::Itertools;
+use palette::Okhsv;
+use ratatui::{
+    buffer::Buffer,
+    layout::{Constraint, Direction, Layout, Margin, Rect},
+    style::{Color, Style, Stylize},
+    symbols,
+    widgets::{
+        calendar::{CalendarEventStore, Monthly},
+        Bar, BarChart, BarGroup, Block, Clear, LineGauge, Padding, Widget,
+    },
+};
+use time::OffsetDateTime;
+
+use crate::{color_from_oklab, RgbSwatch, THEME};
+
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
+pub struct WeatherTab {
+    pub download_progress: usize,
+}
+
+impl WeatherTab {
+    /// Simulate a download indicator by decrementing the row index.
+    pub fn prev(&mut self) {
+        self.download_progress = self.download_progress.saturating_sub(1);
+    }
+
+    /// Simulate a download indicator by incrementing the row index.
+    pub fn next(&mut self) {
+        self.download_progress = self.download_progress.saturating_add(1);
+    }
+}
+
+impl Widget for WeatherTab {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        RgbSwatch.render(area, buf);
+        let area = area.inner(Margin {
+            vertical: 1,
+            horizontal: 2,
+        });
+        Clear.render(area, buf);
+        Block::new().style(THEME.content).render(area, buf);
+
+        let area = area.inner(Margin {
+            horizontal: 2,
+            vertical: 1,
+        });
+        let [main, _, gauges] = Layout::vertical([
+            Constraint::Min(0),
+            Constraint::Length(1),
+            Constraint::Length(1),
+        ])
+        .areas(area);
+        let [calendar, charts] =
+            Layout::horizontal([Constraint::Length(23), Constraint::Min(0)]).areas(main);
+        let [simple, horizontal] =
+            Layout::vertical([Constraint::Length(29), Constraint::Min(0)]).areas(charts);
+
+        render_calendar(calendar, buf);
+        render_simple_barchart(simple, buf);
+        render_horizontal_barchart(horizontal, buf);
+        render_gauge(self.download_progress, gauges, buf);
+    }
+}
+
+fn render_calendar(area: Rect, buf: &mut Buffer) {
+    let date = OffsetDateTime::now_utc().date();
+    Monthly::new(date, CalendarEventStore::today(Style::new().red().bold()))
+        .block(Block::new().padding(Padding::new(0, 0, 2, 0)))
+        .show_month_header(Style::new().bold())
+        .show_weekdays_header(Style::new().italic())
+        .render(area, buf);
+}
+
+fn render_simple_barchart(area: Rect, buf: &mut Buffer) {
+    let data = [
+        ("Sat", 76),
+        ("Sun", 69),
+        ("Mon", 65),
+        ("Tue", 67),
+        ("Wed", 65),
+        ("Thu", 69),
+        ("Fri", 73),
+    ];
+    let data = data
+        .into_iter()
+        .map(|(label, value)| {
+            Bar::default()
+                .value(value)
+                // This doesn't actually render correctly as the text is too wide for the bar
+                // See https://github.com/ratatui-org/ratatui/issues/513 for more info
+                // (the demo GIFs hack around this by hacking the calculation in bars.rs)
+                .text_value(format!("{value}°"))
+                .style(if value > 70 {
+                    Style::new().fg(Color::Red)
+                } else {
+                    Style::new().fg(Color::Yellow)
+                })
+                .value_style(if value > 70 {
+                    Style::new().fg(Color::Gray).bg(Color::Red).bold()
+                } else {
+                    Style::new().fg(Color::DarkGray).bg(Color::Yellow).bold()
+                })
+                .label(label.into())
+        })
+        .collect_vec();
+    let group = BarGroup::default().bars(&data);
+    BarChart::default()
+        .data(group)
+        .bar_width(3)
+        .bar_gap(1)
+        .render(area, buf);
+}
+
+fn render_horizontal_barchart(area: Rect, buf: &mut Buffer) {
+    let bg = Color::Rgb(32, 48, 96);
+    let data = [
+        Bar::default().text_value("Winter 37-51".into()).value(51),
+        Bar::default().text_value("Spring 40-65".into()).value(65),
+        Bar::default().text_value("Summer 54-77".into()).value(77),
+        Bar::default()
+            .text_value("Fall 41-71".into())
+            .value(71)
+            .value_style(Style::new().bold()), // current season
+    ];
+    let group = BarGroup::default().label("GPU".into()).bars(&data);
+    BarChart::default()
+        .block(Block::new().padding(Padding::new(0, 0, 2, 0)))
+        .direction(Direction::Horizontal)
+        .data(group)
+        .bar_gap(1)
+        .bar_style(Style::new().fg(bg))
+        .value_style(Style::new().bg(bg).fg(Color::Gray))
+        .render(area, buf);
+}
+
+#[allow(clippy::cast_precision_loss)]
+pub fn render_gauge(progress: usize, area: Rect, buf: &mut Buffer) {
+    let percent = (progress * 3).min(100) as f64;
+
+    render_line_gauge(percent, area, buf);
+}
+
+#[allow(clippy::cast_possible_truncation)]
+fn render_line_gauge(percent: f64, area: Rect, buf: &mut Buffer) {
+    // cycle color hue based on the percent for a neat effect yellow -> red
+    let hue = 90.0 - (percent as f32 * 0.6);
+    let value = Okhsv::max_value();
+    let filled_color = color_from_oklab(hue, Okhsv::max_saturation(), value);
+    let unfilled_color = color_from_oklab(hue, Okhsv::max_saturation(), value * 0.5);
+    let label = if percent < 100.0 {
+        format!("Downloading: {percent}%")
+    } else {
+        "Download Complete!".into()
+    };
+    LineGauge::default()
+        .ratio(percent / 100.0)
+        .label(label)
+        .style(Style::new().light_blue())
+        .filled_style(Style::new().fg(filled_color))
+        .unfilled_style(Style::new().fg(unfilled_color))
+        .line_set(symbols::line::THICK)
+        .render(area, buf);
+}
--- a/examples/demo2/term.rs
+++ b/examples/demo2/term.rs
@@ -0,0 +1,46 @@
+use std::{
+    io::{self, stdout},
+    time::Duration,
+};
+
+use color_eyre::{eyre::WrapErr, Result};
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    crossterm::{
+        event::{self, Event},
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+        ExecutableCommand,
+    },
+    layout::Rect,
+    terminal::{Terminal, TerminalOptions, Viewport},
+};
+
+pub fn init() -> Result<Terminal<impl Backend>> {
+    // this size is to match the size of the terminal when running the demo
+    // using vhs in a 1280x640 sized window (github social preview size)
+    let options = TerminalOptions {
+        viewport: Viewport::Fixed(Rect::new(0, 0, 81, 18)),
+    };
+    let terminal = Terminal::with_options(CrosstermBackend::new(io::stdout()), options)?;
+    enable_raw_mode().context("enable raw mode")?;
+    stdout()
+        .execute(EnterAlternateScreen)
+        .wrap_err("enter alternate screen")?;
+    Ok(terminal)
+}
+
+pub fn restore() -> Result<()> {
+    disable_raw_mode().context("disable raw mode")?;
+    stdout()
+        .execute(LeaveAlternateScreen)
+        .wrap_err("leave alternate screen")?;
+    Ok(())
+}
+
+pub fn next_event(timeout: Duration) -> Result<Option<Event>> {
+    if !event::poll(timeout)? {
+        return Ok(None);
+    }
+    let event = event::read()?;
+    Ok(Some(event))
+}
--- a/examples/demo2/theme.rs
+++ b/examples/demo2/theme.rs
@@ -0,0 +1,136 @@
+use ratatui::style::{Color, Modifier, Style};
+
+pub struct Theme {
+    pub root: Style,
+    pub content: Style,
+    pub app_title: Style,
+    pub tabs: Style,
+    pub tabs_selected: Style,
+    pub borders: Style,
+    pub description: Style,
+    pub description_title: Style,
+    pub key_binding: KeyBinding,
+    pub logo: Logo,
+    pub email: Email,
+    pub traceroute: Traceroute,
+    pub recipe: Recipe,
+}
+
+pub struct KeyBinding {
+    pub key: Style,
+    pub description: Style,
+}
+
+pub struct Logo {
+    pub rat: Color,
+    pub rat_eye: Color,
+    pub rat_eye_alt: Color,
+    pub term: Color,
+}
+
+pub struct Email {
+    pub tabs: Style,
+    pub tabs_selected: Style,
+    pub inbox: Style,
+    pub item: Style,
+    pub selected_item: Style,
+    pub header: Style,
+    pub header_value: Style,
+    pub body: Style,
+}
+
+pub struct Traceroute {
+    pub header: Style,
+    pub selected: Style,
+    pub ping: Style,
+    pub map: Map,
+}
+
+pub struct Map {
+    pub style: Style,
+    pub color: Color,
+    pub path: Color,
+    pub source: Color,
+    pub destination: Color,
+    pub background_color: Color,
+}
+
+pub struct Recipe {
+    pub ingredients: Style,
+    pub ingredients_header: Style,
+}
+
+pub const THEME: Theme = Theme {
+    root: Style::new().bg(DARK_BLUE),
+    content: Style::new().bg(DARK_BLUE).fg(LIGHT_GRAY),
+    app_title: Style::new()
+        .fg(WHITE)
+        .bg(DARK_BLUE)
+        .add_modifier(Modifier::BOLD),
+    tabs: Style::new().fg(MID_GRAY).bg(DARK_BLUE),
+    tabs_selected: Style::new()
+        .fg(WHITE)
+        .bg(DARK_BLUE)
+        .add_modifier(Modifier::BOLD)
+        .add_modifier(Modifier::REVERSED),
+    borders: Style::new().fg(LIGHT_GRAY),
+    description: Style::new().fg(LIGHT_GRAY).bg(DARK_BLUE),
+    description_title: Style::new().fg(LIGHT_GRAY).add_modifier(Modifier::BOLD),
+    logo: Logo {
+        rat: WHITE,
+        rat_eye: BLACK,
+        rat_eye_alt: RED,
+        term: BLACK,
+    },
+    key_binding: KeyBinding {
+        key: Style::new().fg(BLACK).bg(DARK_GRAY),
+        description: Style::new().fg(DARK_GRAY).bg(BLACK),
+    },
+    email: Email {
+        tabs: Style::new().fg(MID_GRAY).bg(DARK_BLUE),
+        tabs_selected: Style::new()
+            .fg(WHITE)
+            .bg(DARK_BLUE)
+            .add_modifier(Modifier::BOLD),
+        inbox: Style::new().bg(DARK_BLUE).fg(LIGHT_GRAY),
+        item: Style::new().fg(LIGHT_GRAY),
+        selected_item: Style::new().fg(LIGHT_YELLOW),
+        header: Style::new().add_modifier(Modifier::BOLD),
+        header_value: Style::new().fg(LIGHT_GRAY),
+        body: Style::new().bg(DARK_BLUE).fg(LIGHT_GRAY),
+    },
+    traceroute: Traceroute {
+        header: Style::new()
+            .bg(DARK_BLUE)
+            .add_modifier(Modifier::BOLD)
+            .add_modifier(Modifier::UNDERLINED),
+        selected: Style::new().fg(LIGHT_YELLOW),
+        ping: Style::new().fg(WHITE),
+        map: Map {
+            style: Style::new().bg(DARK_BLUE),
+            background_color: DARK_BLUE,
+            color: LIGHT_GRAY,
+            path: LIGHT_BLUE,
+            source: LIGHT_GREEN,
+            destination: LIGHT_RED,
+        },
+    },
+    recipe: Recipe {
+        ingredients: Style::new().bg(DARK_BLUE).fg(LIGHT_GRAY),
+        ingredients_header: Style::new()
+            .add_modifier(Modifier::BOLD)
+            .add_modifier(Modifier::UNDERLINED),
+    },
+};
+
+const DARK_BLUE: Color = Color::Rgb(16, 24, 48);
+const LIGHT_BLUE: Color = Color::Rgb(64, 96, 192);
+const LIGHT_YELLOW: Color = Color::Rgb(192, 192, 96);
+const LIGHT_GREEN: Color = Color::Rgb(64, 192, 96);
+const LIGHT_RED: Color = Color::Rgb(192, 96, 96);
+const RED: Color = Color::Rgb(215, 0, 0);
+const BLACK: Color = Color::Rgb(8, 8, 8); // not really black, often #080808
+const DARK_GRAY: Color = Color::Rgb(68, 68, 68);
+const MID_GRAY: Color = Color::Rgb(128, 128, 128);
+const LIGHT_GRAY: Color = Color::Rgb(188, 188, 188);
+const WHITE: Color = Color::Rgb(238, 238, 238); // not really white, often #eeeeee
--- a/examples/docsrs.rs
+++ b/examples/docsrs.rs
@@ -0,0 +1,134 @@
+//! # [Ratatui] Docs.rs example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+use std::io::{self, stdout};
+
+use ratatui::{
+    backend::CrosstermBackend,
+    crossterm::{
+        event::{self, Event, KeyCode},
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+        ExecutableCommand,
+    },
+    layout::{Constraint, Layout},
+    style::{Color, Modifier, Style, Stylize},
+    terminal::{Frame, Terminal},
+    text::{Line, Span, Text},
+    widgets::{Block, Borders, Paragraph},
+};
+
+/// Example code for lib.rs
+///
+/// When cargo-rdme supports doc comments that import from code, this will be imported
+/// rather than copied to the lib.rs file.
+fn main() -> io::Result<()> {
+    let arg = std::env::args().nth(1).unwrap_or_default();
+    enable_raw_mode()?;
+    stdout().execute(EnterAlternateScreen)?;
+    let mut terminal = Terminal::new(CrosstermBackend::new(stdout()))?;
+
+    let mut should_quit = false;
+    while !should_quit {
+        terminal.draw(match arg.as_str() {
+            "layout" => layout,
+            "styling" => styling,
+            _ => hello_world,
+        })?;
+        should_quit = handle_events()?;
+    }
+
+    disable_raw_mode()?;
+    stdout().execute(LeaveAlternateScreen)?;
+    Ok(())
+}
+
+fn hello_world(frame: &mut Frame) {
+    frame.render_widget(
+        Paragraph::new("Hello World!").block(Block::bordered().title("Greeting")),
+        frame.size(),
+    );
+}
+
+fn handle_events() -> io::Result<bool> {
+    if event::poll(std::time::Duration::from_millis(50))? {
+        if let Event::Key(key) = event::read()? {
+            if key.kind == event::KeyEventKind::Press && key.code == KeyCode::Char('q') {
+                return Ok(true);
+            }
+        }
+    }
+    Ok(false)
+}
+
+fn layout(frame: &mut Frame) {
+    let vertical = Layout::vertical([
+        Constraint::Length(1),
+        Constraint::Min(0),
+        Constraint::Length(1),
+    ]);
+    let horizontal = Layout::horizontal([Constraint::Ratio(1, 2); 2]);
+    let [title_bar, main_area, status_bar] = vertical.areas(frame.size());
+    let [left, right] = horizontal.areas(main_area);
+
+    frame.render_widget(
+        Block::new().borders(Borders::TOP).title("Title Bar"),
+        title_bar,
+    );
+    frame.render_widget(
+        Block::new().borders(Borders::TOP).title("Status Bar"),
+        status_bar,
+    );
+    frame.render_widget(Block::bordered().title("Left"), left);
+    frame.render_widget(Block::bordered().title("Right"), right);
+}
+
+fn styling(frame: &mut Frame) {
+    let areas = Layout::vertical([
+        Constraint::Length(1),
+        Constraint::Length(1),
+        Constraint::Length(1),
+        Constraint::Length(1),
+        Constraint::Min(0),
+    ])
+    .split(frame.size());
+
+    let span1 = Span::raw("Hello ");
+    let span2 = Span::styled(
+        "World",
+        Style::new()
+            .fg(Color::Green)
+            .bg(Color::White)
+            .add_modifier(Modifier::BOLD),
+    );
+    let span3 = "!".red().on_light_yellow().italic();
+
+    let line = Line::from(vec![span1, span2, span3]);
+    let text: Text = Text::from(vec![line]);
+
+    frame.render_widget(Paragraph::new(text), areas[0]);
+    // or using the short-hand syntax and implicit conversions
+    frame.render_widget(
+        Paragraph::new("Hello World!".red().on_white().bold()),
+        areas[1],
+    );
+
+    // to style the whole widget instead of just the text
+    frame.render_widget(
+        Paragraph::new("Hello World!").style(Style::new().red().on_white()),
+        areas[2],
+    );
+    // or using the short-hand syntax
+    frame.render_widget(Paragraph::new("Hello World!").blue().on_yellow(), areas[3]);
+}
--- a/examples/flex.rs
+++ b/examples/flex.rs
@@ -0,0 +1,566 @@
+//! # [Ratatui] Flex example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+use std::io::{self, stdout};
+
+use color_eyre::{config::HookBuilder, Result};
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    buffer::Buffer,
+    crossterm::{
+        event::{self, Event, KeyCode, KeyEventKind},
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+        ExecutableCommand,
+    },
+    layout::{
+        Alignment,
+        Constraint::{self, Fill, Length, Max, Min, Percentage, Ratio},
+        Flex, Layout, Rect,
+    },
+    style::{palette::tailwind, Color, Modifier, Style, Stylize},
+    symbols::{self, line},
+    terminal::Terminal,
+    text::{Line, Text},
+    widgets::{
+        block::Title, Block, Paragraph, Scrollbar, ScrollbarOrientation, ScrollbarState,
+        StatefulWidget, Tabs, Widget,
+    },
+};
+use strum::{Display, EnumIter, FromRepr, IntoEnumIterator};
+
+const EXAMPLE_DATA: &[(&str, &[Constraint])] = &[
+    (
+        "Min(u16) takes any excess space always",
+        &[Length(10), Min(10), Max(10), Percentage(10), Ratio(1,10)],
+    ),
+    (
+        "Fill(u16) takes any excess space always",
+        &[Length(20), Percentage(20), Ratio(1, 5), Fill(1)],
+    ),
+    (
+        "Here's all constraints in one line",
+        &[Length(10), Min(10), Max(10), Percentage(10), Ratio(1,10), Fill(1)],
+    ),
+    (
+        "",
+        &[Max(50), Min(50)],
+    ),
+    (
+        "",
+        &[Max(20), Length(10)],
+    ),
+    (
+        "",
+        &[Max(20), Length(10)],
+    ),
+    (
+        "Min grows always but also allows Fill to grow",
+        &[Percentage(50), Fill(1), Fill(2), Min(50)],
+    ),
+    (
+        "In `Legacy`, the last constraint of lowest priority takes excess space",
+        &[Length(20), Length(20), Percentage(20)],
+    ),
+    ("", &[Length(20), Percentage(20), Length(20)]),
+    ("A lowest priority constraint will be broken before a high priority constraint", &[Ratio(1,4), Percentage(20)]),
+    ("`Length` is higher priority than `Percentage`", &[Percentage(20), Length(10)]),
+    ("`Min/Max` is higher priority than `Length`", &[Length(10), Max(20)]),
+    ("", &[Length(100), Min(20)]),
+    ("`Length` is higher priority than `Min/Max`", &[Max(20), Length(10)]),
+    ("", &[Min(20), Length(90)]),
+    ("Fill is the lowest priority and will fill any excess space", &[Fill(1), Ratio(1, 4)]),
+    ("Fill can be used to scale proportionally with other Fill blocks", &[Fill(1), Percentage(20), Fill(2)]),
+    ("", &[Ratio(1, 3), Percentage(20), Ratio(2, 3)]),
+    ("Legacy will stretch the last lowest priority constraint\nStretch will only stretch equal weighted constraints", &[Length(20), Length(15)]),
+    ("", &[Percentage(20), Length(15)]),
+    ("`Fill(u16)` fills up excess space, but is lower priority to spacers.\ni.e. Fill will only have widths in Flex::Stretch and Flex::Legacy", &[Fill(1), Fill(1)]),
+    ("", &[Length(20), Length(20)]),
+    (
+        "When not using `Flex::Stretch` or `Flex::Legacy`,\n`Min(u16)` and `Max(u16)` collapse to their lowest values",
+        &[Min(20), Max(20)],
+    ),
+    (
+        "",
+        &[Max(20)],
+    ),
+    ("", &[Min(20), Max(20), Length(20), Length(20)]),
+    ("", &[Fill(0), Fill(0)]),
+    (
+        "`Fill(1)` can be to scale with respect to other `Fill(2)`",
+        &[Fill(1), Fill(2)],
+    ),
+    (
+        "",
+        &[Fill(1), Min(10), Max(10), Fill(2)],
+    ),
+    (
+        "`Fill(0)` collapses if there are other non-zero `Fill(_)`\nconstraints. e.g. `[Fill(0), Fill(0), Fill(1)]`:",
+        &[
+            Fill(0),
+            Fill(0),
+            Fill(1),
+        ],
+    ),
+];
+
+#[derive(Default, Clone, Copy)]
+struct App {
+    selected_tab: SelectedTab,
+    scroll_offset: u16,
+    spacing: u16,
+    state: AppState,
+}
+
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
+enum AppState {
+    #[default]
+    Running,
+    Quit,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+struct Example {
+    constraints: Vec<Constraint>,
+    description: String,
+    flex: Flex,
+    spacing: u16,
+}
+
+/// Tabs for the different layouts
+///
+/// Note: the order of the variants will determine the order of the tabs this uses several derive
+/// macros from the `strum` crate to make it easier to iterate over the variants.
+/// (`FromRepr`,`Display`,`EnumIter`).
+#[derive(Default, Debug, Copy, Clone, PartialEq, Eq, FromRepr, Display, EnumIter)]
+enum SelectedTab {
+    #[default]
+    Legacy,
+    Start,
+    Center,
+    End,
+    SpaceAround,
+    SpaceBetween,
+}
+
+fn main() -> Result<()> {
+    // assuming the user changes spacing about a 100 times or so
+    Layout::init_cache(EXAMPLE_DATA.len() * SelectedTab::iter().len() * 100);
+    init_error_hooks()?;
+    let terminal = init_terminal()?;
+    App::default().run(terminal)?;
+
+    restore_terminal()?;
+    Ok(())
+}
+
+impl App {
+    fn run(&mut self, mut terminal: Terminal<impl Backend>) -> Result<()> {
+        self.draw(&mut terminal)?;
+        while self.is_running() {
+            self.handle_events()?;
+            self.draw(&mut terminal)?;
+        }
+        Ok(())
+    }
+
+    fn is_running(self) -> bool {
+        self.state == AppState::Running
+    }
+
+    fn draw(self, terminal: &mut Terminal<impl Backend>) -> io::Result<()> {
+        terminal.draw(|frame| frame.render_widget(self, frame.size()))?;
+        Ok(())
+    }
+
+    fn handle_events(&mut self) -> Result<()> {
+        match event::read()? {
+            Event::Key(key) if key.kind == KeyEventKind::Press => match key.code {
+                KeyCode::Char('q') | KeyCode::Esc => self.quit(),
+                KeyCode::Char('l') | KeyCode::Right => self.next(),
+                KeyCode::Char('h') | KeyCode::Left => self.previous(),
+                KeyCode::Char('j') | KeyCode::Down => self.down(),
+                KeyCode::Char('k') | KeyCode::Up => self.up(),
+                KeyCode::Char('g') | KeyCode::Home => self.top(),
+                KeyCode::Char('G') | KeyCode::End => self.bottom(),
+                KeyCode::Char('+') => self.increment_spacing(),
+                KeyCode::Char('-') => self.decrement_spacing(),
+                _ => (),
+            },
+            _ => {}
+        }
+        Ok(())
+    }
+
+    fn next(&mut self) {
+        self.selected_tab = self.selected_tab.next();
+    }
+
+    fn previous(&mut self) {
+        self.selected_tab = self.selected_tab.previous();
+    }
+
+    fn up(&mut self) {
+        self.scroll_offset = self.scroll_offset.saturating_sub(1);
+    }
+
+    fn down(&mut self) {
+        self.scroll_offset = self
+            .scroll_offset
+            .saturating_add(1)
+            .min(max_scroll_offset());
+    }
+
+    fn top(&mut self) {
+        self.scroll_offset = 0;
+    }
+
+    fn bottom(&mut self) {
+        self.scroll_offset = max_scroll_offset();
+    }
+
+    fn increment_spacing(&mut self) {
+        self.spacing = self.spacing.saturating_add(1);
+    }
+
+    fn decrement_spacing(&mut self) {
+        self.spacing = self.spacing.saturating_sub(1);
+    }
+
+    fn quit(&mut self) {
+        self.state = AppState::Quit;
+    }
+}
+
+// when scrolling, make sure we don't scroll past the last example
+fn max_scroll_offset() -> u16 {
+    example_height()
+        - EXAMPLE_DATA
+            .last()
+            .map_or(0, |(desc, _)| get_description_height(desc) + 4)
+}
+
+/// The height of all examples combined
+///
+/// Each may or may not have a title so we need to account for that.
+fn example_height() -> u16 {
+    EXAMPLE_DATA
+        .iter()
+        .map(|(desc, _)| get_description_height(desc) + 4)
+        .sum()
+}
+
+impl Widget for App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let layout = Layout::vertical([Length(3), Length(1), Fill(0)]);
+        let [tabs, axis, demo] = layout.areas(area);
+        self.tabs().render(tabs, buf);
+        let scroll_needed = self.render_demo(demo, buf);
+        let axis_width = if scroll_needed {
+            axis.width.saturating_sub(1)
+        } else {
+            axis.width
+        };
+        Self::axis(axis_width, self.spacing).render(axis, buf);
+    }
+}
+
+impl App {
+    fn tabs(self) -> impl Widget {
+        let tab_titles = SelectedTab::iter().map(SelectedTab::to_tab_title);
+        let block = Block::new()
+            .title(Title::from("Flex Layouts ".bold()))
+            .title(" Use ◄ ► to change tab, ▲ ▼  to scroll, - + to change spacing ");
+        Tabs::new(tab_titles)
+            .block(block)
+            .highlight_style(Modifier::REVERSED)
+            .select(self.selected_tab as usize)
+            .divider(" ")
+            .padding("", "")
+    }
+
+    /// a bar like `<----- 80 px (gap: 2 px)? ----->`
+    fn axis(width: u16, spacing: u16) -> impl Widget {
+        let width = width as usize;
+        // only show gap when spacing is not zero
+        let label = if spacing != 0 {
+            format!("{width} px (gap: {spacing} px)")
+        } else {
+            format!("{width} px")
+        };
+        let bar_width = width.saturating_sub(2); // we want to `<` and `>` at the ends
+        let width_bar = format!("<{label:-^bar_width$}>");
+        Paragraph::new(width_bar.dark_gray()).centered()
+    }
+
+    /// Render the demo content
+    ///
+    /// This function renders the demo content into a separate buffer and then splices the buffer
+    /// into the main buffer. This is done to make it possible to handle scrolling easily.
+    ///
+    /// Returns bool indicating whether scroll was needed
+    #[allow(clippy::cast_possible_truncation)]
+    fn render_demo(self, area: Rect, buf: &mut Buffer) -> bool {
+        // render demo content into a separate buffer so all examples fit we add an extra
+        // area.height to make sure the last example is fully visible even when the scroll offset is
+        // at the max
+        let height = example_height();
+        let demo_area = Rect::new(0, 0, area.width, height);
+        let mut demo_buf = Buffer::empty(demo_area);
+
+        let scrollbar_needed = self.scroll_offset != 0 || height > area.height;
+        let content_area = if scrollbar_needed {
+            Rect {
+                width: demo_area.width - 1,
+                ..demo_area
+            }
+        } else {
+            demo_area
+        };
+
+        let mut spacing = self.spacing;
+        self.selected_tab
+            .render(content_area, &mut demo_buf, &mut spacing);
+
+        let visible_content = demo_buf
+            .content
+            .into_iter()
+            .skip((area.width * self.scroll_offset) as usize)
+            .take(area.area() as usize);
+        for (i, cell) in visible_content.enumerate() {
+            let x = i as u16 % area.width;
+            let y = i as u16 / area.width;
+            *buf.get_mut(area.x + x, area.y + y) = cell;
+        }
+
+        if scrollbar_needed {
+            let area = area.intersection(buf.area);
+            let mut state = ScrollbarState::new(max_scroll_offset() as usize)
+                .position(self.scroll_offset as usize);
+            Scrollbar::new(ScrollbarOrientation::VerticalRight).render(area, buf, &mut state);
+        }
+        scrollbar_needed
+    }
+}
+
+impl SelectedTab {
+    /// Get the previous tab, if there is no previous tab return the current tab.
+    fn previous(self) -> Self {
+        let current_index: usize = self as usize;
+        let previous_index = current_index.saturating_sub(1);
+        Self::from_repr(previous_index).unwrap_or(self)
+    }
+
+    /// Get the next tab, if there is no next tab return the current tab.
+    fn next(self) -> Self {
+        let current_index = self as usize;
+        let next_index = current_index.saturating_add(1);
+        Self::from_repr(next_index).unwrap_or(self)
+    }
+
+    /// Convert a `SelectedTab` into a `Line` to display it by the `Tabs` widget.
+    fn to_tab_title(value: Self) -> Line<'static> {
+        use tailwind::{INDIGO, ORANGE, SKY};
+        let text = value.to_string();
+        let color = match value {
+            Self::Legacy => ORANGE.c400,
+            Self::Start => SKY.c400,
+            Self::Center => SKY.c300,
+            Self::End => SKY.c200,
+            Self::SpaceAround => INDIGO.c400,
+            Self::SpaceBetween => INDIGO.c300,
+        };
+        format!(" {text} ").fg(color).bg(Color::Black).into()
+    }
+}
+
+impl StatefulWidget for SelectedTab {
+    type State = u16;
+    fn render(self, area: Rect, buf: &mut Buffer, spacing: &mut Self::State) {
+        let spacing = *spacing;
+        match self {
+            Self::Legacy => Self::render_examples(area, buf, Flex::Legacy, spacing),
+            Self::Start => Self::render_examples(area, buf, Flex::Start, spacing),
+            Self::Center => Self::render_examples(area, buf, Flex::Center, spacing),
+            Self::End => Self::render_examples(area, buf, Flex::End, spacing),
+            Self::SpaceAround => Self::render_examples(area, buf, Flex::SpaceAround, spacing),
+            Self::SpaceBetween => Self::render_examples(area, buf, Flex::SpaceBetween, spacing),
+        }
+    }
+}
+
+impl SelectedTab {
+    fn render_examples(area: Rect, buf: &mut Buffer, flex: Flex, spacing: u16) {
+        let heights = EXAMPLE_DATA
+            .iter()
+            .map(|(desc, _)| get_description_height(desc) + 4);
+        let areas = Layout::vertical(heights).flex(Flex::Start).split(area);
+        for (area, (description, constraints)) in areas.iter().zip(EXAMPLE_DATA.iter()) {
+            Example::new(constraints, description, flex, spacing).render(*area, buf);
+        }
+    }
+}
+
+impl Example {
+    fn new(constraints: &[Constraint], description: &str, flex: Flex, spacing: u16) -> Self {
+        Self {
+            constraints: constraints.into(),
+            description: description.into(),
+            flex,
+            spacing,
+        }
+    }
+}
+
+impl Widget for Example {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let title_height = get_description_height(&self.description);
+        let layout = Layout::vertical([Length(title_height), Fill(0)]);
+        let [title, illustrations] = layout.areas(area);
+
+        let (blocks, spacers) = Layout::horizontal(&self.constraints)
+            .flex(self.flex)
+            .spacing(self.spacing)
+            .split_with_spacers(illustrations);
+
+        if !self.description.is_empty() {
+            Paragraph::new(
+                self.description
+                    .split('\n')
+                    .map(|s| format!("// {s}").italic().fg(tailwind::SLATE.c400))
+                    .map(Line::from)
+                    .collect::<Vec<Line>>(),
+            )
+            .render(title, buf);
+        }
+
+        for (block, constraint) in blocks.iter().zip(&self.constraints) {
+            Self::illustration(*constraint, block.width).render(*block, buf);
+        }
+
+        for spacer in spacers.iter() {
+            Self::render_spacer(*spacer, buf);
+        }
+    }
+}
+
+impl Example {
+    fn render_spacer(spacer: Rect, buf: &mut Buffer) {
+        if spacer.width > 1 {
+            let corners_only = symbols::border::Set {
+                top_left: line::NORMAL.top_left,
+                top_right: line::NORMAL.top_right,
+                bottom_left: line::NORMAL.bottom_left,
+                bottom_right: line::NORMAL.bottom_right,
+                vertical_left: " ",
+                vertical_right: " ",
+                horizontal_top: " ",
+                horizontal_bottom: " ",
+            };
+            Block::bordered()
+                .border_set(corners_only)
+                .border_style(Style::reset().dark_gray())
+                .render(spacer, buf);
+        } else {
+            Paragraph::new(Text::from(vec![
+                Line::from(""),
+                Line::from("│"),
+                Line::from("│"),
+                Line::from(""),
+            ]))
+            .style(Style::reset().dark_gray())
+            .render(spacer, buf);
+        }
+        let width = spacer.width;
+        let label = if width > 4 {
+            format!("{width} px")
+        } else if width > 2 {
+            format!("{width}")
+        } else {
+            String::new()
+        };
+        let text = Text::from(vec![
+            Line::raw(""),
+            Line::raw(""),
+            Line::styled(label, Style::reset().dark_gray()),
+        ]);
+        Paragraph::new(text)
+            .style(Style::reset().dark_gray())
+            .alignment(Alignment::Center)
+            .render(spacer, buf);
+    }
+
+    fn illustration(constraint: Constraint, width: u16) -> impl Widget {
+        let main_color = color_for_constraint(constraint);
+        let fg_color = Color::White;
+        let title = format!("{constraint}");
+        let content = format!("{width} px");
+        let text = format!("{title}\n{content}");
+        let block = Block::bordered()
+            .border_set(symbols::border::QUADRANT_OUTSIDE)
+            .border_style(Style::reset().fg(main_color).reversed())
+            .style(Style::default().fg(fg_color).bg(main_color));
+        Paragraph::new(text).centered().block(block)
+    }
+}
+
+const fn color_for_constraint(constraint: Constraint) -> Color {
+    use tailwind::{BLUE, SLATE};
+    match constraint {
+        Constraint::Min(_) => BLUE.c900,
+        Constraint::Max(_) => BLUE.c800,
+        Constraint::Length(_) => SLATE.c700,
+        Constraint::Percentage(_) => SLATE.c800,
+        Constraint::Ratio(_, _) => SLATE.c900,
+        Constraint::Fill(_) => SLATE.c950,
+    }
+}
+
+fn init_error_hooks() -> Result<()> {
+    let (panic, error) = HookBuilder::default().into_hooks();
+    let panic = panic.into_panic_hook();
+    let error = error.into_eyre_hook();
+    color_eyre::eyre::set_hook(Box::new(move |e| {
+        let _ = restore_terminal();
+        error(e)
+    }))?;
+    std::panic::set_hook(Box::new(move |info| {
+        let _ = restore_terminal();
+        panic(info);
+    }));
+    Ok(())
+}
+
+fn init_terminal() -> Result<Terminal<impl Backend>> {
+    enable_raw_mode()?;
+    stdout().execute(EnterAlternateScreen)?;
+    let backend = CrosstermBackend::new(stdout());
+    let terminal = Terminal::new(backend)?;
+    Ok(terminal)
+}
+
+fn restore_terminal() -> Result<()> {
+    disable_raw_mode()?;
+    stdout().execute(LeaveAlternateScreen)?;
+    Ok(())
+}
+
+#[allow(clippy::cast_possible_truncation)]
+fn get_description_height(s: &str) -> u16 {
+    if s.is_empty() {
+        0
+    } else {
+        s.split('\n').count() as u16
+    }
+}
--- a/examples/gauge.rs
+++ b/examples/gauge.rs
@@ -1,157 +1,244 @@
-extern crate termion;
-extern crate tui;
+//! # [Ratatui] Gauge example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md

-use std::io;
-use std::thread;
-use std::time;
-use std::sync::mpsc;
+use std::{io::stdout, time::Duration};

-use termion::event;
-use termion::input::TermRead;
+use color_eyre::{config::HookBuilder, Result};
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    buffer::Buffer,
+    crossterm::{
+        event::{self, Event, KeyCode, KeyEventKind},
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+        ExecutableCommand,
+    },
+    layout::{Alignment, Constraint, Layout, Rect},
+    style::{palette::tailwind, Color, Style, Stylize},
+    terminal::Terminal,
+    text::Span,
+    widgets::{block::Title, Block, Borders, Gauge, Padding, Paragraph, Widget},
+};

-use tui::Terminal;
-use tui::backend::MouseBackend;
-use tui::widgets::{Block, Borders, Gauge, Widget};
-use tui::layout::{Direction, Group, Rect, Size};
-use tui::style::{Color, Modifier, Style};
+const GAUGE1_COLOR: Color = tailwind::RED.c800;
+const GAUGE2_COLOR: Color = tailwind::GREEN.c800;
+const GAUGE3_COLOR: Color = tailwind::BLUE.c800;
+const GAUGE4_COLOR: Color = tailwind::ORANGE.c800;
+const CUSTOM_LABEL_COLOR: Color = tailwind::SLATE.c200;

+#[derive(Debug, Default, Clone, Copy)]
 struct App {
-    size: Rect,
+    state: AppState,
+    progress_columns: u16,
    progress1: u16,
-    progress2: u16,
-    progress3: u16,
-    progress4: u16,
+    progress2: f64,
+    progress3: f64,
+    progress4: f64,
+}
+
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
+enum AppState {
+    #[default]
+    Running,
+    Started,
+    Quitting,
+}
+
+fn main() -> Result<()> {
+    init_error_hooks()?;
+    let terminal = init_terminal()?;
+    App::default().run(terminal)?;
+    restore_terminal()?;
+    Ok(())
 }

 impl App {
-    fn new() -> App {
-        App {
-            size: Rect::default(),
-            progress1: 0,
-            progress2: 0,
-            progress3: 0,
-            progress4: 0,
+    fn run(&mut self, mut terminal: Terminal<impl Backend>) -> Result<()> {
+        while self.state != AppState::Quitting {
+            self.draw(&mut terminal)?;
+            self.handle_events()?;
+            self.update(terminal.size()?.width);
        }
+        Ok(())
    }

-    fn advance(&mut self) {
-        self.progress1 += 5;
-        if self.progress1 > 100 {
-            self.progress1 = 0;
-        }
-        self.progress2 += 10;
-        if self.progress2 > 100 {
-            self.progress2 = 0;
-        }
-        self.progress3 += 1;
-        if self.progress3 > 100 {
-            self.progress3 = 0;
-        }
-        self.progress4 += 3;
-        if self.progress4 > 100 {
-            self.progress4 = 0;
-        }
+    fn draw(&self, terminal: &mut Terminal<impl Backend>) -> Result<()> {
+        terminal.draw(|f| f.render_widget(self, f.size()))?;
+        Ok(())
    }
-}

-enum Event {
-    Input(event::Key),
-    Tick,
-}
+    fn update(&mut self, terminal_width: u16) {
+        if self.state != AppState::Started {
+            return;
+        }

-fn main() {
-    // Terminal initialization
-    let backend = MouseBackend::new().unwrap();
-    let mut terminal = Terminal::new(backend).unwrap();
+        // progress1 and progress2 help show the difference between ratio and percentage measuring
+        // the same thing, but converting to either a u16 or f64. Effectively, we're showing the
+        // difference between how a continuous gauge acts for floor and rounded values.
+        self.progress_columns = (self.progress_columns + 1).clamp(0, terminal_width);
+        self.progress1 = self.progress_columns * 100 / terminal_width;
+        self.progress2 = f64::from(self.progress_columns) * 100.0 / f64::from(terminal_width);

-    // Channels
-    let (tx, rx) = mpsc::channel();
-    let input_tx = tx.clone();
-    let clock_tx = tx.clone();
+        // progress3 and progress4 similarly show the difference between unicode and non-unicode
+        // gauges measuring the same thing.
+        self.progress3 = (self.progress3 + 0.1).clamp(40.0, 100.0);
+        self.progress4 = (self.progress4 + 0.1).clamp(40.0, 100.0);
+    }

-    // Input
-    thread::spawn(move || {
-        let stdin = io::stdin();
-        for c in stdin.keys() {
-            let evt = c.unwrap();
-            input_tx.send(Event::Input(evt)).unwrap();
-            if evt == event::Key::Char('q') {
-                break;
+    fn handle_events(&mut self) -> Result<()> {
+        let timeout = Duration::from_secs_f32(1.0 / 20.0);
+        if event::poll(timeout)? {
+            if let Event::Key(key) = event::read()? {
+                if key.kind == KeyEventKind::Press {
+                    match key.code {
+                        KeyCode::Char(' ') | KeyCode::Enter => self.start(),
+                        KeyCode::Char('q') | KeyCode::Esc => self.quit(),
+                        _ => {}
+                    }
+                }
            }
        }
-    });
-
-    // Tick
-    thread::spawn(move || loop {
-        clock_tx.send(Event::Tick).unwrap();
-        thread::sleep(time::Duration::from_millis(500));
-    });
-
-    // App
-    let mut app = App::new();
-
-    // First draw call
-    terminal.clear().unwrap();
-    terminal.hide_cursor().unwrap();
-    app.size = terminal.size().unwrap();
-    draw(&mut terminal, &app);
-
-    loop {
-        let size = terminal.size().unwrap();
-        if size != app.size {
-            terminal.resize(size).unwrap();
-            app.size = size;
-        }
-
-        let evt = rx.recv().unwrap();
-        match evt {
-            Event::Input(input) => if input == event::Key::Char('q') {
-                break;
-            },
-            Event::Tick => {
-                app.advance();
-            }
-        }
-        draw(&mut terminal, &app);
+        Ok(())
    }

-    terminal.show_cursor().unwrap();
+    fn start(&mut self) {
+        self.state = AppState::Started;
+    }
+
+    fn quit(&mut self) {
+        self.state = AppState::Quitting;
+    }
 }

-fn draw(t: &mut Terminal<MouseBackend>, app: &App) {
-    Group::default()
-        .direction(Direction::Vertical)
-        .margin(2)
-        .sizes(&[
-            Size::Percent(25),
-            Size::Percent(25),
-            Size::Percent(25),
-            Size::Percent(25),
-        ])
-        .render(t, &app.size, |t, chunks| {
-            Gauge::default()
-                .block(Block::default().title("Gauge1").borders(Borders::ALL))
-                .style(Style::default().fg(Color::Yellow))
-                .percent(app.progress1)
-                .render(t, &chunks[0]);
-            Gauge::default()
-                .block(Block::default().title("Gauge2").borders(Borders::ALL))
-                .style(Style::default().fg(Color::Magenta).bg(Color::Green))
-                .percent(app.progress2)
-                .label(&format!("{}/100", app.progress2))
-                .render(t, &chunks[1]);
-            Gauge::default()
-                .block(Block::default().title("Gauge2").borders(Borders::ALL))
-                .style(Style::default().fg(Color::Yellow))
-                .percent(app.progress3)
-                .render(t, &chunks[2]);
-            Gauge::default()
-                .block(Block::default().title("Gauge3").borders(Borders::ALL))
-                .style(Style::default().fg(Color::Cyan).modifier(Modifier::Italic))
-                .percent(app.progress4)
-                .label(&format!("{}/100", app.progress2))
-                .render(t, &chunks[3]);
-        });
+impl Widget for &App {
+    #[allow(clippy::similar_names)]
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        use Constraint::{Length, Min, Ratio};
+        let layout = Layout::vertical([Length(2), Min(0), Length(1)]);
+        let [header_area, gauge_area, footer_area] = layout.areas(area);

-    t.draw().unwrap();
+        let layout = Layout::vertical([Ratio(1, 4); 4]);
+        let [gauge1_area, gauge2_area, gauge3_area, gauge4_area] = layout.areas(gauge_area);
+
+        render_header(header_area, buf);
+        render_footer(footer_area, buf);
+
+        self.render_gauge1(gauge1_area, buf);
+        self.render_gauge2(gauge2_area, buf);
+        self.render_gauge3(gauge3_area, buf);
+        self.render_gauge4(gauge4_area, buf);
+    }
+}
+
+fn render_header(area: Rect, buf: &mut Buffer) {
+    Paragraph::new("Ratatui Gauge Example")
+        .bold()
+        .alignment(Alignment::Center)
+        .fg(CUSTOM_LABEL_COLOR)
+        .render(area, buf);
+}
+
+fn render_footer(area: Rect, buf: &mut Buffer) {
+    Paragraph::new("Press ENTER to start")
+        .alignment(Alignment::Center)
+        .fg(CUSTOM_LABEL_COLOR)
+        .bold()
+        .render(area, buf);
+}
+
+impl App {
+    fn render_gauge1(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Gauge with percentage");
+        Gauge::default()
+            .block(title)
+            .gauge_style(GAUGE1_COLOR)
+            .percent(self.progress1)
+            .render(area, buf);
+    }
+
+    fn render_gauge2(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Gauge with ratio and custom label");
+        let label = Span::styled(
+            format!("{:.1}/100", self.progress2),
+            Style::new().italic().bold().fg(CUSTOM_LABEL_COLOR),
+        );
+        Gauge::default()
+            .block(title)
+            .gauge_style(GAUGE2_COLOR)
+            .ratio(self.progress2 / 100.0)
+            .label(label)
+            .render(area, buf);
+    }
+
+    fn render_gauge3(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Gauge with ratio (no unicode)");
+        let label = format!("{:.1}%", self.progress3);
+        Gauge::default()
+            .block(title)
+            .gauge_style(GAUGE3_COLOR)
+            .ratio(self.progress3 / 100.0)
+            .label(label)
+            .render(area, buf);
+    }
+
+    fn render_gauge4(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Gauge with ratio (unicode)");
+        let label = format!("{:.1}%", self.progress3);
+        Gauge::default()
+            .block(title)
+            .gauge_style(GAUGE4_COLOR)
+            .ratio(self.progress4 / 100.0)
+            .label(label)
+            .use_unicode(true)
+            .render(area, buf);
+    }
+}
+
+fn title_block(title: &str) -> Block {
+    let title = Title::from(title).alignment(Alignment::Center);
+    Block::new()
+        .borders(Borders::NONE)
+        .padding(Padding::vertical(1))
+        .title(title)
+        .fg(CUSTOM_LABEL_COLOR)
+}
+
+fn init_error_hooks() -> color_eyre::Result<()> {
+    let (panic, error) = HookBuilder::default().into_hooks();
+    let panic = panic.into_panic_hook();
+    let error = error.into_eyre_hook();
+    color_eyre::eyre::set_hook(Box::new(move |e| {
+        let _ = restore_terminal();
+        error(e)
+    }))?;
+    std::panic::set_hook(Box::new(move |info| {
+        let _ = restore_terminal();
+        panic(info);
+    }));
+    Ok(())
+}
+
+fn init_terminal() -> color_eyre::Result<Terminal<impl Backend>> {
+    enable_raw_mode()?;
+    stdout().execute(EnterAlternateScreen)?;
+    let backend = CrosstermBackend::new(stdout());
+    let terminal = Terminal::new(backend)?;
+    Ok(terminal)
+}
+
+fn restore_terminal() -> color_eyre::Result<()> {
+    disable_raw_mode()?;
+    stdout().execute(LeaveAlternateScreen)?;
+    Ok(())
 }
--- a/examples/hello_world.rs
+++ b/examples/hello_world.rs
@@ -0,0 +1,99 @@
+//! # [Ratatui] Hello World example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+use std::{
+    io::{self, Stdout},
+    time::Duration,
+};
+
+use anyhow::{Context, Result};
+use ratatui::{
+    backend::CrosstermBackend,
+    crossterm::{
+        event::{self, Event, KeyCode},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    terminal::{Frame, Terminal},
+    widgets::Paragraph,
+};
+
+/// This is a bare minimum example. There are many approaches to running an application loop, so
+/// this is not meant to be prescriptive. It is only meant to demonstrate the basic setup and
+/// teardown of a terminal application.
+///
+/// A more robust application would probably want to handle errors and ensure that the terminal is
+/// restored to a sane state before exiting. This example does not do that. It also does not handle
+/// events or update the application state. It just draws a greeting and exits when the user
+/// presses 'q'.
+fn main() -> Result<()> {
+    let mut terminal = setup_terminal().context("setup failed")?;
+    run(&mut terminal).context("app loop failed")?;
+    restore_terminal(&mut terminal).context("restore terminal failed")?;
+    Ok(())
+}
+
+/// Setup the terminal. This is where you would enable raw mode, enter the alternate screen, and
+/// hide the cursor. This example does not handle errors. A more robust application would probably
+/// want to handle errors and ensure that the terminal is restored to a sane state before exiting.
+fn setup_terminal() -> Result<Terminal<CrosstermBackend<Stdout>>> {
+    let mut stdout = io::stdout();
+    enable_raw_mode().context("failed to enable raw mode")?;
+    execute!(stdout, EnterAlternateScreen).context("unable to enter alternate screen")?;
+    Terminal::new(CrosstermBackend::new(stdout)).context("creating terminal failed")
+}
+
+/// Restore the terminal. This is where you disable raw mode, leave the alternate screen, and show
+/// the cursor.
+fn restore_terminal(terminal: &mut Terminal<CrosstermBackend<Stdout>>) -> Result<()> {
+    disable_raw_mode().context("failed to disable raw mode")?;
+    execute!(terminal.backend_mut(), LeaveAlternateScreen)
+        .context("unable to switch to main screen")?;
+    terminal.show_cursor().context("unable to show cursor")
+}
+
+/// Run the application loop. This is where you would handle events and update the application
+/// state. This example exits when the user presses 'q'. Other styles of application loops are
+/// possible, for example, you could have multiple application states and switch between them based
+/// on events, or you could have a single application state and update it based on events.
+fn run(terminal: &mut Terminal<CrosstermBackend<Stdout>>) -> Result<()> {
+    loop {
+        terminal.draw(crate::render_app)?;
+        if should_quit()? {
+            break;
+        }
+    }
+    Ok(())
+}
+
+/// Render the application. This is where you would draw the application UI. This example just
+/// draws a greeting.
+fn render_app(frame: &mut Frame) {
+    let greeting = Paragraph::new("Hello World! (press 'q' to quit)");
+    frame.render_widget(greeting, frame.size());
+}
+
+/// Check if the user has pressed 'q'. This is where you would handle events. This example just
+/// checks if the user has pressed 'q' and returns true if they have. It does not handle any other
+/// events. There is a 250ms timeout on the event poll so that the application can exit in a timely
+/// manner, and to ensure that the terminal is rendered at least once every 250ms.
+fn should_quit() -> Result<bool> {
+    if event::poll(Duration::from_millis(250)).context("event poll failed")? {
+        if let Event::Key(key) = event::read().context("event read failed")? {
+            return Ok(KeyCode::Char('q') == key.code);
+        }
+    }
+    Ok(false)
+}
--- a/examples/inline.rs
+++ b/examples/inline.rs
@@ -0,0 +1,304 @@
+//! # [Ratatui] Inline example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+use std::{
+    collections::{BTreeMap, VecDeque},
+    error::Error,
+    io,
+    sync::mpsc,
+    thread,
+    time::{Duration, Instant},
+};
+
+use rand::distributions::{Distribution, Uniform};
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    layout::{Alignment, Constraint, Layout, Rect},
+    style::{Color, Modifier, Style},
+    symbols,
+    terminal::{Frame, Terminal, Viewport},
+    text::{Line, Span},
+    widgets::{block, Block, Gauge, LineGauge, List, ListItem, Paragraph, Widget},
+    TerminalOptions,
+};
+
+const NUM_DOWNLOADS: usize = 10;
+
+type DownloadId = usize;
+type WorkerId = usize;
+
+enum Event {
+    Input(crossterm::event::KeyEvent),
+    Tick,
+    Resize,
+    DownloadUpdate(WorkerId, DownloadId, f64),
+    DownloadDone(WorkerId, DownloadId),
+}
+
+struct Downloads {
+    pending: VecDeque<Download>,
+    in_progress: BTreeMap<WorkerId, DownloadInProgress>,
+}
+
+impl Downloads {
+    fn next(&mut self, worker_id: WorkerId) -> Option<Download> {
+        match self.pending.pop_front() {
+            Some(d) => {
+                self.in_progress.insert(
+                    worker_id,
+                    DownloadInProgress {
+                        id: d.id,
+                        started_at: Instant::now(),
+                        progress: 0.0,
+                    },
+                );
+                Some(d)
+            }
+            None => None,
+        }
+    }
+}
+
+struct DownloadInProgress {
+    id: DownloadId,
+    started_at: Instant,
+    progress: f64,
+}
+
+struct Download {
+    id: DownloadId,
+    size: usize,
+}
+
+struct Worker {
+    id: WorkerId,
+    tx: mpsc::Sender<Download>,
+}
+
+fn main() -> Result<(), Box<dyn Error>> {
+    crossterm::terminal::enable_raw_mode()?;
+    let stdout = io::stdout();
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::with_options(
+        backend,
+        TerminalOptions {
+            viewport: Viewport::Inline(8),
+        },
+    )?;
+
+    let (tx, rx) = mpsc::channel();
+    input_handling(tx.clone());
+    let workers = workers(tx);
+    let mut downloads = downloads();
+
+    for w in &workers {
+        let d = downloads.next(w.id).unwrap();
+        w.tx.send(d).unwrap();
+    }
+
+    run_app(&mut terminal, workers, downloads, rx)?;
+
+    crossterm::terminal::disable_raw_mode()?;
+    terminal.clear()?;
+
+    Ok(())
+}
+
+fn input_handling(tx: mpsc::Sender<Event>) {
+    let tick_rate = Duration::from_millis(200);
+    thread::spawn(move || {
+        let mut last_tick = Instant::now();
+        loop {
+            // poll for tick rate duration, if no events, sent tick event.
+            let timeout = tick_rate.saturating_sub(last_tick.elapsed());
+            if crossterm::event::poll(timeout).unwrap() {
+                match crossterm::event::read().unwrap() {
+                    crossterm::event::Event::Key(key) => tx.send(Event::Input(key)).unwrap(),
+                    crossterm::event::Event::Resize(_, _) => tx.send(Event::Resize).unwrap(),
+                    _ => {}
+                };
+            }
+            if last_tick.elapsed() >= tick_rate {
+                tx.send(Event::Tick).unwrap();
+                last_tick = Instant::now();
+            }
+        }
+    });
+}
+
+#[allow(clippy::cast_precision_loss, clippy::needless_pass_by_value)]
+fn workers(tx: mpsc::Sender<Event>) -> Vec<Worker> {
+    (0..4)
+        .map(|id| {
+            let (worker_tx, worker_rx) = mpsc::channel::<Download>();
+            let tx = tx.clone();
+            thread::spawn(move || {
+                while let Ok(download) = worker_rx.recv() {
+                    let mut remaining = download.size;
+                    while remaining > 0 {
+                        let wait = (remaining as u64).min(10);
+                        thread::sleep(Duration::from_millis(wait * 10));
+                        remaining = remaining.saturating_sub(10);
+                        let progress = (download.size - remaining) * 100 / download.size;
+                        tx.send(Event::DownloadUpdate(id, download.id, progress as f64))
+                            .unwrap();
+                    }
+                    tx.send(Event::DownloadDone(id, download.id)).unwrap();
+                }
+            });
+            Worker { id, tx: worker_tx }
+        })
+        .collect()
+}
+
+fn downloads() -> Downloads {
+    let distribution = Uniform::new(0, 1000);
+    let mut rng = rand::thread_rng();
+    let pending = (0..NUM_DOWNLOADS)
+        .map(|id| {
+            let size = distribution.sample(&mut rng);
+            Download { id, size }
+        })
+        .collect();
+    Downloads {
+        pending,
+        in_progress: BTreeMap::new(),
+    }
+}
+
+#[allow(clippy::needless_pass_by_value)]
+fn run_app<B: Backend>(
+    terminal: &mut Terminal<B>,
+    workers: Vec<Worker>,
+    mut downloads: Downloads,
+    rx: mpsc::Receiver<Event>,
+) -> Result<(), Box<dyn Error>> {
+    let mut redraw = true;
+    loop {
+        if redraw {
+            terminal.draw(|f| ui(f, &downloads))?;
+        }
+        redraw = true;
+
+        match rx.recv()? {
+            Event::Input(event) => {
+                if event.code == crossterm::event::KeyCode::Char('q') {
+                    break;
+                }
+            }
+            Event::Resize => {
+                terminal.autoresize()?;
+            }
+            Event::Tick => {}
+            Event::DownloadUpdate(worker_id, _download_id, progress) => {
+                let download = downloads.in_progress.get_mut(&worker_id).unwrap();
+                download.progress = progress;
+                redraw = false;
+            }
+            Event::DownloadDone(worker_id, download_id) => {
+                let download = downloads.in_progress.remove(&worker_id).unwrap();
+                terminal.insert_before(1, |buf| {
+                    Paragraph::new(Line::from(vec![
+                        Span::from("Finished "),
+                        Span::styled(
+                            format!("download {download_id}"),
+                            Style::default().add_modifier(Modifier::BOLD),
+                        ),
+                        Span::from(format!(
+                            " in {}ms",
+                            download.started_at.elapsed().as_millis()
+                        )),
+                    ]))
+                    .render(buf.area, buf);
+                })?;
+                match downloads.next(worker_id) {
+                    Some(d) => workers[worker_id].tx.send(d).unwrap(),
+                    None => {
+                        if downloads.in_progress.is_empty() {
+                            terminal.insert_before(1, |buf| {
+                                Paragraph::new("Done !").render(buf.area, buf);
+                            })?;
+                            break;
+                        }
+                    }
+                };
+            }
+        };
+    }
+    Ok(())
+}
+
+fn ui(f: &mut Frame, downloads: &Downloads) {
+    let area = f.size();
+
+    let block = Block::new().title(block::Title::from("Progress").alignment(Alignment::Center));
+    f.render_widget(block, area);
+
+    let vertical = Layout::vertical([Constraint::Length(2), Constraint::Length(4)]).margin(1);
+    let horizontal = Layout::horizontal([Constraint::Percentage(20), Constraint::Percentage(80)]);
+    let [progress_area, main] = vertical.areas(area);
+    let [list_area, gauge_area] = horizontal.areas(main);
+
+    // total progress
+    let done = NUM_DOWNLOADS - downloads.pending.len() - downloads.in_progress.len();
+    #[allow(clippy::cast_precision_loss)]
+    let progress = LineGauge::default()
+        .filled_style(Style::default().fg(Color::Blue))
+        .label(format!("{done}/{NUM_DOWNLOADS}"))
+        .ratio(done as f64 / NUM_DOWNLOADS as f64);
+    f.render_widget(progress, progress_area);
+
+    // in progress downloads
+    let items: Vec<ListItem> = downloads
+        .in_progress
+        .values()
+        .map(|download| {
+            ListItem::new(Line::from(vec![
+                Span::raw(symbols::DOT),
+                Span::styled(
+                    format!(" download {:>2}", download.id),
+                    Style::default()
+                        .fg(Color::LightGreen)
+                        .add_modifier(Modifier::BOLD),
+                ),
+                Span::raw(format!(
+                    " ({}ms)",
+                    download.started_at.elapsed().as_millis()
+                )),
+            ]))
+        })
+        .collect();
+    let list = List::new(items);
+    f.render_widget(list, list_area);
+
+    #[allow(clippy::cast_possible_truncation)]
+    for (i, (_, download)) in downloads.in_progress.iter().enumerate() {
+        let gauge = Gauge::default()
+            .gauge_style(Style::default().fg(Color::Yellow))
+            .ratio(download.progress / 100.0);
+        if gauge_area.top().saturating_add(i as u16) > area.bottom() {
+            continue;
+        }
+        f.render_widget(
+            gauge,
+            Rect {
+                x: gauge_area.left(),
+                y: gauge_area.top().saturating_add(i as u16),
+                width: gauge_area.width,
+                height: 1,
+            },
+        );
+    }
+}
--- a/examples/layout.rs
+++ b/examples/layout.rs
@@ -1,104 +1,234 @@
-extern crate log;
-extern crate stderrlog;
-extern crate termion;
-extern crate tui;
+//! # [Ratatui] Layout example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md

-use std::io;
-use std::thread;
-use std::sync::mpsc;
+use std::{error::Error, io};

-use termion::event;
-use termion::input::TermRead;
+use itertools::Itertools;
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    crossterm::{
+        event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    layout::{
+        Constraint,
+        Constraint::{Length, Max, Min, Percentage, Ratio},
+        Layout, Rect,
+    },
+    style::{Color, Style, Stylize},
+    terminal::{Frame, Terminal},
+    text::Line,
+    widgets::{Block, Paragraph},
+};

-use tui::Terminal;
-use tui::backend::MouseBackend;
-use tui::widgets::{Block, Borders, Widget};
-use tui::layout::{Direction, Group, Rect, Size};
+fn main() -> Result<(), Box<dyn Error>> {
+    // setup terminal
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;

-struct App {
-    size: Rect,
-}
+    // create app and run it
+    let res = run_app(&mut terminal);

-impl App {
-    fn new() -> App {
-        App {
-            size: Rect::default(),
-        }
+    // restore terminal
+    disable_raw_mode()?;
+    execute!(
+        terminal.backend_mut(),
+        LeaveAlternateScreen,
+        DisableMouseCapture
+    )?;
+    terminal.show_cursor()?;
+
+    if let Err(err) = res {
+        println!("{err:?}");
    }
+
+    Ok(())
 }

-enum Event {
-    Input(event::Key),
-}
+fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::Result<()> {
+    loop {
+        terminal.draw(ui)?;

-fn main() {
-    stderrlog::new().verbosity(4).init().unwrap();
-
-    // Terminal initialization
-    let backend = MouseBackend::new().unwrap();
-    let mut terminal = Terminal::new(backend).unwrap();
-
-    // Channels
-    let (tx, rx) = mpsc::channel();
-    let input_tx = tx.clone();
-
-    // Input
-    thread::spawn(move || {
-        let stdin = io::stdin();
-        for c in stdin.keys() {
-            let evt = c.unwrap();
-            input_tx.send(Event::Input(evt)).unwrap();
-            if evt == event::Key::Char('q') {
-                break;
+        if let Event::Key(key) = event::read()? {
+            if key.code == KeyCode::Char('q') {
+                return Ok(());
            }
        }
-    });
-
-    // App
-    let mut app = App::new();
-
-    // First draw call
-    terminal.clear().unwrap();
-    terminal.hide_cursor().unwrap();
-    app.size = terminal.size().unwrap();
-    draw(&mut terminal, &app);
-
-    loop {
-        let size = terminal.size().unwrap();
-        if size != app.size {
-            terminal.resize(size).unwrap();
-            app.size = size;
-        }
-
-        let evt = rx.recv().unwrap();
-        match evt {
-            Event::Input(input) => match input {
-                event::Key::Char('q') => {
-                    break;
-                }
-                _ => {}
-            },
-        }
-        draw(&mut terminal, &app);
    }
-
-    terminal.show_cursor().unwrap();
 }

-fn draw(t: &mut Terminal<MouseBackend>, app: &App) {
-    Group::default()
-        .direction(Direction::Vertical)
-        .sizes(&[Size::Percent(10), Size::Percent(80), Size::Percent(10)])
-        .render(t, &app.size, |t, chunks| {
-            Block::default()
-                .title("Block")
-                .borders(Borders::ALL)
-                .render(t, &chunks[0]);
-            Block::default()
-                .title("Block 2")
-                .borders(Borders::ALL)
-                .render(t, &chunks[2]);
-        });
+#[allow(clippy::too_many_lines)]
+fn ui(frame: &mut Frame) {
+    let vertical = Layout::vertical([
+        Length(4),  // text
+        Length(50), // examples
+        Min(0),     // fills remaining space
+    ]);
+    let [text_area, examples_area, _] = vertical.areas(frame.size());

-    t.draw().unwrap();
+    // title
+    frame.render_widget(
+        Paragraph::new(vec![
+            Line::from("Horizontal Layout Example. Press q to quit".dark_gray()).centered(),
+            Line::from("Each line has 2 constraints, plus Min(0) to fill the remaining space."),
+            Line::from("E.g. the second line of the Len/Min box is [Length(2), Min(2), Min(0)]"),
+            Line::from("Note: constraint labels that don't fit are truncated"),
+        ]),
+        text_area,
+    );
+
+    let example_rows = Layout::vertical([
+        Length(9),
+        Length(9),
+        Length(9),
+        Length(9),
+        Length(9),
+        Min(0), // fills remaining space
+    ])
+    .split(examples_area);
+    let example_areas = example_rows
+        .iter()
+        .flat_map(|area| {
+            Layout::horizontal([
+                Length(14),
+                Length(14),
+                Length(14),
+                Length(14),
+                Length(14),
+                Min(0), // fills remaining space
+            ])
+            .split(*area)
+            .iter()
+            .copied()
+            .take(5) // ignore Min(0)
+            .collect_vec()
+        })
+        .collect_vec();
+
+    // the examples are a cartesian product of the following constraints
+    // e.g. Len/Len, Len/Min, Len/Max, Len/Perc, Len/Ratio, Min/Len, Min/Min, ...
+    let examples = [
+        (
+            "Len",
+            vec![
+                Length(0),
+                Length(2),
+                Length(3),
+                Length(6),
+                Length(10),
+                Length(15),
+            ],
+        ),
+        (
+            "Min",
+            vec![Min(0), Min(2), Min(3), Min(6), Min(10), Min(15)],
+        ),
+        (
+            "Max",
+            vec![Max(0), Max(2), Max(3), Max(6), Max(10), Max(15)],
+        ),
+        (
+            "Perc",
+            vec![
+                Percentage(0),
+                Percentage(25),
+                Percentage(50),
+                Percentage(75),
+                Percentage(100),
+                Percentage(150),
+            ],
+        ),
+        (
+            "Ratio",
+            vec![
+                Ratio(0, 4),
+                Ratio(1, 4),
+                Ratio(2, 4),
+                Ratio(3, 4),
+                Ratio(4, 4),
+                Ratio(6, 4),
+            ],
+        ),
+    ];
+
+    for (i, (a, b)) in examples
+        .iter()
+        .cartesian_product(examples.iter())
+        .enumerate()
+    {
+        let (name_a, examples_a) = a;
+        let (name_b, examples_b) = b;
+        let constraints = examples_a
+            .iter()
+            .copied()
+            .zip(examples_b.iter().copied())
+            .collect_vec();
+        render_example_combination(
+            frame,
+            example_areas[i],
+            &format!("{name_a}/{name_b}"),
+            constraints,
+        );
+    }
+}
+
+/// Renders a single example box
+fn render_example_combination(
+    frame: &mut Frame,
+    area: Rect,
+    title: &str,
+    constraints: Vec<(Constraint, Constraint)>,
+) {
+    let block = Block::bordered()
+        .title(title.gray())
+        .style(Style::reset())
+        .border_style(Style::default().fg(Color::DarkGray));
+    let inner = block.inner(area);
+    frame.render_widget(block, area);
+    let layout = Layout::vertical(vec![Length(1); constraints.len() + 1]).split(inner);
+    for (i, (a, b)) in constraints.into_iter().enumerate() {
+        render_single_example(frame, layout[i], vec![a, b, Min(0)]);
+    }
+    // This is to make it easy to visually see the alignment of the examples
+    // with the constraints.
+    frame.render_widget(Paragraph::new("123456789012"), layout[6]);
+}
+
+/// Renders a single example line
+fn render_single_example(frame: &mut Frame, area: Rect, constraints: Vec<Constraint>) {
+    let red = Paragraph::new(constraint_label(constraints[0])).on_red();
+    let blue = Paragraph::new(constraint_label(constraints[1])).on_blue();
+    let green = Paragraph::new("·".repeat(12)).on_green();
+    let horizontal = Layout::horizontal(constraints);
+    let [r, b, g] = horizontal.areas(area);
+    frame.render_widget(red, r);
+    frame.render_widget(blue, b);
+    frame.render_widget(green, g);
+}
+
+fn constraint_label(constraint: Constraint) -> String {
+    match constraint {
+        Constraint::Ratio(a, b) => format!("{a}:{b}"),
+        Constraint::Length(n)
+        | Constraint::Min(n)
+        | Constraint::Max(n)
+        | Constraint::Percentage(n)
+        | Constraint::Fill(n) => format!("{n}"),
+    }
 }
--- a/examples/line_gauge.rs
+++ b/examples/line_gauge.rs
@@ -0,0 +1,218 @@
+//! # [Ratatui] Line Gauge example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+use std::{io::stdout, time::Duration};
+
+use color_eyre::{config::HookBuilder, Result};
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    buffer::Buffer,
+    crossterm::{
+        event::{self, Event, KeyCode, KeyEventKind},
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+        ExecutableCommand,
+    },
+    layout::{Alignment, Constraint, Layout, Rect},
+    style::{palette::tailwind, Color, Style, Stylize},
+    terminal::Terminal,
+    widgets::{block::Title, Block, Borders, LineGauge, Padding, Paragraph, Widget},
+};
+
+const CUSTOM_LABEL_COLOR: Color = tailwind::SLATE.c200;
+
+#[derive(Debug, Default, Clone, Copy)]
+struct App {
+    state: AppState,
+    progress_columns: u16,
+    progress: f64,
+}
+
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
+enum AppState {
+    #[default]
+    Running,
+    Started,
+    Quitting,
+}
+
+fn main() -> Result<()> {
+    init_error_hooks()?;
+    let terminal = init_terminal()?;
+    App::default().run(terminal)?;
+    restore_terminal()?;
+    Ok(())
+}
+
+impl App {
+    fn run(&mut self, mut terminal: Terminal<impl Backend>) -> Result<()> {
+        while self.state != AppState::Quitting {
+            self.draw(&mut terminal)?;
+            self.handle_events()?;
+            self.update(terminal.size()?.width);
+        }
+        Ok(())
+    }
+
+    fn draw(&self, terminal: &mut Terminal<impl Backend>) -> Result<()> {
+        terminal.draw(|f| f.render_widget(self, f.size()))?;
+        Ok(())
+    }
+
+    fn update(&mut self, terminal_width: u16) {
+        if self.state != AppState::Started {
+            return;
+        }
+
+        self.progress_columns = (self.progress_columns + 1).clamp(0, terminal_width);
+        self.progress = f64::from(self.progress_columns) / f64::from(terminal_width);
+    }
+
+    fn handle_events(&mut self) -> Result<()> {
+        let timeout = Duration::from_secs_f32(1.0 / 20.0);
+        if event::poll(timeout)? {
+            if let Event::Key(key) = event::read()? {
+                if key.kind == KeyEventKind::Press {
+                    match key.code {
+                        KeyCode::Char(' ') | KeyCode::Enter => self.start(),
+                        KeyCode::Char('q') | KeyCode::Esc => self.quit(),
+                        _ => {}
+                    }
+                }
+            }
+        }
+        Ok(())
+    }
+
+    fn start(&mut self) {
+        self.state = AppState::Started;
+    }
+
+    fn quit(&mut self) {
+        self.state = AppState::Quitting;
+    }
+}
+
+impl Widget for &App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        use Constraint::{Length, Min, Ratio};
+        let layout = Layout::vertical([Length(2), Min(0), Length(1)]);
+        let [header_area, main_area, footer_area] = layout.areas(area);
+
+        let layout = Layout::vertical([Ratio(1, 3); 3]);
+        let [gauge1_area, gauge2_area, gauge3_area] = layout.areas(main_area);
+
+        header().render(header_area, buf);
+        footer().render(footer_area, buf);
+
+        self.render_gauge1(gauge1_area, buf);
+        self.render_gauge2(gauge2_area, buf);
+        self.render_gauge3(gauge3_area, buf);
+    }
+}
+
+fn header() -> impl Widget {
+    Paragraph::new("Ratatui Line Gauge Example")
+        .bold()
+        .alignment(Alignment::Center)
+        .fg(CUSTOM_LABEL_COLOR)
+}
+
+fn footer() -> impl Widget {
+    Paragraph::new("Press ENTER / SPACE to start")
+        .alignment(Alignment::Center)
+        .fg(CUSTOM_LABEL_COLOR)
+        .bold()
+}
+
+impl App {
+    fn render_gauge1(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Blue / red only foreground");
+        LineGauge::default()
+            .block(title)
+            .filled_style(Style::default().fg(Color::Blue))
+            .unfilled_style(Style::default().fg(Color::Red))
+            .label("Foreground:")
+            .ratio(self.progress)
+            .render(area, buf);
+    }
+
+    fn render_gauge2(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Blue / red only background");
+        LineGauge::default()
+            .block(title)
+            .filled_style(Style::default().fg(Color::Blue).bg(Color::Blue))
+            .unfilled_style(Style::default().fg(Color::Red).bg(Color::Red))
+            .label("Background:")
+            .ratio(self.progress)
+            .render(area, buf);
+    }
+
+    fn render_gauge3(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Fully styled with background");
+        LineGauge::default()
+            .block(title)
+            .filled_style(
+                Style::default()
+                    .fg(tailwind::BLUE.c400)
+                    .bg(tailwind::BLUE.c600),
+            )
+            .unfilled_style(
+                Style::default()
+                    .fg(tailwind::RED.c400)
+                    .bg(tailwind::RED.c800),
+            )
+            .label("Both:")
+            .ratio(self.progress)
+            .render(area, buf);
+    }
+}
+
+fn title_block(title: &str) -> Block {
+    let title = Title::from(title).alignment(Alignment::Center);
+    Block::default()
+        .title(title)
+        .borders(Borders::NONE)
+        .fg(CUSTOM_LABEL_COLOR)
+        .padding(Padding::vertical(1))
+}
+
+fn init_error_hooks() -> color_eyre::Result<()> {
+    let (panic, error) = HookBuilder::default().into_hooks();
+    let panic = panic.into_panic_hook();
+    let error = error.into_eyre_hook();
+    color_eyre::eyre::set_hook(Box::new(move |e| {
+        let _ = restore_terminal();
+        error(e)
+    }))?;
+    std::panic::set_hook(Box::new(move |info| {
+        let _ = restore_terminal();
+        panic(info);
+    }));
+    Ok(())
+}
+
+fn init_terminal() -> color_eyre::Result<Terminal<impl Backend>> {
+    enable_raw_mode()?;
+    stdout().execute(EnterAlternateScreen)?;
+    let backend = CrosstermBackend::new(stdout());
+    let terminal = Terminal::new(backend)?;
+    Ok(terminal)
+}
+
+fn restore_terminal() -> color_eyre::Result<()> {
+    disable_raw_mode()?;
+    stdout().execute(LeaveAlternateScreen)?;
+    Ok(())
+}
--- a/examples/list.rs
+++ b/examples/list.rs
@@ -1,191 +1,375 @@
-extern crate termion;
-extern crate tui;
+//! # [Ratatui] List example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md

-use std::io;
-use std::thread;
-use std::time;
-use std::sync::mpsc;
+use std::{error::Error, io, io::stdout};

-use termion::event;
-use termion::input::TermRead;
+use color_eyre::config::HookBuilder;
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    buffer::Buffer,
+    crossterm::{
+        event::{self, Event, KeyCode, KeyEventKind},
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+        ExecutableCommand,
+    },
+    layout::{Alignment, Constraint, Layout, Rect},
+    style::{palette::tailwind, Color, Modifier, Style, Stylize},
+    terminal::Terminal,
+    text::Line,
+    widgets::{
+        Block, Borders, HighlightSpacing, List, ListItem, ListState, Padding, Paragraph,
+        StatefulWidget, Widget, Wrap,
+    },
+};

-use tui::Terminal;
-use tui::backend::MouseBackend;
-use tui::widgets::{Block, Borders, Item, List, SelectableList, Widget};
-use tui::layout::{Direction, Group, Rect, Size};
-use tui::style::{Color, Modifier, Style};
+const TODO_HEADER_BG: Color = tailwind::BLUE.c950;
+const NORMAL_ROW_COLOR: Color = tailwind::SLATE.c950;
+const ALT_ROW_COLOR: Color = tailwind::SLATE.c900;
+const SELECTED_STYLE_FG: Color = tailwind::BLUE.c300;
+const TEXT_COLOR: Color = tailwind::SLATE.c200;
+const COMPLETED_TEXT_COLOR: Color = tailwind::GREEN.c500;

-struct App<'a> {
-    size: Rect,
-    items: Vec<&'a str>,
-    selected: usize,
-    events: Vec<(&'a str, &'a str)>,
-    info_style: Style,
-    warning_style: Style,
-    error_style: Style,
-    critical_style: Style,
+#[derive(Copy, Clone)]
+enum Status {
+    Todo,
+    Completed,
 }

-impl<'a> App<'a> {
-    fn new() -> App<'a> {
-        App {
-            size: Rect::default(),
-            items: vec![
-                "Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7", "Item8", "Item9",
-                "Item10", "Item11", "Item12", "Item13", "Item14", "Item15", "Item16", "Item17",
-                "Item18", "Item19", "Item20", "Item21", "Item22", "Item23", "Item24",
-            ],
-            selected: 0,
-            events: vec![
-                ("Event1", "INFO"),
-                ("Event2", "INFO"),
-                ("Event3", "CRITICAL"),
-                ("Event4", "ERROR"),
-                ("Event5", "INFO"),
-                ("Event6", "INFO"),
-                ("Event7", "WARNING"),
-                ("Event8", "INFO"),
-                ("Event9", "INFO"),
-                ("Event10", "INFO"),
-                ("Event11", "CRITICAL"),
-                ("Event12", "INFO"),
-                ("Event13", "INFO"),
-                ("Event14", "INFO"),
-                ("Event15", "INFO"),
-                ("Event16", "INFO"),
-                ("Event17", "ERROR"),
-                ("Event18", "ERROR"),
-                ("Event19", "INFO"),
-                ("Event20", "INFO"),
-                ("Event21", "WARNING"),
-                ("Event22", "INFO"),
-                ("Event23", "INFO"),
-                ("Event24", "WARNING"),
-                ("Event25", "INFO"),
-                ("Event26", "INFO"),
-            ],
-            info_style: Style::default().fg(Color::White),
-            warning_style: Style::default().fg(Color::Yellow),
-            error_style: Style::default().fg(Color::Magenta),
-            critical_style: Style::default().fg(Color::Red),
+struct TodoItem {
+    todo: String,
+    info: String,
+    status: Status,
+}
+
+impl TodoItem {
+    fn new(todo: &str, info: &str, status: Status) -> Self {
+        Self {
+            todo: todo.to_string(),
+            info: info.to_string(),
+            status,
+        }
+    }
+}
+
+struct TodoList {
+    state: ListState,
+    items: Vec<TodoItem>,
+    last_selected: Option<usize>,
+}
+
+/// This struct holds the current state of the app. In particular, it has the `items` field which is
+/// a wrapper around `ListState`. Keeping track of the items state let us render the associated
+/// widget with its state and have access to features such as natural scrolling.
+///
+/// Check the event handling at the bottom to see how to change the state on incoming events.
+/// Check the drawing logic for items on how to specify the highlighting style for selected items.
+struct App {
+    items: TodoList,
+}
+
+fn main() -> Result<(), Box<dyn Error>> {
+    // setup terminal
+    init_error_hooks()?;
+    let terminal = init_terminal()?;
+
+    // create app and run it
+    App::new().run(terminal)?;
+
+    restore_terminal()?;
+
+    Ok(())
+}
+
+fn init_error_hooks() -> color_eyre::Result<()> {
+    let (panic, error) = HookBuilder::default().into_hooks();
+    let panic = panic.into_panic_hook();
+    let error = error.into_eyre_hook();
+    color_eyre::eyre::set_hook(Box::new(move |e| {
+        let _ = restore_terminal();
+        error(e)
+    }))?;
+    std::panic::set_hook(Box::new(move |info| {
+        let _ = restore_terminal();
+        panic(info);
+    }));
+    Ok(())
+}
+
+fn init_terminal() -> color_eyre::Result<Terminal<impl Backend>> {
+    enable_raw_mode()?;
+    stdout().execute(EnterAlternateScreen)?;
+    let backend = CrosstermBackend::new(stdout());
+    let terminal = Terminal::new(backend)?;
+    Ok(terminal)
+}
+
+fn restore_terminal() -> color_eyre::Result<()> {
+    disable_raw_mode()?;
+    stdout().execute(LeaveAlternateScreen)?;
+    Ok(())
+}
+
+impl App {
+    fn new() -> Self {
+        Self {
+            items: TodoList::with_items(&[
+                ("Rewrite everything with Rust!", "I can't hold my inner voice. He tells me to rewrite the complete universe with Rust", Status::Todo),
+                ("Rewrite all of your tui apps with Ratatui", "Yes, you heard that right. Go and replace your tui with Ratatui.", Status::Completed),
+                ("Pet your cat", "Minnak loves to be pet by you! Don't forget to pet and give some treats!", Status::Todo),
+                ("Walk with your dog", "Max is bored, go walk with him!", Status::Todo),
+                ("Pay the bills", "Pay the train subscription!!!", Status::Completed),
+                ("Refactor list example", "If you see this info that means I completed this task!", Status::Completed),
+            ]),
        }
    }

-    fn advance(&mut self) {
-        let event = self.events.pop().unwrap();
-        self.events.insert(0, event);
-    }
-}
-
-enum Event {
-    Input(event::Key),
-    Tick,
-}
-
-fn main() {
-    // Terminal initialization
-    let backend = MouseBackend::new().unwrap();
-    let mut terminal = Terminal::new(backend).unwrap();
-
-    // Channels
-    let (tx, rx) = mpsc::channel();
-    let input_tx = tx.clone();
-    let clock_tx = tx.clone();
-
-    // Input
-    thread::spawn(move || {
-        let stdin = io::stdin();
-        for c in stdin.keys() {
-            let evt = c.unwrap();
-            input_tx.send(Event::Input(evt)).unwrap();
-            if evt == event::Key::Char('q') {
-                break;
+    /// Changes the status of the selected list item
+    fn change_status(&mut self) {
+        if let Some(i) = self.items.state.selected() {
+            self.items.items[i].status = match self.items.items[i].status {
+                Status::Completed => Status::Todo,
+                Status::Todo => Status::Completed,
            }
        }
-    });
+    }

-    // Tick
-    thread::spawn(move || loop {
-        clock_tx.send(Event::Tick).unwrap();
-        thread::sleep(time::Duration::from_millis(500));
-    });
+    fn go_top(&mut self) {
+        self.items.state.select(Some(0));
+    }

-    // App
-    let mut app = App::new();
+    fn go_bottom(&mut self) {
+        self.items.state.select(Some(self.items.items.len() - 1));
+    }
+}

-    // First draw call
-    terminal.clear().unwrap();
-    terminal.hide_cursor().unwrap();
-    app.size = terminal.size().unwrap();
-    draw(&mut terminal, &app);
+impl App {
+    fn run(&mut self, mut terminal: Terminal<impl Backend>) -> io::Result<()> {
+        loop {
+            self.draw(&mut terminal)?;

-    loop {
-        let size = terminal.size().unwrap();
-        if size != app.size {
-            terminal.resize(size).unwrap();
-            app.size = size;
-        }
-
-        let evt = rx.recv().unwrap();
-        match evt {
-            Event::Input(input) => match input {
-                event::Key::Char('q') => {
-                    break;
-                }
-                event::Key::Down => {
-                    app.selected += 1;
-                    if app.selected > app.items.len() - 1 {
-                        app.selected = 0;
+            if let Event::Key(key) = event::read()? {
+                if key.kind == KeyEventKind::Press {
+                    match key.code {
+                        KeyCode::Char('q') | KeyCode::Esc => return Ok(()),
+                        KeyCode::Char('h') | KeyCode::Left => self.items.unselect(),
+                        KeyCode::Char('j') | KeyCode::Down => self.items.next(),
+                        KeyCode::Char('k') | KeyCode::Up => self.items.previous(),
+                        KeyCode::Char('l') | KeyCode::Right | KeyCode::Enter => {
+                            self.change_status();
+                        }
+                        KeyCode::Char('g') => self.go_top(),
+                        KeyCode::Char('G') => self.go_bottom(),
+                        _ => {}
                    }
                }
-                event::Key::Up => if app.selected > 0 {
-                    app.selected -= 1;
-                } else {
-                    app.selected = app.items.len() - 1;
-                },
-                _ => {}
-            },
-            Event::Tick => {
-                app.advance();
            }
        }
-        draw(&mut terminal, &app);
    }

-    terminal.show_cursor().unwrap();
+    fn draw(&mut self, terminal: &mut Terminal<impl Backend>) -> io::Result<()> {
+        terminal.draw(|f| f.render_widget(self, f.size()))?;
+        Ok(())
+    }
 }

-fn draw(t: &mut Terminal<MouseBackend>, app: &App) {
-    Group::default()
-        .direction(Direction::Horizontal)
-        .sizes(&[Size::Percent(50), Size::Percent(50)])
-        .render(t, &app.size, |t, chunks| {
-            let style = Style::default().fg(Color::Black).bg(Color::White);
-            SelectableList::default()
-                .block(Block::default().borders(Borders::ALL).title("List"))
-                .items(&app.items)
-                .select(app.selected)
-                .style(style)
-                .highlight_style(style.clone().fg(Color::LightGreen).modifier(Modifier::Bold))
-                .highlight_symbol(">")
-                .render(t, &chunks[0]);
-            {
-                let events = app.events.iter().map(|&(evt, level)| {
-                    Item::StyledData(
-                        format!("{}: {}", level, evt),
-                        match level {
-                            "ERROR" => &app.error_style,
-                            "CRITICAL" => &app.critical_style,
-                            "WARNING" => &app.warning_style,
-                            _ => &app.info_style,
-                        },
-                    )
-                });
-                List::new(events)
-                    .block(Block::default().borders(Borders::ALL).title("List"))
-                    .render(t, &chunks[1]);
+impl Widget for &mut App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        // Create a space for header, todo list and the footer.
+        let vertical = Layout::vertical([
+            Constraint::Length(2),
+            Constraint::Min(0),
+            Constraint::Length(2),
+        ]);
+        let [header_area, rest_area, footer_area] = vertical.areas(area);
+
+        // Create two chunks with equal vertical screen space. One for the list and the other for
+        // the info block.
+        let vertical = Layout::vertical([Constraint::Percentage(50), Constraint::Percentage(50)]);
+        let [upper_item_list_area, lower_item_list_area] = vertical.areas(rest_area);
+
+        render_title(header_area, buf);
+        self.render_todo(upper_item_list_area, buf);
+        self.render_info(lower_item_list_area, buf);
+        render_footer(footer_area, buf);
+    }
+}
+
+impl App {
+    fn render_todo(&mut self, area: Rect, buf: &mut Buffer) {
+        // We create two blocks, one is for the header (outer) and the other is for list (inner).
+        let outer_block = Block::new()
+            .borders(Borders::NONE)
+            .title_alignment(Alignment::Center)
+            .title("TODO List")
+            .fg(TEXT_COLOR)
+            .bg(TODO_HEADER_BG);
+        let inner_block = Block::new()
+            .borders(Borders::NONE)
+            .fg(TEXT_COLOR)
+            .bg(NORMAL_ROW_COLOR);
+
+        // We get the inner area from outer_block. We'll use this area later to render the table.
+        let outer_area = area;
+        let inner_area = outer_block.inner(outer_area);
+
+        // We can render the header in outer_area.
+        outer_block.render(outer_area, buf);
+
+        // Iterate through all elements in the `items` and stylize them.
+        let items: Vec<ListItem> = self
+            .items
+            .items
+            .iter()
+            .enumerate()
+            .map(|(i, todo_item)| todo_item.to_list_item(i))
+            .collect();
+
+        // Create a List from all list items and highlight the currently selected one
+        let items = List::new(items)
+            .block(inner_block)
+            .highlight_style(
+                Style::default()
+                    .add_modifier(Modifier::BOLD)
+                    .add_modifier(Modifier::REVERSED)
+                    .fg(SELECTED_STYLE_FG),
+            )
+            .highlight_symbol(">")
+            .highlight_spacing(HighlightSpacing::Always);
+
+        // We can now render the item list
+        // (look careful we are using StatefulWidget's render.)
+        // ratatui::widgets::StatefulWidget::render as stateful_render
+        StatefulWidget::render(items, inner_area, buf, &mut self.items.state);
+    }
+
+    fn render_info(&self, area: Rect, buf: &mut Buffer) {
+        // We get the info depending on the item's state.
+        let info = if let Some(i) = self.items.state.selected() {
+            match self.items.items[i].status {
+                Status::Completed => format!("✓ DONE: {}", self.items.items[i].info),
+                Status::Todo => format!("TODO: {}", self.items.items[i].info),
            }
-        });
+        } else {
+            "Nothing to see here...".to_string()
+        };

-    t.draw().unwrap();
+        // We show the list item's info under the list in this paragraph
+        let outer_info_block = Block::new()
+            .borders(Borders::NONE)
+            .title_alignment(Alignment::Center)
+            .title("TODO Info")
+            .fg(TEXT_COLOR)
+            .bg(TODO_HEADER_BG);
+        let inner_info_block = Block::new()
+            .borders(Borders::NONE)
+            .padding(Padding::horizontal(1))
+            .bg(NORMAL_ROW_COLOR);
+
+        // This is a similar process to what we did for list. outer_info_area will be used for
+        // header inner_info_area will be used for the list info.
+        let outer_info_area = area;
+        let inner_info_area = outer_info_block.inner(outer_info_area);
+
+        // We can render the header. Inner info will be rendered later
+        outer_info_block.render(outer_info_area, buf);
+
+        let info_paragraph = Paragraph::new(info)
+            .block(inner_info_block)
+            .fg(TEXT_COLOR)
+            .wrap(Wrap { trim: false });
+
+        // We can now render the item info
+        info_paragraph.render(inner_info_area, buf);
+    }
+}
+
+fn render_title(area: Rect, buf: &mut Buffer) {
+    Paragraph::new("Ratatui List Example")
+        .bold()
+        .centered()
+        .render(area, buf);
+}
+
+fn render_footer(area: Rect, buf: &mut Buffer) {
+    Paragraph::new("\nUse ↓↑ to move, ← to unselect, → to change status, g/G to go top/bottom.")
+        .centered()
+        .render(area, buf);
+}
+
+impl TodoList {
+    fn with_items(items: &[(&str, &str, Status)]) -> Self {
+        Self {
+            state: ListState::default(),
+            items: items
+                .iter()
+                .map(|(todo, info, status)| TodoItem::new(todo, info, *status))
+                .collect(),
+            last_selected: None,
+        }
+    }
+
+    fn next(&mut self) {
+        let i = match self.state.selected() {
+            Some(i) => {
+                if i >= self.items.len() - 1 {
+                    0
+                } else {
+                    i + 1
+                }
+            }
+            None => self.last_selected.unwrap_or(0),
+        };
+        self.state.select(Some(i));
+    }
+
+    fn previous(&mut self) {
+        let i = match self.state.selected() {
+            Some(i) => {
+                if i == 0 {
+                    self.items.len() - 1
+                } else {
+                    i - 1
+                }
+            }
+            None => self.last_selected.unwrap_or(0),
+        };
+        self.state.select(Some(i));
+    }
+
+    fn unselect(&mut self) {
+        let offset = self.state.offset();
+        self.last_selected = self.state.selected();
+        self.state.select(None);
+        *self.state.offset_mut() = offset;
+    }
+}
+
+impl TodoItem {
+    fn to_list_item(&self, index: usize) -> ListItem {
+        let bg_color = match index % 2 {
+            0 => NORMAL_ROW_COLOR,
+            _ => ALT_ROW_COLOR,
+        };
+        let line = match self.status {
+            Status::Todo => Line::styled(format!(" ☐ {}", self.todo), TEXT_COLOR),
+            Status::Completed => Line::styled(
+                format!(" ✓ {}", self.todo),
+                (COMPLETED_TEXT_COLOR, bg_color),
+            ),
+        };
+
+        ListItem::new(line).bg(bg_color)
+    }
 }
--- a/examples/minimal.rs
+++ b/examples/minimal.rs
@@ -0,0 +1,48 @@
+//! # [Ratatui] Minimal example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+use ratatui::{
+    backend::CrosstermBackend,
+    crossterm::{
+        event::{self, Event, KeyCode, KeyEventKind},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    text::Text,
+    Terminal,
+};
+
+/// This is a bare minimum example. There are many approaches to running an application loop, so
+/// this is not meant to be prescriptive. See the [examples] folder for more complete examples.
+/// In particular, the [hello-world] example is a good starting point.
+///
+/// [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+/// [hello-world]: https://github.com/ratatui-org/ratatui/blob/main/examples/hello_world.rs
+fn main() -> Result<(), Box<dyn std::error::Error>> {
+    let mut terminal = Terminal::new(CrosstermBackend::new(std::io::stdout()))?;
+    enable_raw_mode()?;
+    execute!(terminal.backend_mut(), EnterAlternateScreen)?;
+    loop {
+        terminal.draw(|frame| frame.render_widget(Text::raw("Hello World!"), frame.size()))?;
+        if let Event::Key(key) = event::read()? {
+            if key.kind == KeyEventKind::Press && key.code == KeyCode::Char('q') {
+                break;
+            }
+        }
+    }
+    disable_raw_mode()?;
+    execute!(terminal.backend_mut(), LeaveAlternateScreen)?;
+    Ok(())
+}
--- a/examples/modifiers.rs
+++ b/examples/modifiers.rs
@@ -0,0 +1,133 @@
+//! # [Ratatui] Modifiers example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+// This example is useful for testing how your terminal emulator handles different modifiers.
+// It will render a grid of combinations of foreground and background colors with all
+// modifiers applied to them.
+
+use std::{
+    error::Error,
+    io::{self, Stdout},
+    iter::once,
+    result,
+    time::Duration,
+};
+
+use itertools::Itertools;
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    crossterm::{
+        event::{self, Event, KeyCode},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    layout::{Constraint, Layout},
+    style::{Color, Modifier, Style, Stylize},
+    terminal::{Frame, Terminal},
+    text::Line,
+    widgets::Paragraph,
+};
+
+type Result<T> = result::Result<T, Box<dyn Error>>;
+
+fn main() -> Result<()> {
+    let mut terminal = setup_terminal()?;
+    let res = run_app(&mut terminal);
+    restore_terminal(terminal)?;
+    if let Err(err) = res {
+        eprintln!("{err:?}");
+    }
+    Ok(())
+}
+
+fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::Result<()> {
+    loop {
+        terminal.draw(ui)?;
+
+        if event::poll(Duration::from_millis(250))? {
+            if let Event::Key(key) = event::read()? {
+                if key.code == KeyCode::Char('q') {
+                    return Ok(());
+                }
+            }
+        }
+    }
+}
+
+fn ui(frame: &mut Frame) {
+    let vertical = Layout::vertical([Constraint::Length(1), Constraint::Min(0)]);
+    let [text_area, main_area] = vertical.areas(frame.size());
+    frame.render_widget(
+        Paragraph::new("Note: not all terminals support all modifiers")
+            .style(Style::default().fg(Color::Red).add_modifier(Modifier::BOLD)),
+        text_area,
+    );
+    let layout = Layout::vertical([Constraint::Length(1); 50])
+        .split(main_area)
+        .iter()
+        .flat_map(|area| {
+            Layout::horizontal([Constraint::Percentage(20); 5])
+                .split(*area)
+                .to_vec()
+        })
+        .collect_vec();
+
+    let colors = [
+        Color::Black,
+        Color::DarkGray,
+        Color::Gray,
+        Color::White,
+        Color::Red,
+    ];
+    let all_modifiers = once(Modifier::empty())
+        .chain(Modifier::all().iter())
+        .collect_vec();
+    let mut index = 0;
+    for bg in &colors {
+        for fg in &colors {
+            for modifier in &all_modifiers {
+                let modifier_name = format!("{modifier:11?}");
+                let padding = (" ").repeat(12 - modifier_name.len());
+                let paragraph = Paragraph::new(Line::from(vec![
+                    modifier_name.fg(*fg).bg(*bg).add_modifier(*modifier),
+                    padding.fg(*fg).bg(*bg).add_modifier(*modifier),
+                    // This is a hack to work around a bug in VHS which is used for rendering the
+                    // examples to gifs. The bug is that the background color of a paragraph seems
+                    // to bleed into the next character.
+                    ".".black().on_black(),
+                ]));
+                frame.render_widget(paragraph, layout[index]);
+                index += 1;
+            }
+        }
+    }
+}
+
+fn setup_terminal() -> Result<Terminal<CrosstermBackend<Stdout>>> {
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;
+    terminal.hide_cursor()?;
+    Ok(terminal)
+}
+
+fn restore_terminal(mut terminal: Terminal<CrosstermBackend<Stdout>>) -> Result<()> {
+    disable_raw_mode()?;
+    execute!(terminal.backend_mut(), LeaveAlternateScreen)?;
+    terminal.show_cursor()?;
+    Ok(())
+}
--- a/examples/panic.rs
+++ b/examples/panic.rs
@@ -0,0 +1,152 @@
+//! # [Ratatui] Panic Hook example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+//! How to use a panic hook to reset the terminal before printing the panic to
+//! the terminal.
+//!
+//! When exiting normally or when handling `Result::Err`, we can reset the
+//! terminal manually at the end of `main` just before we print the error.
+//!
+//! Because a panic interrupts the normal control flow, manually resetting the
+//! terminal at the end of `main` won't do us any good. Instead, we need to
+//! make sure to set up a panic hook that first resets the terminal before
+//! handling the panic. This both reuses the standard panic hook to ensure a
+//! consistent panic handling UX and properly resets the terminal to not
+//! distort the output.
+//!
+//! That's why this example is set up to show both situations, with and without
+//! the chained panic hook, to see the difference.
+
+use std::{error::Error, io};
+
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    crossterm::{
+        event::{self, Event, KeyCode},
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    terminal::{Frame, Terminal},
+    text::Line,
+    widgets::{Block, Paragraph},
+};
+
+type Result<T> = std::result::Result<T, Box<dyn Error>>;
+
+#[derive(Default)]
+struct App {
+    hook_enabled: bool,
+}
+
+impl App {
+    fn chain_hook(&mut self) {
+        let original_hook = std::panic::take_hook();
+
+        std::panic::set_hook(Box::new(move |panic| {
+            reset_terminal().unwrap();
+            original_hook(panic);
+        }));
+
+        self.hook_enabled = true;
+    }
+}
+
+fn main() -> Result<()> {
+    let mut terminal = init_terminal()?;
+
+    let mut app = App::default();
+    let res = run_tui(&mut terminal, &mut app);
+
+    reset_terminal()?;
+
+    if let Err(err) = res {
+        println!("{err:?}");
+    }
+
+    Ok(())
+}
+
+/// Initializes the terminal.
+fn init_terminal() -> Result<Terminal<CrosstermBackend<io::Stdout>>> {
+    crossterm::execute!(io::stdout(), EnterAlternateScreen)?;
+    enable_raw_mode()?;
+
+    let backend = CrosstermBackend::new(io::stdout());
+
+    let mut terminal = Terminal::new(backend)?;
+    terminal.hide_cursor()?;
+
+    Ok(terminal)
+}
+
+/// Resets the terminal.
+fn reset_terminal() -> Result<()> {
+    disable_raw_mode()?;
+    crossterm::execute!(io::stdout(), LeaveAlternateScreen)?;
+
+    Ok(())
+}
+
+/// Runs the TUI loop.
+fn run_tui<B: Backend>(terminal: &mut Terminal<B>, app: &mut App) -> io::Result<()> {
+    loop {
+        terminal.draw(|f| ui(f, app))?;
+
+        if let Event::Key(key) = event::read()? {
+            match key.code {
+                KeyCode::Char('p') => {
+                    panic!("intentional demo panic");
+                }
+
+                KeyCode::Char('e') => {
+                    app.chain_hook();
+                }
+
+                _ => {
+                    return Ok(());
+                }
+            }
+        }
+    }
+}
+
+/// Render the TUI.
+fn ui(f: &mut Frame, app: &App) {
+    let text = vec![
+        if app.hook_enabled {
+            Line::from("HOOK IS CURRENTLY **ENABLED**")
+        } else {
+            Line::from("HOOK IS CURRENTLY **DISABLED**")
+        },
+        Line::from(""),
+        Line::from("press `p` to panic"),
+        Line::from("press `e` to enable the terminal-resetting panic hook"),
+        Line::from("press any other key to quit without panic"),
+        Line::from(""),
+        Line::from("when you panic without the chained hook,"),
+        Line::from("you will likely have to reset your terminal afterwards"),
+        Line::from("with the `reset` command"),
+        Line::from(""),
+        Line::from("with the chained panic hook enabled,"),
+        Line::from("you should see the panic report as you would without ratatui"),
+        Line::from(""),
+        Line::from("try first without the panic handler to see the difference"),
+    ];
+
+    let paragraph = Paragraph::new(text)
+        .block(Block::bordered().title("Panic Handler Demo"))
+        .centered();
+
+    f.render_widget(paragraph, f.size());
+}
--- a/examples/paragraph.rs
+++ b/examples/paragraph.rs
@@ -1,66 +1,167 @@
-extern crate termion;
-extern crate tui;
+//! # [Ratatui] Paragraph example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md

-use std::io;
-use termion::event;
-use termion::input::TermRead;
+use std::{
+    error::Error,
+    io,
+    time::{Duration, Instant},
+};

-use tui::Terminal;
-use tui::backend::MouseBackend;
-use tui::widgets::{Block, Paragraph, Widget};
-use tui::layout::{Direction, Group, Rect, Size};
-use tui::style::{Color, Style};
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    crossterm::{
+        event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    layout::{Constraint, Layout},
+    style::{Color, Modifier, Style, Stylize},
+    terminal::{Frame, Terminal},
+    text::{Line, Masked, Span},
+    widgets::{Block, Paragraph, Wrap},
+};

-fn main() {
-    let mut terminal = Terminal::new(MouseBackend::new().unwrap()).unwrap();
-    let stdin = io::stdin();
-    terminal.clear().unwrap();
-    terminal.hide_cursor().unwrap();
+struct App {
+    scroll: u16,
+}

-    let mut term_size = terminal.size().unwrap();
-    draw(&mut terminal, &term_size);
+impl App {
+    const fn new() -> Self {
+        Self { scroll: 0 }
+    }

-    for c in stdin.keys() {
-        let size = terminal.size().unwrap();
-        if size != term_size {
-            terminal.resize(size).unwrap();
-            term_size = size;
+    fn on_tick(&mut self) {
+        self.scroll += 1;
+        self.scroll %= 10;
+    }
+}
+
+fn main() -> Result<(), Box<dyn Error>> {
+    // setup terminal
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;
+
+    // create app and run it
+    let tick_rate = Duration::from_millis(250);
+    let app = App::new();
+    let res = run_app(&mut terminal, app, tick_rate);
+
+    // restore terminal
+    disable_raw_mode()?;
+    execute!(
+        terminal.backend_mut(),
+        LeaveAlternateScreen,
+        DisableMouseCapture
+    )?;
+    terminal.show_cursor()?;
+
+    if let Err(err) = res {
+        println!("{err:?}");
+    }
+
+    Ok(())
+}
+
+fn run_app<B: Backend>(
+    terminal: &mut Terminal<B>,
+    mut app: App,
+    tick_rate: Duration,
+) -> io::Result<()> {
+    let mut last_tick = Instant::now();
+    loop {
+        terminal.draw(|f| ui(f, &app))?;
+
+        let timeout = tick_rate.saturating_sub(last_tick.elapsed());
+        if crossterm::event::poll(timeout)? {
+            if let Event::Key(key) = event::read()? {
+                if key.code == KeyCode::Char('q') {
+                    return Ok(());
+                }
+            }
        }
-
-        draw(&mut terminal, &term_size);
-        let evt = c.unwrap();
-        if evt == event::Key::Char('q') {
-            break;
+        if last_tick.elapsed() >= tick_rate {
+            app.on_tick();
+            last_tick = Instant::now();
        }
    }
-    terminal.show_cursor().unwrap();
 }

-fn draw(t: &mut Terminal<MouseBackend>, size: &Rect) {
-    Block::default()
-        .style(Style::default().bg(Color::White))
-        .render(t, size);
+fn ui(f: &mut Frame, app: &App) {
+    let size = f.size();

-    Group::default()
-        .direction(Direction::Vertical)
-        .margin(5)
-        .sizes(&[Size::Percent(100)])
-        .render(t, size, |t, chunks| {
-            Group::default()
-                .direction(Direction::Horizontal)
-                .sizes(&[Size::Percent(100)])
-                .render(t, &chunks[0], |t, chunks| {
-                    Paragraph::default()
-                        .text(
-                            "This is a line\n{fg=red This is a line}\n{bg=red This is a \
-                             line}\n{mod=italic This is a line}\n{mod=bold This is a \
-                             line}\n{mod=crossed_out This is a line}\n{mod=invert This is a \
-                             line}\n{mod=underline This is a \
-                             line}\n{bg=green;fg=yellow;mod=italic This is a line}\n",
-                        )
-                        .render(t, &chunks[0]);
-                });
-        });
+    // Words made "loooong" to demonstrate line breaking.
+    let s = "Veeeeeeeeeeeeeeeery    loooooooooooooooooong   striiiiiiiiiiiiiiiiiiiiiiiiiing.   ";
+    let mut long_line = s.repeat(usize::from(size.width) / s.len() + 4);
+    long_line.push('\n');

-    t.draw().unwrap();
+    let block = Block::new().black();
+    f.render_widget(block, size);
+
+    let layout = Layout::vertical([Constraint::Ratio(1, 4); 4]).split(size);
+
+    let text = vec![
+        Line::from("This is a line "),
+        Line::from("This is a line   ".red()),
+        Line::from("This is a line".on_blue()),
+        Line::from("This is a longer line".crossed_out()),
+        Line::from(long_line.on_green()),
+        Line::from("This is a line".green().italic()),
+        Line::from(vec![
+            "Masked text: ".into(),
+            Span::styled(
+                Masked::new("password", '*'),
+                Style::default().fg(Color::Red),
+            ),
+        ]),
+    ];
+
+    let create_block = |title| {
+        Block::bordered()
+            .style(Style::default().fg(Color::Gray))
+            .title(Span::styled(
+                title,
+                Style::default().add_modifier(Modifier::BOLD),
+            ))
+    };
+
+    let paragraph = Paragraph::new(text.clone())
+        .style(Style::default().fg(Color::Gray))
+        .block(create_block("Default alignment (Left), no wrap"));
+    f.render_widget(paragraph, layout[0]);
+
+    let paragraph = Paragraph::new(text.clone())
+        .style(Style::default().fg(Color::Gray))
+        .block(create_block("Default alignment (Left), with wrap"))
+        .wrap(Wrap { trim: true });
+    f.render_widget(paragraph, layout[1]);
+
+    let paragraph = Paragraph::new(text.clone())
+        .style(Style::default().fg(Color::Gray))
+        .block(create_block("Right alignment, with wrap"))
+        .right_aligned()
+        .wrap(Wrap { trim: true });
+    f.render_widget(paragraph, layout[2]);
+
+    let paragraph = Paragraph::new(text)
+        .style(Style::default().fg(Color::Gray))
+        .block(create_block("Center alignment, with wrap, with scroll"))
+        .centered()
+        .wrap(Wrap { trim: true })
+        .scroll((app.scroll, 0));
+    f.render_widget(paragraph, layout[3]);
 }
--- a/examples/popup.rs
+++ b/examples/popup.rs
@@ -0,0 +1,130 @@
+//! # [Ratatui] Popup example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+// See also https://github.com/joshka/tui-popup and
+// https://github.com/sephiroth74/tui-confirm-dialog
+
+use std::{error::Error, io};
+
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    crossterm::{
+        event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEventKind},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    layout::{Constraint, Layout, Rect},
+    style::Stylize,
+    terminal::{Frame, Terminal},
+    widgets::{Block, Clear, Paragraph, Wrap},
+};
+
+struct App {
+    show_popup: bool,
+}
+
+impl App {
+    const fn new() -> Self {
+        Self { show_popup: false }
+    }
+}
+
+fn main() -> Result<(), Box<dyn Error>> {
+    // setup terminal
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;
+
+    // create app and run it
+    let app = App::new();
+    let res = run_app(&mut terminal, app);
+
+    // restore terminal
+    disable_raw_mode()?;
+    execute!(
+        terminal.backend_mut(),
+        LeaveAlternateScreen,
+        DisableMouseCapture
+    )?;
+    terminal.show_cursor()?;
+
+    if let Err(err) = res {
+        println!("{err:?}");
+    }
+
+    Ok(())
+}
+
+fn run_app<B: Backend>(terminal: &mut Terminal<B>, mut app: App) -> io::Result<()> {
+    loop {
+        terminal.draw(|f| ui(f, &app))?;
+
+        if let Event::Key(key) = event::read()? {
+            if key.kind == KeyEventKind::Press {
+                match key.code {
+                    KeyCode::Char('q') => return Ok(()),
+                    KeyCode::Char('p') => app.show_popup = !app.show_popup,
+                    _ => {}
+                }
+            }
+        }
+    }
+}
+
+fn ui(f: &mut Frame, app: &App) {
+    let area = f.size();
+
+    let vertical = Layout::vertical([Constraint::Percentage(20), Constraint::Percentage(80)]);
+    let [instructions, content] = vertical.areas(area);
+
+    let text = if app.show_popup {
+        "Press p to close the popup"
+    } else {
+        "Press p to show the popup"
+    };
+    let paragraph = Paragraph::new(text.slow_blink())
+        .centered()
+        .wrap(Wrap { trim: true });
+    f.render_widget(paragraph, instructions);
+
+    let block = Block::bordered().title("Content").on_blue();
+    f.render_widget(block, content);
+
+    if app.show_popup {
+        let block = Block::bordered().title("Popup");
+        let area = centered_rect(60, 20, area);
+        f.render_widget(Clear, area); //this clears out the background
+        f.render_widget(block, area);
+    }
+}
+
+/// helper function to create a centered rect using up certain percentage of the available rect `r`
+fn centered_rect(percent_x: u16, percent_y: u16, r: Rect) -> Rect {
+    let popup_layout = Layout::vertical([
+        Constraint::Percentage((100 - percent_y) / 2),
+        Constraint::Percentage(percent_y),
+        Constraint::Percentage((100 - percent_y) / 2),
+    ])
+    .split(r);
+
+    Layout::horizontal([
+        Constraint::Percentage((100 - percent_x) / 2),
+        Constraint::Percentage(percent_x),
+        Constraint::Percentage((100 - percent_x) / 2),
+    ])
+    .split(popup_layout[1])[1]
+}
--- a/examples/ratatui-logo.rs
+++ b/examples/ratatui-logo.rs
@@ -0,0 +1,88 @@
+//! # [Ratatui] Logo example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+use std::{
+    io::{self, stdout},
+    thread::sleep,
+    time::Duration,
+};
+
+use indoc::indoc;
+use itertools::izip;
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    crossterm::terminal::{disable_raw_mode, enable_raw_mode},
+    terminal::{Terminal, Viewport},
+    widgets::Paragraph,
+    TerminalOptions,
+};
+
+/// A fun example of using half block characters to draw a logo
+#[allow(clippy::many_single_char_names)]
+fn logo() -> String {
+    let r = indoc! {"
+            ▄▄▄
+            █▄▄▀
+            █  █
+        "};
+    let a = indoc! {"
+             ▄▄
+            █▄▄█
+            █  █
+        "};
+    let t = indoc! {"
+            ▄▄▄
+             █
+             █
+        "};
+    let u = indoc! {"
+            ▄  ▄
+            █  █
+            ▀▄▄▀
+        "};
+    let i = indoc! {"
+            ▄
+            █
+            █
+        "};
+    izip!(r.lines(), a.lines(), t.lines(), u.lines(), i.lines())
+        .map(|(r, a, t, u, i)| format!("{r:5}{a:5}{t:4}{a:5}{t:4}{u:5}{i:5}"))
+        .collect::<Vec<_>>()
+        .join("\n")
+}
+
+fn main() -> io::Result<()> {
+    let mut terminal = init()?;
+    terminal.draw(|frame| {
+        frame.render_widget(Paragraph::new(logo()), frame.size());
+    })?;
+    sleep(Duration::from_secs(5));
+    restore()?;
+    println!();
+    Ok(())
+}
+
+fn init() -> io::Result<Terminal<impl Backend>> {
+    enable_raw_mode()?;
+    let options = TerminalOptions {
+        viewport: Viewport::Inline(3),
+    };
+    Terminal::with_options(CrosstermBackend::new(stdout()), options)
+}
+
+fn restore() -> io::Result<()> {
+    disable_raw_mode()?;
+    Ok(())
+}
--- a/examples/rustbox.rs
+++ b/examples/rustbox.rs
@@ -1,51 +0,0 @@
-extern crate rustbox;
-extern crate tui;
-
-use std::error::Error;
-use rustbox::Key;
-
-use tui::Terminal;
-use tui::backend::RustboxBackend;
-use tui::widgets::{Block, Borders, Paragraph, Widget};
-use tui::layout::{Direction, Group, Size};
-use tui::style::{Color, Modifier, Style};
-
-fn main() {
-    let mut terminal = Terminal::new(RustboxBackend::new().unwrap()).unwrap();
-    terminal.clear().unwrap();
-    terminal.hide_cursor().unwrap();
-    draw(&mut terminal);
-    loop {
-        match terminal.backend().rustbox().poll_event(false) {
-            Ok(rustbox::Event::KeyEvent(key)) => if key == Key::Char('q') {
-                break;
-            },
-            Err(e) => panic!("{}", e.description()),
-            _ => {}
-        };
-        draw(&mut terminal);
-    }
-    terminal.show_cursor().unwrap();
-}
-
-fn draw(t: &mut Terminal<RustboxBackend>) {
-    let size = t.size().unwrap();
-
-    Group::default()
-        .direction(Direction::Vertical)
-        .sizes(&[Size::Percent(100)])
-        .render(t, &size, |t, chunks| {
-            Paragraph::default()
-                .block(
-                    Block::default()
-                        .title("Rustbox backend")
-                        .title_style(Style::default().fg(Color::Yellow).modifier(Modifier::Bold))
-                        .borders(Borders::ALL)
-                        .border_style(Style::default().fg(Color::Magenta)),
-                )
-                .text("It {yellow works}!")
-                .render(t, &chunks[0]);
-        });
-
-    t.draw().unwrap();
-}
--- a/examples/scrollbar.rs
+++ b/examples/scrollbar.rs
@@ -0,0 +1,238 @@
+//! # [Ratatui] Scrollbar example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+#![warn(clippy::pedantic)]
+
+use std::{
+    error::Error,
+    io,
+    time::{Duration, Instant},
+};
+
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    crossterm::{
+        event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    layout::{Alignment, Constraint, Layout, Margin},
+    style::{Color, Style, Stylize},
+    symbols::scrollbar,
+    terminal::{Frame, Terminal},
+    text::{Line, Masked, Span},
+    widgets::{Block, Paragraph, Scrollbar, ScrollbarOrientation, ScrollbarState},
+};
+
+#[derive(Default)]
+struct App {
+    pub vertical_scroll_state: ScrollbarState,
+    pub horizontal_scroll_state: ScrollbarState,
+    pub vertical_scroll: usize,
+    pub horizontal_scroll: usize,
+}
+
+fn main() -> Result<(), Box<dyn Error>> {
+    // setup terminal
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;
+
+    // create app and run it
+    let tick_rate = Duration::from_millis(250);
+    let app = App::default();
+    let res = run_app(&mut terminal, app, tick_rate);
+
+    // restore terminal
+    disable_raw_mode()?;
+    execute!(
+        terminal.backend_mut(),
+        LeaveAlternateScreen,
+        DisableMouseCapture
+    )?;
+    terminal.show_cursor()?;
+
+    if let Err(err) = res {
+        println!("{err:?}");
+    }
+
+    Ok(())
+}
+
+fn run_app<B: Backend>(
+    terminal: &mut Terminal<B>,
+    mut app: App,
+    tick_rate: Duration,
+) -> io::Result<()> {
+    let mut last_tick = Instant::now();
+    loop {
+        terminal.draw(|f| ui(f, &mut app))?;
+
+        let timeout = tick_rate.saturating_sub(last_tick.elapsed());
+        if crossterm::event::poll(timeout)? {
+            if let Event::Key(key) = event::read()? {
+                match key.code {
+                    KeyCode::Char('q') => return Ok(()),
+                    KeyCode::Char('j') | KeyCode::Down => {
+                        app.vertical_scroll = app.vertical_scroll.saturating_add(1);
+                        app.vertical_scroll_state =
+                            app.vertical_scroll_state.position(app.vertical_scroll);
+                    }
+                    KeyCode::Char('k') | KeyCode::Up => {
+                        app.vertical_scroll = app.vertical_scroll.saturating_sub(1);
+                        app.vertical_scroll_state =
+                            app.vertical_scroll_state.position(app.vertical_scroll);
+                    }
+                    KeyCode::Char('h') | KeyCode::Left => {
+                        app.horizontal_scroll = app.horizontal_scroll.saturating_sub(1);
+                        app.horizontal_scroll_state =
+                            app.horizontal_scroll_state.position(app.horizontal_scroll);
+                    }
+                    KeyCode::Char('l') | KeyCode::Right => {
+                        app.horizontal_scroll = app.horizontal_scroll.saturating_add(1);
+                        app.horizontal_scroll_state =
+                            app.horizontal_scroll_state.position(app.horizontal_scroll);
+                    }
+                    _ => {}
+                }
+            }
+        }
+        if last_tick.elapsed() >= tick_rate {
+            last_tick = Instant::now();
+        }
+    }
+}
+
+#[allow(clippy::too_many_lines, clippy::cast_possible_truncation)]
+fn ui(f: &mut Frame, app: &mut App) {
+    let size = f.size();
+
+    // Words made "loooong" to demonstrate line breaking.
+    let s = "Veeeeeeeeeeeeeeeery    loooooooooooooooooong   striiiiiiiiiiiiiiiiiiiiiiiiiing.   ";
+    let mut long_line = s.repeat(usize::from(size.width) / s.len() + 4);
+    long_line.push('\n');
+
+    let chunks = Layout::vertical([
+        Constraint::Min(1),
+        Constraint::Percentage(25),
+        Constraint::Percentage(25),
+        Constraint::Percentage(25),
+        Constraint::Percentage(25),
+    ])
+    .split(size);
+
+    let text = vec![
+        Line::from("This is a line "),
+        Line::from("This is a line   ".red()),
+        Line::from("This is a line".on_dark_gray()),
+        Line::from("This is a longer line".crossed_out()),
+        Line::from(long_line.clone()),
+        Line::from("This is a line".reset()),
+        Line::from(vec![
+            Span::raw("Masked text: "),
+            Span::styled(Masked::new("password", '*'), Style::new().fg(Color::Red)),
+        ]),
+        Line::from("This is a line "),
+        Line::from("This is a line   ".red()),
+        Line::from("This is a line".on_dark_gray()),
+        Line::from("This is a longer line".crossed_out()),
+        Line::from(long_line.clone()),
+        Line::from("This is a line".reset()),
+        Line::from(vec![
+            Span::raw("Masked text: "),
+            Span::styled(Masked::new("password", '*'), Style::new().fg(Color::Red)),
+        ]),
+    ];
+    app.vertical_scroll_state = app.vertical_scroll_state.content_length(text.len());
+    app.horizontal_scroll_state = app.horizontal_scroll_state.content_length(long_line.len());
+
+    let create_block = |title: &'static str| Block::bordered().gray().title(title.bold());
+
+    let title = Block::new()
+        .title_alignment(Alignment::Center)
+        .title("Use h j k l or ◄ ▲ ▼ ► to scroll ".bold());
+    f.render_widget(title, chunks[0]);
+
+    let paragraph = Paragraph::new(text.clone())
+        .gray()
+        .block(create_block("Vertical scrollbar with arrows"))
+        .scroll((app.vertical_scroll as u16, 0));
+    f.render_widget(paragraph, chunks[1]);
+    f.render_stateful_widget(
+        Scrollbar::new(ScrollbarOrientation::VerticalRight)
+            .begin_symbol(Some("↑"))
+            .end_symbol(Some("↓")),
+        chunks[1],
+        &mut app.vertical_scroll_state,
+    );
+
+    let paragraph = Paragraph::new(text.clone())
+        .gray()
+        .block(create_block(
+            "Vertical scrollbar without arrows, without track symbol and mirrored",
+        ))
+        .scroll((app.vertical_scroll as u16, 0));
+    f.render_widget(paragraph, chunks[2]);
+    f.render_stateful_widget(
+        Scrollbar::new(ScrollbarOrientation::VerticalLeft)
+            .symbols(scrollbar::VERTICAL)
+            .begin_symbol(None)
+            .track_symbol(None)
+            .end_symbol(None),
+        chunks[2].inner(Margin {
+            vertical: 1,
+            horizontal: 0,
+        }),
+        &mut app.vertical_scroll_state,
+    );
+
+    let paragraph = Paragraph::new(text.clone())
+        .gray()
+        .block(create_block(
+            "Horizontal scrollbar with only begin arrow & custom thumb symbol",
+        ))
+        .scroll((0, app.horizontal_scroll as u16));
+    f.render_widget(paragraph, chunks[3]);
+    f.render_stateful_widget(
+        Scrollbar::new(ScrollbarOrientation::HorizontalBottom)
+            .thumb_symbol("🬋")
+            .end_symbol(None),
+        chunks[3].inner(Margin {
+            vertical: 0,
+            horizontal: 1,
+        }),
+        &mut app.horizontal_scroll_state,
+    );
+
+    let paragraph = Paragraph::new(text.clone())
+        .gray()
+        .block(create_block(
+            "Horizontal scrollbar without arrows & custom thumb and track symbol",
+        ))
+        .scroll((0, app.horizontal_scroll as u16));
+    f.render_widget(paragraph, chunks[4]);
+    f.render_stateful_widget(
+        Scrollbar::new(ScrollbarOrientation::HorizontalBottom)
+            .thumb_symbol("░")
+            .track_symbol(Some("─")),
+        chunks[4].inner(Margin {
+            vertical: 0,
+            horizontal: 1,
+        }),
+        &mut app.horizontal_scroll_state,
+    );
+}
--- a/examples/sparkline.rs
+++ b/examples/sparkline.rs
@@ -1,25 +1,64 @@
-extern crate termion;
-extern crate tui;
+//! # [Ratatui] Sparkline example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md

-mod util;
-use util::*;
+use std::{
+    error::Error,
+    io,
+    time::{Duration, Instant},
+};

-use std::io;
-use std::thread;
-use std::time;
-use std::sync::mpsc;
+use rand::{
+    distributions::{Distribution, Uniform},
+    rngs::ThreadRng,
+};
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    crossterm::{
+        event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    layout::{Constraint, Layout},
+    style::{Color, Style},
+    terminal::{Frame, Terminal},
+    widgets::{Block, Borders, Sparkline},
+};

-use termion::event;
-use termion::input::TermRead;
+#[derive(Clone)]
+struct RandomSignal {
+    distribution: Uniform<u64>,
+    rng: ThreadRng,
+}

-use tui::Terminal;
-use tui::backend::MouseBackend;
-use tui::widgets::{Block, Borders, Sparkline, Widget};
-use tui::layout::{Direction, Group, Rect, Size};
-use tui::style::{Color, Style};
+impl RandomSignal {
+    fn new(lower: u64, upper: u64) -> Self {
+        Self {
+            distribution: Uniform::new(lower, upper),
+            rng: rand::thread_rng(),
+        }
+    }
+}
+
+impl Iterator for RandomSignal {
+    type Item = u64;
+    fn next(&mut self) -> Option<u64> {
+        Some(self.distribution.sample(&mut self.rng))
+    }
+}

 struct App {
-    size: Rect,
    signal: RandomSignal,
    data1: Vec<u64>,
    data2: Vec<u64>,
@@ -27,21 +66,20 @@ struct App {
 }

 impl App {
-    fn new() -> App {
+    fn new() -> Self {
        let mut signal = RandomSignal::new(0, 100);
        let data1 = signal.by_ref().take(200).collect::<Vec<u64>>();
        let data2 = signal.by_ref().take(200).collect::<Vec<u64>>();
        let data3 = signal.by_ref().take(200).collect::<Vec<u64>>();
-        App {
-            size: Rect::default(),
-            signal: signal,
-            data1: data1,
-            data2: data2,
-            data3: data3,
+        Self {
+            signal,
+            data1,
+            data2,
+            data3,
        }
    }

-    fn advance(&mut self) {
+    fn on_tick(&mut self) {
        let value = self.signal.next().unwrap();
        self.data1.pop();
        self.data1.insert(0, value);
@@ -54,105 +92,92 @@ impl App {
    }
 }

-enum Event {
-    Input(event::Key),
-    Tick,
-}
+fn main() -> Result<(), Box<dyn Error>> {
+    // setup terminal
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;

-fn main() {
-    // Terminal initialization
-    let backend = MouseBackend::new().unwrap();
-    let mut terminal = Terminal::new(backend).unwrap();
+    // create app and run it
+    let tick_rate = Duration::from_millis(250);
+    let app = App::new();
+    let res = run_app(&mut terminal, app, tick_rate);

-    // Channels
-    let (tx, rx) = mpsc::channel();
-    let input_tx = tx.clone();
-    let clock_tx = tx.clone();
+    // restore terminal
+    disable_raw_mode()?;
+    execute!(
+        terminal.backend_mut(),
+        LeaveAlternateScreen,
+        DisableMouseCapture
+    )?;
+    terminal.show_cursor()?;

-    // Input
-    thread::spawn(move || {
-        let stdin = io::stdin();
-        for c in stdin.keys() {
-            let evt = c.unwrap();
-            input_tx.send(Event::Input(evt)).unwrap();
-            if evt == event::Key::Char('q') {
-                break;
-            }
-        }
-    });
-
-    // Tick
-    thread::spawn(move || loop {
-        clock_tx.send(Event::Tick).unwrap();
-        thread::sleep(time::Duration::from_millis(500));
-    });
-
-    // App
-    let mut app = App::new();
-
-    // First draw call
-    terminal.clear().unwrap();
-    terminal.hide_cursor().unwrap();
-    app.size = terminal.size().unwrap();
-    draw(&mut terminal, &app);
-
-    loop {
-        let size = terminal.size().unwrap();
-        if size != app.size {
-            terminal.resize(size).unwrap();
-            app.size = size;
-        }
-
-        let evt = rx.recv().unwrap();
-        match evt {
-            Event::Input(input) => if input == event::Key::Char('q') {
-                break;
-            },
-            Event::Tick => {
-                app.advance();
-            }
-        }
-        draw(&mut terminal, &app);
+    if let Err(err) = res {
+        println!("{err:?}");
    }

-    terminal.show_cursor().unwrap();
+    Ok(())
 }

-fn draw(t: &mut Terminal<MouseBackend>, app: &App) {
-    Group::default()
-        .direction(Direction::Vertical)
-        .margin(2)
-        .sizes(&[Size::Fixed(3), Size::Fixed(3), Size::Fixed(7), Size::Min(0)])
-        .render(t, &app.size, |t, chunks| {
-            Sparkline::default()
-                .block(
-                    Block::default()
-                        .title("Data1")
-                        .borders(Borders::LEFT | Borders::RIGHT),
-                )
-                .data(&app.data1)
-                .style(Style::default().fg(Color::Yellow))
-                .render(t, &chunks[0]);
-            Sparkline::default()
-                .block(
-                    Block::default()
-                        .title("Data2")
-                        .borders(Borders::LEFT | Borders::RIGHT),
-                )
-                .data(&app.data2)
-                .style(Style::default().bg(Color::Green))
-                .render(t, &chunks[1]);
-            // Multiline
-            Sparkline::default()
-                .block(
-                    Block::default()
-                        .title("Data3")
-                        .borders(Borders::LEFT | Borders::RIGHT),
-                )
-                .data(&app.data3)
-                .style(Style::default().fg(Color::Red))
-                .render(t, &chunks[2]);
-        });
+fn run_app<B: Backend>(
+    terminal: &mut Terminal<B>,
+    mut app: App,
+    tick_rate: Duration,
+) -> io::Result<()> {
+    let mut last_tick = Instant::now();
+    loop {
+        terminal.draw(|f| ui(f, &app))?;

-    t.draw().unwrap();
+        let timeout = tick_rate.saturating_sub(last_tick.elapsed());
+        if crossterm::event::poll(timeout)? {
+            if let Event::Key(key) = event::read()? {
+                if key.code == KeyCode::Char('q') {
+                    return Ok(());
+                }
+            }
+        }
+        if last_tick.elapsed() >= tick_rate {
+            app.on_tick();
+            last_tick = Instant::now();
+        }
+    }
+}
+
+fn ui(f: &mut Frame, app: &App) {
+    let chunks = Layout::vertical([
+        Constraint::Length(3),
+        Constraint::Length(3),
+        Constraint::Min(0),
+    ])
+    .split(f.size());
+    let sparkline = Sparkline::default()
+        .block(
+            Block::new()
+                .borders(Borders::LEFT | Borders::RIGHT)
+                .title("Data1"),
+        )
+        .data(&app.data1)
+        .style(Style::default().fg(Color::Yellow));
+    f.render_widget(sparkline, chunks[0]);
+    let sparkline = Sparkline::default()
+        .block(
+            Block::new()
+                .borders(Borders::LEFT | Borders::RIGHT)
+                .title("Data2"),
+        )
+        .data(&app.data2)
+        .style(Style::default().bg(Color::Green));
+    f.render_widget(sparkline, chunks[1]);
+    // Multiline
+    let sparkline = Sparkline::default()
+        .block(
+            Block::new()
+                .borders(Borders::LEFT | Borders::RIGHT)
+                .title("Data3"),
+        )
+        .data(&app.data3)
+        .style(Style::default().fg(Color::Red));
+    f.render_widget(sparkline, chunks[2]);
 }
--- a/examples/table.rs
+++ b/examples/table.rs
@@ -1,109 +1,374 @@
-extern crate termion;
-extern crate tui;
+//! # [Ratatui] Table example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md

-use std::io;
+use std::{error::Error, io};

-use termion::event;
-use termion::input::TermRead;
+use itertools::Itertools;
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    crossterm::{
+        event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEventKind},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    layout::{Constraint, Layout, Margin, Rect},
+    style::{self, Color, Modifier, Style, Stylize},
+    terminal::{Frame, Terminal},
+    text::{Line, Text},
+    widgets::{
+        Block, BorderType, Cell, HighlightSpacing, Paragraph, Row, Scrollbar, ScrollbarOrientation,
+        ScrollbarState, Table, TableState,
+    },
+};
+use style::palette::tailwind;
+use unicode_width::UnicodeWidthStr;

-use tui::Terminal;
-use tui::backend::MouseBackend;
-use tui::widgets::{Block, Borders, Row, Table, Widget};
-use tui::layout::{Direction, Group, Rect, Size};
-use tui::style::{Color, Modifier, Style};
+const PALETTES: [tailwind::Palette; 4] = [
+    tailwind::BLUE,
+    tailwind::EMERALD,
+    tailwind::INDIGO,
+    tailwind::RED,
+];
+const INFO_TEXT: &str =
+    "(Esc) quit | (↑) move up | (↓) move down | (→) next color | (←) previous color";

-struct App<'a> {
-    size: Rect,
-    items: Vec<Vec<&'a str>>,
-    selected: usize,
+const ITEM_HEIGHT: usize = 4;
+
+struct TableColors {
+    buffer_bg: Color,
+    header_bg: Color,
+    header_fg: Color,
+    row_fg: Color,
+    selected_style_fg: Color,
+    normal_row_color: Color,
+    alt_row_color: Color,
+    footer_border_color: Color,
 }

-impl<'a> App<'a> {
-    fn new() -> App<'a> {
-        App {
-            size: Rect::default(),
-            items: vec![
-                vec!["Row12", "Row12", "Row13"],
-                vec!["Row21", "Row22", "Row23"],
-                vec!["Row31", "Row32", "Row33"],
-                vec!["Row41", "Row42", "Row43"],
-                vec!["Row51", "Row52", "Row53"],
-                vec!["Row61", "Row62", "Row63"],
-            ],
-            selected: 0,
+impl TableColors {
+    const fn new(color: &tailwind::Palette) -> Self {
+        Self {
+            buffer_bg: tailwind::SLATE.c950,
+            header_bg: color.c900,
+            header_fg: tailwind::SLATE.c200,
+            row_fg: tailwind::SLATE.c200,
+            selected_style_fg: color.c400,
+            normal_row_color: tailwind::SLATE.c950,
+            alt_row_color: tailwind::SLATE.c900,
+            footer_border_color: color.c400,
        }
    }
 }

-fn main() {
-    // Terminal initialization
-    let backend = MouseBackend::new().unwrap();
-    let mut terminal = Terminal::new(backend).unwrap();
+struct Data {
+    name: String,
+    address: String,
+    email: String,
+}

-    // App
-    let mut app = App::new();
+impl Data {
+    const fn ref_array(&self) -> [&String; 3] {
+        [&self.name, &self.address, &self.email]
+    }

-    // First draw call
-    terminal.clear().unwrap();
-    terminal.hide_cursor().unwrap();
-    app.size = terminal.size().unwrap();
-    draw(&mut terminal, &app);
+    fn name(&self) -> &str {
+        &self.name
+    }

-    // Input
-    let stdin = io::stdin();
-    for c in stdin.keys() {
-        let size = terminal.size().unwrap();
-        if size != app.size {
-            terminal.resize(size).unwrap();
-            app.size = size;
+    fn address(&self) -> &str {
+        &self.address
+    }
+
+    fn email(&self) -> &str {
+        &self.email
+    }
+}
+
+struct App {
+    state: TableState,
+    items: Vec<Data>,
+    longest_item_lens: (u16, u16, u16), // order is (name, address, email)
+    scroll_state: ScrollbarState,
+    colors: TableColors,
+    color_index: usize,
+}
+
+impl App {
+    fn new() -> Self {
+        let data_vec = generate_fake_names();
+        Self {
+            state: TableState::default().with_selected(0),
+            longest_item_lens: constraint_len_calculator(&data_vec),
+            scroll_state: ScrollbarState::new((data_vec.len() - 1) * ITEM_HEIGHT),
+            colors: TableColors::new(&PALETTES[0]),
+            color_index: 0,
+            items: data_vec,
        }
-
-        let evt = c.unwrap();
-        match evt {
-            event::Key::Char('q') => {
-                break;
-            }
-            event::Key::Down => {
-                app.selected += 1;
-                if app.selected > app.items.len() - 1 {
-                    app.selected = 0;
+    }
+    pub fn next(&mut self) {
+        let i = match self.state.selected() {
+            Some(i) => {
+                if i >= self.items.len() - 1 {
+                    0
+                } else {
+                    i + 1
                }
            }
-            event::Key::Up => if app.selected > 0 {
-                app.selected -= 1;
-            } else {
-                app.selected = app.items.len() - 1;
-            },
-            _ => {}
+            None => 0,
        };
-        draw(&mut terminal, &app);
+        self.state.select(Some(i));
+        self.scroll_state = self.scroll_state.position(i * ITEM_HEIGHT);
    }

-    terminal.show_cursor().unwrap();
-    terminal.clear().unwrap();
+    pub fn previous(&mut self) {
+        let i = match self.state.selected() {
+            Some(i) => {
+                if i == 0 {
+                    self.items.len() - 1
+                } else {
+                    i - 1
+                }
+            }
+            None => 0,
+        };
+        self.state.select(Some(i));
+        self.scroll_state = self.scroll_state.position(i * ITEM_HEIGHT);
+    }
+
+    pub fn next_color(&mut self) {
+        self.color_index = (self.color_index + 1) % PALETTES.len();
+    }
+
+    pub fn previous_color(&mut self) {
+        let count = PALETTES.len();
+        self.color_index = (self.color_index + count - 1) % count;
+    }
+
+    pub fn set_colors(&mut self) {
+        self.colors = TableColors::new(&PALETTES[self.color_index]);
+    }
 }

-fn draw(t: &mut Terminal<MouseBackend>, app: &App) {
-    let selected_style = Style::default().fg(Color::Yellow).modifier(Modifier::Bold);
-    let normal_style = Style::default().fg(Color::White);
-    let header = ["Header1", "Header2", "Header3"];
-    let rows = app.items.iter().enumerate().map(|(i, item)| {
-        if i == app.selected {
-            Row::StyledData(item.into_iter(), &selected_style)
-        } else {
-            Row::StyledData(item.into_iter(), &normal_style)
+fn generate_fake_names() -> Vec<Data> {
+    use fakeit::{address, contact, name};
+
+    (0..20)
+        .map(|_| {
+            let name = name::full();
+            let address = format!(
+                "{}\n{}, {} {}",
+                address::street(),
+                address::city(),
+                address::state(),
+                address::zip()
+            );
+            let email = contact::email();
+
+            Data {
+                name,
+                address,
+                email,
+            }
+        })
+        .sorted_by(|a, b| a.name.cmp(&b.name))
+        .collect_vec()
+}
+
+fn main() -> Result<(), Box<dyn Error>> {
+    // setup terminal
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;
+
+    // create app and run it
+    let app = App::new();
+    let res = run_app(&mut terminal, app);
+
+    // restore terminal
+    disable_raw_mode()?;
+    execute!(
+        terminal.backend_mut(),
+        LeaveAlternateScreen,
+        DisableMouseCapture
+    )?;
+    terminal.show_cursor()?;
+
+    if let Err(err) = res {
+        println!("{err:?}");
+    }
+
+    Ok(())
+}
+
+fn run_app<B: Backend>(terminal: &mut Terminal<B>, mut app: App) -> io::Result<()> {
+    loop {
+        terminal.draw(|f| ui(f, &mut app))?;
+
+        if let Event::Key(key) = event::read()? {
+            if key.kind == KeyEventKind::Press {
+                match key.code {
+                    KeyCode::Char('q') | KeyCode::Esc => return Ok(()),
+                    KeyCode::Char('j') | KeyCode::Down => app.next(),
+                    KeyCode::Char('k') | KeyCode::Up => app.previous(),
+                    KeyCode::Char('l') | KeyCode::Right => app.next_color(),
+                    KeyCode::Char('h') | KeyCode::Left => app.previous_color(),
+                    _ => {}
+                }
+            }
        }
-    });
-    Group::default()
-        .direction(Direction::Horizontal)
-        .sizes(&[Size::Percent(100)])
-        .margin(5)
-        .render(t, &app.size, |t, chunks| {
-            Table::new(header.into_iter(), rows)
-                .block(Block::default().borders(Borders::ALL).title("Table"))
-                .widths(&[10, 10, 10])
-                .render(t, &chunks[0]);
-        });
-
-    t.draw().unwrap();
+    }
+}
+
+fn ui(f: &mut Frame, app: &mut App) {
+    let rects = Layout::vertical([Constraint::Min(5), Constraint::Length(3)]).split(f.size());
+
+    app.set_colors();
+
+    render_table(f, app, rects[0]);
+
+    render_scrollbar(f, app, rects[0]);
+
+    render_footer(f, app, rects[1]);
+}
+
+fn render_table(f: &mut Frame, app: &mut App, area: Rect) {
+    let header_style = Style::default()
+        .fg(app.colors.header_fg)
+        .bg(app.colors.header_bg);
+    let selected_style = Style::default()
+        .add_modifier(Modifier::REVERSED)
+        .fg(app.colors.selected_style_fg);
+
+    let header = ["Name", "Address", "Email"]
+        .into_iter()
+        .map(Cell::from)
+        .collect::<Row>()
+        .style(header_style)
+        .height(1);
+    let rows = app.items.iter().enumerate().map(|(i, data)| {
+        let color = match i % 2 {
+            0 => app.colors.normal_row_color,
+            _ => app.colors.alt_row_color,
+        };
+        let item = data.ref_array();
+        item.into_iter()
+            .map(|content| Cell::from(Text::from(format!("\n{content}\n"))))
+            .collect::<Row>()
+            .style(Style::new().fg(app.colors.row_fg).bg(color))
+            .height(4)
+    });
+    let bar = " █ ";
+    let t = Table::new(
+        rows,
+        [
+            // + 1 is for padding.
+            Constraint::Length(app.longest_item_lens.0 + 1),
+            Constraint::Min(app.longest_item_lens.1 + 1),
+            Constraint::Min(app.longest_item_lens.2),
+        ],
+    )
+    .header(header)
+    .highlight_style(selected_style)
+    .highlight_symbol(Text::from(vec![
+        "".into(),
+        bar.into(),
+        bar.into(),
+        "".into(),
+    ]))
+    .bg(app.colors.buffer_bg)
+    .highlight_spacing(HighlightSpacing::Always);
+    f.render_stateful_widget(t, area, &mut app.state);
+}
+
+fn constraint_len_calculator(items: &[Data]) -> (u16, u16, u16) {
+    let name_len = items
+        .iter()
+        .map(Data::name)
+        .map(UnicodeWidthStr::width)
+        .max()
+        .unwrap_or(0);
+    let address_len = items
+        .iter()
+        .map(Data::address)
+        .flat_map(str::lines)
+        .map(UnicodeWidthStr::width)
+        .max()
+        .unwrap_or(0);
+    let email_len = items
+        .iter()
+        .map(Data::email)
+        .map(UnicodeWidthStr::width)
+        .max()
+        .unwrap_or(0);
+
+    #[allow(clippy::cast_possible_truncation)]
+    (name_len as u16, address_len as u16, email_len as u16)
+}
+
+fn render_scrollbar(f: &mut Frame, app: &mut App, area: Rect) {
+    f.render_stateful_widget(
+        Scrollbar::default()
+            .orientation(ScrollbarOrientation::VerticalRight)
+            .begin_symbol(None)
+            .end_symbol(None),
+        area.inner(Margin {
+            vertical: 1,
+            horizontal: 1,
+        }),
+        &mut app.scroll_state,
+    );
+}
+
+fn render_footer(f: &mut Frame, app: &App, area: Rect) {
+    let info_footer = Paragraph::new(Line::from(INFO_TEXT))
+        .style(Style::new().fg(app.colors.row_fg).bg(app.colors.buffer_bg))
+        .centered()
+        .block(
+            Block::bordered()
+                .border_type(BorderType::Double)
+                .border_style(Style::new().fg(app.colors.footer_border_color)),
+        );
+    f.render_widget(info_footer, area);
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::Data;
+
+    #[test]
+    fn constraint_len_calculator() {
+        let test_data = vec![
+            Data {
+                name: "Emirhan Tala".to_string(),
+                address: "Cambridgelaan 6XX\n3584 XX Utrecht".to_string(),
+                email: "tala.emirhan@gmail.com".to_string(),
+            },
+            Data {
+                name: "thistextis26characterslong".to_string(),
+                address: "this line is 31 characters long\nbottom line is 33 characters long"
+                    .to_string(),
+                email: "thisemailis40caharacterslong@ratatui.com".to_string(),
+            },
+        ];
+        let (longest_name_len, longest_address_len, longest_email_len) =
+            crate::constraint_len_calculator(&test_data);
+
+        assert_eq!(26, longest_name_len);
+        assert_eq!(33, longest_address_len);
+        assert_eq!(40, longest_email_len);
+    }
 }
--- a/examples/tabs.rs
+++ b/examples/tabs.rs
@@ -1,113 +1,257 @@
-extern crate termion;
-extern crate tui;
+//! # [Ratatui] Tabs example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md

-mod util;
-use util::*;
+use std::io::stdout;

-use std::io;
-use termion::event;
-use termion::input::TermRead;
+use color_eyre::{config::HookBuilder, Result};
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    buffer::Buffer,
+    crossterm::{
+        event::{self, Event, KeyCode, KeyEventKind},
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+        ExecutableCommand,
+    },
+    layout::{Constraint, Layout, Rect},
+    style::{palette::tailwind, Color, Stylize},
+    symbols,
+    terminal::Terminal,
+    text::Line,
+    widgets::{Block, Padding, Paragraph, Tabs, Widget},
+};
+use strum::{Display, EnumIter, FromRepr, IntoEnumIterator};

-use tui::Terminal;
-use tui::backend::MouseBackend;
-use tui::widgets::{Block, Borders, Tabs, Widget};
-use tui::layout::{Direction, Group, Rect, Size};
-use tui::style::{Color, Style};
-
-struct App<'a> {
-    size: Rect,
-    tabs: MyTabs<'a>,
+#[derive(Default)]
+struct App {
+    state: AppState,
+    selected_tab: SelectedTab,
 }

-fn main() {
-    // Terminal initialization
-    let backend = MouseBackend::new().unwrap();
-    let mut terminal = Terminal::new(backend).unwrap();
+#[derive(Default, Clone, Copy, PartialEq, Eq)]
+enum AppState {
+    #[default]
+    Running,
+    Quitting,
+}

-    // App
-    let mut app = App {
-        size: Rect::default(),
-        tabs: MyTabs {
-            titles: vec!["Tab0", "Tab1", "Tab2", "Tab3"],
-            selection: 0,
-        },
-    };
+#[derive(Default, Clone, Copy, Display, FromRepr, EnumIter)]
+enum SelectedTab {
+    #[default]
+    #[strum(to_string = "Tab 1")]
+    Tab1,
+    #[strum(to_string = "Tab 2")]
+    Tab2,
+    #[strum(to_string = "Tab 3")]
+    Tab3,
+    #[strum(to_string = "Tab 4")]
+    Tab4,
+}

-    // First draw call
-    terminal.clear().unwrap();
-    terminal.hide_cursor().unwrap();
-    app.size = terminal.size().unwrap();
-    draw(&mut terminal, &mut app);
+fn main() -> Result<()> {
+    init_error_hooks()?;
+    let mut terminal = init_terminal()?;
+    App::default().run(&mut terminal)?;
+    restore_terminal()?;
+    Ok(())
+}

-    // Main loop
-    let stdin = io::stdin();
-    for c in stdin.keys() {
-        let size = terminal.size().unwrap();
-        if size != app.size {
-            terminal.resize(size).unwrap();
-            app.size = size;
+impl App {
+    fn run(&mut self, terminal: &mut Terminal<impl Backend>) -> Result<()> {
+        while self.state == AppState::Running {
+            self.draw(terminal)?;
+            self.handle_events()?;
        }
-
-        let evt = c.unwrap();
-        match evt {
-            event::Key::Char('q') => {
-                break;
-            }
-            event::Key::Right => app.tabs.next(),
-            event::Key::Left => app.tabs.previous(),
-            _ => {}
-        }
-        draw(&mut terminal, &mut app);
+        Ok(())
    }

-    terminal.show_cursor().unwrap();
-}
+    fn draw(&self, terminal: &mut Terminal<impl Backend>) -> Result<()> {
+        terminal.draw(|frame| frame.render_widget(self, frame.size()))?;
+        Ok(())
+    }

-fn draw(t: &mut Terminal<MouseBackend>, app: &mut App) {
-    Block::default()
-        .style(Style::default().bg(Color::White))
-        .render(t, &app.size);
-
-    Group::default()
-        .direction(Direction::Vertical)
-        .margin(5)
-        .sizes(&[Size::Fixed(3), Size::Min(0)])
-        .render(t, &app.size, |t, chunks| {
-            Tabs::default()
-                .block(Block::default().borders(Borders::ALL).title("Tabs"))
-                .titles(&app.tabs.titles)
-                .select(app.tabs.selection)
-                .style(Style::default().fg(Color::Cyan))
-                .highlight_style(Style::default().fg(Color::Yellow))
-                .render(t, &chunks[0]);
-            match app.tabs.selection {
-                0 => {
-                    Block::default()
-                        .title("Inner 0")
-                        .borders(Borders::ALL)
-                        .render(t, &chunks[1]);
+    fn handle_events(&mut self) -> std::io::Result<()> {
+        if let Event::Key(key) = event::read()? {
+            if key.kind == KeyEventKind::Press {
+                match key.code {
+                    KeyCode::Char('l') | KeyCode::Right => self.next_tab(),
+                    KeyCode::Char('h') | KeyCode::Left => self.previous_tab(),
+                    KeyCode::Char('q') | KeyCode::Esc => self.quit(),
+                    _ => {}
                }
-                1 => {
-                    Block::default()
-                        .title("Inner 1")
-                        .borders(Borders::ALL)
-                        .render(t, &chunks[1]);
-                }
-                2 => {
-                    Block::default()
-                        .title("Inner 2")
-                        .borders(Borders::ALL)
-                        .render(t, &chunks[1]);
-                }
-                3 => {
-                    Block::default()
-                        .title("Inner 3")
-                        .borders(Borders::ALL)
-                        .render(t, &chunks[1]);
-                }
-                _ => {}
            }
-        });
+        }
+        Ok(())
+    }

-    t.draw().unwrap();
+    pub fn next_tab(&mut self) {
+        self.selected_tab = self.selected_tab.next();
+    }
+
+    pub fn previous_tab(&mut self) {
+        self.selected_tab = self.selected_tab.previous();
+    }
+
+    pub fn quit(&mut self) {
+        self.state = AppState::Quitting;
+    }
+}
+
+impl SelectedTab {
+    /// Get the previous tab, if there is no previous tab return the current tab.
+    fn previous(self) -> Self {
+        let current_index: usize = self as usize;
+        let previous_index = current_index.saturating_sub(1);
+        Self::from_repr(previous_index).unwrap_or(self)
+    }
+
+    /// Get the next tab, if there is no next tab return the current tab.
+    fn next(self) -> Self {
+        let current_index = self as usize;
+        let next_index = current_index.saturating_add(1);
+        Self::from_repr(next_index).unwrap_or(self)
+    }
+}
+
+impl Widget for &App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        use Constraint::{Length, Min};
+        let vertical = Layout::vertical([Length(1), Min(0), Length(1)]);
+        let [header_area, inner_area, footer_area] = vertical.areas(area);
+
+        let horizontal = Layout::horizontal([Min(0), Length(20)]);
+        let [tabs_area, title_area] = horizontal.areas(header_area);
+
+        render_title(title_area, buf);
+        self.render_tabs(tabs_area, buf);
+        self.selected_tab.render(inner_area, buf);
+        render_footer(footer_area, buf);
+    }
+}
+
+impl App {
+    fn render_tabs(&self, area: Rect, buf: &mut Buffer) {
+        let titles = SelectedTab::iter().map(SelectedTab::title);
+        let highlight_style = (Color::default(), self.selected_tab.palette().c700);
+        let selected_tab_index = self.selected_tab as usize;
+        Tabs::new(titles)
+            .highlight_style(highlight_style)
+            .select(selected_tab_index)
+            .padding("", "")
+            .divider(" ")
+            .render(area, buf);
+    }
+}
+
+fn render_title(area: Rect, buf: &mut Buffer) {
+    "Ratatui Tabs Example".bold().render(area, buf);
+}
+
+fn render_footer(area: Rect, buf: &mut Buffer) {
+    Line::raw("◄ ► to change tab | Press q to quit")
+        .centered()
+        .render(area, buf);
+}
+
+impl Widget for SelectedTab {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        // in a real app these might be separate widgets
+        match self {
+            Self::Tab1 => self.render_tab0(area, buf),
+            Self::Tab2 => self.render_tab1(area, buf),
+            Self::Tab3 => self.render_tab2(area, buf),
+            Self::Tab4 => self.render_tab3(area, buf),
+        }
+    }
+}
+
+impl SelectedTab {
+    /// Return tab's name as a styled `Line`
+    fn title(self) -> Line<'static> {
+        format!("  {self}  ")
+            .fg(tailwind::SLATE.c200)
+            .bg(self.palette().c900)
+            .into()
+    }
+
+    fn render_tab0(self, area: Rect, buf: &mut Buffer) {
+        Paragraph::new("Hello, World!")
+            .block(self.block())
+            .render(area, buf);
+    }
+
+    fn render_tab1(self, area: Rect, buf: &mut Buffer) {
+        Paragraph::new("Welcome to the Ratatui tabs example!")
+            .block(self.block())
+            .render(area, buf);
+    }
+
+    fn render_tab2(self, area: Rect, buf: &mut Buffer) {
+        Paragraph::new("Look! I'm different than others!")
+            .block(self.block())
+            .render(area, buf);
+    }
+
+    fn render_tab3(self, area: Rect, buf: &mut Buffer) {
+        Paragraph::new("I know, these are some basic changes. But I think you got the main idea.")
+            .block(self.block())
+            .render(area, buf);
+    }
+
+    /// A block surrounding the tab's content
+    fn block(self) -> Block<'static> {
+        Block::bordered()
+            .border_set(symbols::border::PROPORTIONAL_TALL)
+            .padding(Padding::horizontal(1))
+            .border_style(self.palette().c700)
+    }
+
+    const fn palette(self) -> tailwind::Palette {
+        match self {
+            Self::Tab1 => tailwind::BLUE,
+            Self::Tab2 => tailwind::EMERALD,
+            Self::Tab3 => tailwind::INDIGO,
+            Self::Tab4 => tailwind::RED,
+        }
+    }
+}
+
+fn init_error_hooks() -> color_eyre::Result<()> {
+    let (panic, error) = HookBuilder::default().into_hooks();
+    let panic = panic.into_panic_hook();
+    let error = error.into_eyre_hook();
+    color_eyre::eyre::set_hook(Box::new(move |e| {
+        let _ = restore_terminal();
+        error(e)
+    }))?;
+    std::panic::set_hook(Box::new(move |info| {
+        let _ = restore_terminal();
+        panic(info);
+    }));
+    Ok(())
+}
+
+fn init_terminal() -> color_eyre::Result<Terminal<impl Backend>> {
+    enable_raw_mode()?;
+    stdout().execute(EnterAlternateScreen)?;
+    let backend = CrosstermBackend::new(stdout());
+    let terminal = Terminal::new(backend)?;
+    Ok(terminal)
+}
+
+fn restore_terminal() -> color_eyre::Result<()> {
+    disable_raw_mode()?;
+    stdout().execute(LeaveAlternateScreen)?;
+    Ok(())
 }
--- a/examples/user_input.rs
+++ b/examples/user_input.rs
@@ -1,131 +1,277 @@
-/// A simple example demonstrating how to handle user input. This is
-/// a bit out of the scope of the library as it does not provide any
-/// input handling out of the box. However, it may helps some to get
-/// started.
-///
-/// This is a very simple example:
-///   * A input box always focused. Every character you type is registered
-///   here
-///   * Pressing Backspace erases a character
-///   * Pressing Enter pushes the current input in the history of previous
-///   messages
-extern crate termion;
-extern crate tui;
+//! # [Ratatui] User Input example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md

-use std::io;
-use std::thread;
-use std::sync::mpsc;
+// A simple example demonstrating how to handle user input. This is a bit out of the scope of
+// the library as it does not provide any input handling out of the box. However, it may helps
+// some to get started.
+//
+// This is a very simple example:
+//   * An input box always focused. Every character you type is registered here.
+//   * An entered character is inserted at the cursor position.
+//   * Pressing Backspace erases the left character before the cursor position
+//   * Pressing Enter pushes the current input in the history of previous messages. **Note: ** as
+//   this is a relatively simple example unicode characters are unsupported and their use will
+// result in undefined behaviour.
+//
+// See also https://github.com/rhysd/tui-textarea and https://github.com/sayanarijit/tui-input/

-use termion::event;
-use termion::input::TermRead;
+use std::{error::Error, io};

-use tui::Terminal;
-use tui::backend::MouseBackend;
-use tui::widgets::{Block, Borders, Item, List, Paragraph, Widget};
-use tui::layout::{Direction, Group, Rect, Size};
-use tui::style::{Color, Style};
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    crossterm::{
+        event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEventKind},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    layout::{Constraint, Layout},
+    style::{Color, Modifier, Style, Stylize},
+    terminal::{Frame, Terminal},
+    text::{Line, Span, Text},
+    widgets::{Block, List, ListItem, Paragraph},
+};

+enum InputMode {
+    Normal,
+    Editing,
+}
+
+/// App holds the state of the application
 struct App {
-    size: Rect,
+    /// Current value of the input box
    input: String,
+    /// Position of cursor in the editor area.
+    character_index: usize,
+    /// Current input mode
+    input_mode: InputMode,
+    /// History of recorded messages
    messages: Vec<String>,
 }

 impl App {
-    fn new() -> App {
-        App {
-            size: Rect::default(),
+    const fn new() -> Self {
+        Self {
            input: String::new(),
+            input_mode: InputMode::Normal,
            messages: Vec::new(),
+            character_index: 0,
        }
    }
+
+    fn move_cursor_left(&mut self) {
+        let cursor_moved_left = self.character_index.saturating_sub(1);
+        self.character_index = self.clamp_cursor(cursor_moved_left);
+    }
+
+    fn move_cursor_right(&mut self) {
+        let cursor_moved_right = self.character_index.saturating_add(1);
+        self.character_index = self.clamp_cursor(cursor_moved_right);
+    }
+
+    fn enter_char(&mut self, new_char: char) {
+        let index = self.byte_index();
+        self.input.insert(index, new_char);
+        self.move_cursor_right();
+    }
+
+    /// Returns the byte index based on the character position.
+    ///
+    /// Since each character in a string can be contain multiple bytes, it's necessary to calculate
+    /// the byte index based on the index of the character.
+    fn byte_index(&self) -> usize {
+        self.input
+            .char_indices()
+            .map(|(i, _)| i)
+            .nth(self.character_index)
+            .unwrap_or(self.input.len())
+    }
+
+    fn delete_char(&mut self) {
+        let is_not_cursor_leftmost = self.character_index != 0;
+        if is_not_cursor_leftmost {
+            // Method "remove" is not used on the saved text for deleting the selected char.
+            // Reason: Using remove on String works on bytes instead of the chars.
+            // Using remove would require special care because of char boundaries.
+
+            let current_index = self.character_index;
+            let from_left_to_current_index = current_index - 1;
+
+            // Getting all characters before the selected character.
+            let before_char_to_delete = self.input.chars().take(from_left_to_current_index);
+            // Getting all characters after selected character.
+            let after_char_to_delete = self.input.chars().skip(current_index);
+
+            // Put all characters together except the selected one.
+            // By leaving the selected one out, it is forgotten and therefore deleted.
+            self.input = before_char_to_delete.chain(after_char_to_delete).collect();
+            self.move_cursor_left();
+        }
+    }
+
+    fn clamp_cursor(&self, new_cursor_pos: usize) -> usize {
+        new_cursor_pos.clamp(0, self.input.chars().count())
+    }
+
+    fn reset_cursor(&mut self) {
+        self.character_index = 0;
+    }
+
+    fn submit_message(&mut self) {
+        self.messages.push(self.input.clone());
+        self.input.clear();
+        self.reset_cursor();
+    }
 }

-enum Event {
-    Input(event::Key),
+fn main() -> Result<(), Box<dyn Error>> {
+    // setup terminal
+    enable_raw_mode()?;
+    let mut stdout = io::stdout();
+    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
+    let backend = CrosstermBackend::new(stdout);
+    let mut terminal = Terminal::new(backend)?;
+
+    // create app and run it
+    let app = App::new();
+    let res = run_app(&mut terminal, app);
+
+    // restore terminal
+    disable_raw_mode()?;
+    execute!(
+        terminal.backend_mut(),
+        LeaveAlternateScreen,
+        DisableMouseCapture
+    )?;
+    terminal.show_cursor()?;
+
+    if let Err(err) = res {
+        println!("{err:?}");
+    }
+
+    Ok(())
 }

-fn main() {
-    // Terminal initialization
-    let backend = MouseBackend::new().unwrap();
-    let mut terminal = Terminal::new(backend).unwrap();
+fn run_app<B: Backend>(terminal: &mut Terminal<B>, mut app: App) -> io::Result<()> {
+    loop {
+        terminal.draw(|f| ui(f, &app))?;

-    // Channels
-    let (tx, rx) = mpsc::channel();
-    let input_tx = tx.clone();
-
-    // Input
-    thread::spawn(move || {
-        let stdin = io::stdin();
-        for c in stdin.keys() {
-            let evt = c.unwrap();
-            input_tx.send(Event::Input(evt)).unwrap();
-            if evt == event::Key::Char('q') {
-                break;
+        if let Event::Key(key) = event::read()? {
+            match app.input_mode {
+                InputMode::Normal => match key.code {
+                    KeyCode::Char('e') => {
+                        app.input_mode = InputMode::Editing;
+                    }
+                    KeyCode::Char('q') => {
+                        return Ok(());
+                    }
+                    _ => {}
+                },
+                InputMode::Editing if key.kind == KeyEventKind::Press => match key.code {
+                    KeyCode::Enter => app.submit_message(),
+                    KeyCode::Char(to_insert) => {
+                        app.enter_char(to_insert);
+                    }
+                    KeyCode::Backspace => {
+                        app.delete_char();
+                    }
+                    KeyCode::Left => {
+                        app.move_cursor_left();
+                    }
+                    KeyCode::Right => {
+                        app.move_cursor_right();
+                    }
+                    KeyCode::Esc => {
+                        app.input_mode = InputMode::Normal;
+                    }
+                    _ => {}
+                },
+                InputMode::Editing => {}
            }
        }
-    });
+    }
+}

-    // App
-    let mut app = App::new();
+fn ui(f: &mut Frame, app: &App) {
+    let vertical = Layout::vertical([
+        Constraint::Length(1),
+        Constraint::Length(3),
+        Constraint::Min(1),
+    ]);
+    let [help_area, input_area, messages_area] = vertical.areas(f.size());

-    // First draw call
-    terminal.clear().unwrap();
-    terminal.hide_cursor().unwrap();
-    app.size = terminal.size().unwrap();
-    draw(&mut terminal, &app);
+    let (msg, style) = match app.input_mode {
+        InputMode::Normal => (
+            vec![
+                "Press ".into(),
+                "q".bold(),
+                " to exit, ".into(),
+                "e".bold(),
+                " to start editing.".bold(),
+            ],
+            Style::default().add_modifier(Modifier::RAPID_BLINK),
+        ),
+        InputMode::Editing => (
+            vec![
+                "Press ".into(),
+                "Esc".bold(),
+                " to stop editing, ".into(),
+                "Enter".bold(),
+                " to record the message".into(),
+            ],
+            Style::default(),
+        ),
+    };
+    let text = Text::from(Line::from(msg)).patch_style(style);
+    let help_message = Paragraph::new(text);
+    f.render_widget(help_message, help_area);

-    loop {
-        let size = terminal.size().unwrap();
-        if app.size != size {
-            terminal.resize(size).unwrap();
-            app.size = size;
+    let input = Paragraph::new(app.input.as_str())
+        .style(match app.input_mode {
+            InputMode::Normal => Style::default(),
+            InputMode::Editing => Style::default().fg(Color::Yellow),
+        })
+        .block(Block::bordered().title("Input"));
+    f.render_widget(input, input_area);
+    match app.input_mode {
+        InputMode::Normal =>
+            // Hide the cursor. `Frame` does this by default, so we don't need to do anything here
+            {}
+
+        InputMode::Editing => {
+            // Make the cursor visible and ask ratatui to put it at the specified coordinates after
+            // rendering
+            #[allow(clippy::cast_possible_truncation)]
+            f.set_cursor(
+                // Draw the cursor at the current position in the input field.
+                // This position is can be controlled via the left and right arrow key
+                input_area.x + app.character_index as u16 + 1,
+                // Move one line down, from the border to the input line
+                input_area.y + 1,
+            );
        }
-
-        let evt = rx.recv().unwrap();
-        match evt {
-            Event::Input(input) => match input {
-                event::Key::Char('q') => {
-                    break;
-                }
-                event::Key::Char('\n') => {
-                    app.messages.push(app.input.drain(..).collect());
-                }
-                event::Key::Char(c) => {
-                    app.input.push(c);
-                }
-                event::Key::Backspace => {
-                    app.input.pop();
-                }
-                _ => {}
-            },
-        }
-        draw(&mut terminal, &app);
    }

-    terminal.show_cursor().unwrap();
-    terminal.clear().unwrap();
-}
-
-fn draw(t: &mut Terminal<MouseBackend>, app: &App) {
-    Group::default()
-        .direction(Direction::Vertical)
-        .margin(2)
-        .sizes(&[Size::Fixed(3), Size::Min(1)])
-        .render(t, &app.size, |t, chunks| {
-            Paragraph::default()
-                .style(Style::default().fg(Color::Yellow))
-                .block(Block::default().borders(Borders::ALL).title("Input"))
-                .text(&app.input)
-                .render(t, &chunks[0]);
-            List::new(
-                app.messages
-                    .iter()
-                    .enumerate()
-                    .map(|(i, m)| Item::Data(format!("{}: {}", i, m))),
-            ).block(Block::default().borders(Borders::ALL).title("Messages"))
-                .render(t, &chunks[1]);
-        });
-
-    t.draw().unwrap();
+    let messages: Vec<ListItem> = app
+        .messages
+        .iter()
+        .enumerate()
+        .map(|(i, m)| {
+            let content = Line::from(Span::raw(format!("{i}: {m}")));
+            ListItem::new(content)
+        })
+        .collect();
+    let messages = List::new(messages).block(Block::bordered().title("Messages"));
+    f.render_widget(messages, messages_area);
 }
--- a/examples/util/mod.rs
+++ b/examples/util/mod.rs
@@ -1,74 +0,0 @@
-#![allow(dead_code)]
-
-extern crate rand;
-
-use self::rand::distributions::{IndependentSample, Range};
-
-#[derive(Clone)]
-pub struct RandomSignal {
-    range: Range<u64>,
-    rng: rand::ThreadRng,
-}
-
-impl RandomSignal {
-    pub fn new(lower: u64, upper: u64) -> RandomSignal {
-        RandomSignal {
-            range: Range::new(lower, upper),
-            rng: rand::thread_rng(),
-        }
-    }
-}
-
-impl Iterator for RandomSignal {
-    type Item = u64;
-    fn next(&mut self) -> Option<u64> {
-        Some(self.range.ind_sample(&mut self.rng))
-    }
-}
-
-#[derive(Clone)]
-pub struct SinSignal {
-    x: f64,
-    interval: f64,
-    period: f64,
-    scale: f64,
-}
-
-impl SinSignal {
-    pub fn new(interval: f64, period: f64, scale: f64) -> SinSignal {
-        SinSignal {
-            x: 0.0,
-            interval: interval,
-            period: period,
-            scale: scale,
-        }
-    }
-}
-
-impl Iterator for SinSignal {
-    type Item = (f64, f64);
-    fn next(&mut self) -> Option<Self::Item> {
-        let point = (self.x, (self.x * 1.0 / self.period).sin() * self.scale);
-        self.x += self.interval;
-        Some(point)
-    }
-}
-
-pub struct MyTabs<'a> {
-    pub titles: Vec<&'a str>,
-    pub selection: usize,
-}
-
-impl<'a> MyTabs<'a> {
-    pub fn next(&mut self) {
-        self.selection = (self.selection + 1) % self.titles.len();
-    }
-
-    pub fn previous(&mut self) {
-        if self.selection > 0 {
-            self.selection -= 1;
-        } else {
-            self.selection = self.titles.len() - 1;
-        }
-    }
-}
--- a/examples/vhs/barchart.tape
+++ b/examples/vhs/barchart.tape
@@ -0,0 +1,12 @@
+# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
+# To run this script, install vhs and run `vhs ./examples/barchart.tape`
+Output "target/barchart.gif"
+Set Theme "Aardvark Blue"
+Set Width 1200
+Set Height 800
+Hide
+Type "cargo run --example=barchart"
+Enter
+Sleep 1s
+Show
+Sleep 5s
--- a/examples/vhs/block.tape
+++ b/examples/vhs/block.tape
@@ -0,0 +1,12 @@
+# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
+# To run this script, install vhs and run `vhs ./examples/block.tape`
+Output "target/block.gif"
+Set Theme "Aardvark Blue"
+Set Width 1200
+Set Height 1200
+Hide
+Type "cargo run --example=block"
+Enter
+Sleep 2s
+Show
+Sleep 2s
--- a/examples/vhs/calendar.tape
+++ b/examples/vhs/calendar.tape
@@ -0,0 +1,12 @@
+# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
+# To run this script, install vhs and run `vhs ./examples/calendar.tape`
+Output "target/calendar.gif"
+Set Theme "Aardvark Blue"
+Set Width 1200
+Set Height 800
+Hide
+Type "cargo run --example=calendar --features=crossterm,widget-calendar"
+Enter
+Sleep 3s
+Show
+Sleep 5s
--- a/examples/vhs/canvas.tape
+++ b/examples/vhs/canvas.tape
@@ -0,0 +1,13 @@
+# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
+# To run this script, install vhs and run `vhs ./examples/canvas.tape`
+Output "target/canvas.gif"
+Set Theme "Aardvark Blue"
+Set FontSize 12
+Set Width 1200
+Set Height 800
+Hide
+Type "cargo run --example=canvas --features=crossterm"
+Enter
+Sleep 2s
+Show
+Sleep 30s
--- a/examples/vhs/chart.tape
+++ b/examples/vhs/chart.tape
@@ -0,0 +1,12 @@
+# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
+# To run this script, install vhs and run `vhs ./examples/chart.tape`
+Output "target/chart.gif"
+Set Theme "Aardvark Blue"
+Set Width 1200
+Set Height 800
+Hide
+Type "cargo run --example=chart --features=crossterm"
+Enter
+Sleep 1s
+Show
+Sleep 5s
--- a/examples/vhs/colors.tape
+++ b/examples/vhs/colors.tape
@@ -0,0 +1,12 @@
+# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
+# To run this script, install vhs and run `vhs ./examples/colors.tape`
+Output "target/colors.gif"
+Set Theme "Aardvark Blue"
+Set Width 1200
+Set Height 1410
+Hide
+Type "cargo run --example=colors --features=crossterm"
+Enter
+Sleep 2s
+Show
+Sleep 1s
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`<!-- Please read CONTRIBUTING.md before submitting any pull request. -->`