 Search
components/badge: Badge components/button: Button components/checkbox: Checkbox components/input: Input components/popover: Popover components/typography: Typography plugins/plugin-nf: Nerd Font Plugin plugins/theme-catppuccin: Catppuccin Theme plugins/theme-nord: Nord Theme plugins/theme-gruvbox: Gruvbox Theme start/ascii-boxes: ASCII Boxes start/changelog: Changelog start/changelog: ## 0.0.5 start/changelog: ## 0.0.4 start/changelog: ## 0.0.3 start/changelog: ## 0.0.2 start/changelog: ## 0.0.1 start/intro: Introduction start/intro: ## Features start/plugins: Plugins start/plugins: ## Official Plugins start/plugins: ### Themes start/plugins: ## Community Plugins contributing/contributing: Contributing contributing/contributing: ## Local Development contributing/contributing: ## Issues contributing/contributing: ## Pull Requests contributing/style-guide: Style Guide contributing/style-guide: ## CSS Units contributing/style-guide: ## Selectors contributing/style-guide: ## Documentation plugins/plugin-dev: Developing Plugins plugins/plugin-dev: ### Style Layers start/tuis-vs-guis: TUIs vs GUIs start/tuis-vs-guis: ## Monospace Fonts start/tuis-vs-guis: ## Character Cells installation/nextjs: Next.js installation/vite: Vite start/theming: Theming start/theming: ## CSS Variables start/theming: ### Font Styles start/theming: ### Colors start/theming: ### Light & Dark start/theming: ## Theme Plugins installation/astro: Astro installation/astro: ## Scoping installation/astro: ### Frontmatter Imports installation/astro: ### <style> tag installation/astro: ### Full Library Import start/installation: Installation start/installation: ## Installation start/installation: ## Using CSS start/installation: ## Using ESM start/installation: ## Using a CDN start/installation: ## Full Library Import start/installation: ### CSS start/installation: ### ESM start/installation: ### CDN

Introduction

WebTUI is a CSS library that brings the beauty of Terminal User Interfaces (TUIs) to the browser

Features

  • Modular Design Approach - Use and import only what you need
  • CSS Layer Precedence - Uses CSS layers [MDN Reference] so you rarely have to use !important
  • Purist Approach - Designed to be used with minimal markup and CSS
Contents