waybar-widgets

Implement Waybar widgets and themes for Hyprland using CSS and JSON definitions.

Updated Oct 3, 2024
One-click install
npx skills add https://github.com/RuanBuitendag42/.dotfiles --skill waybar-widgets
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: waybar-widgets
Source: https://github.com/RuanBuitendag42/.dotfiles/tree/main/home/.copilot/skills/waybar-widgets
Command: npx skills add https://github.com/RuanBuitendag42/.dotfiles --skill waybar-widgets

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Waybar widget customization enables developers to quickly build, theme, and deploy modular status-bar widgets for Hyprland, reducing manual configuration time and promoting consistency.

Core Features & Use Cases

  • Built-in modules for hyprland/workspaces, hyprland/window, hyprland/submap, clock, cpu, memory, temperature, network, pulseaudio, wireplumber, tray, battery, backlight, idle_inhibitor, disk, and mpris
  • Custom Module Format: JSON-based module definitions with exec, interval, format, and on-click actions
  • CSS Theming Guide: Global styles, per-module colors, glass effects, and responsive design for Waybar widgets
  • On-Demand Refresh with Signals: Update modules via signals to avoid constant polling
  • Module Development Tips and Patterns: Best practices for robust, maintainable widgets
  • Alternative Widget Frameworks overview: eww, AGS, HyprPanel, ironbar, fabric

Quick Start

Install Waybar, place your custom CSS and module definitions in the config, and reload Waybar to render your widgets.

Frequently Asked Questions about waybar-widgets

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I customize Waybar widgets and themes for Hyprland?▼

Customize Waybar widgets by defining JSON configurations for built-in modules like workspaces and battery, then applying CSS styles for global themes, per-module colors, and glass effects to render dynamic status bars.

Can I create custom Waybar modules for event-driven updates?▼

Yes, create custom Waybar modules using JSON definitions with exec, interval, format, and on-click actions, then trigger on-demand refreshes via signals to avoid constant polling and support event-driven updates.

How do I style Waybar bars using CSS?▼

Style Waybar bars using CSS to define global styles, per-module colors, glass effects, and responsive design, ensuring consistent theming across workspace, window title, network, and battery monitoring widgets.

Do I need scripting knowledge to configure Waybar custom modules?▼

Yes, configuring custom Waybar modules requires knowledge of Waybar configuration, JSON settings, CSS styling, and scripting to support event-driven updates and dynamic status bar monitoring.

What are the best alternative widget frameworks for Hyprland?▼

Alternative widget frameworks for Hyprland include eww, AGS, HyprPanel, ironbar, and fabric, which offer different approaches to building modular status bars compared to Waybar's JSON and CSS configuration.