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.