index.html

---
layout: default
title: A fast and easy-to-use tool for creating status bars

links:
  releases: https://github.com/polybar/polybar/releases
  compiling: https://github.com/polybar/polybar/wiki/Compiling
  configuration: https://github.com/polybar/polybar/wiki/Configuration
---
<div class="hero text-center">
  <div class="container">
    <section class="row">
      <div class="col-md-12">
        <div class="content d-flex flex-column justify-content-between align-items-center">

          <div>
            <!-- This div is aligned to the top by justify-between -->
          </div>

          <header>
            <h1 class="display-1 mb-sm-2 mb-lg-4">
              A fast and easy to use tool for creating status bars
            </h1>
            <p class="subheading mx-auto mb-lg-4">
              Polybar aims to help users build beautiful and highly customizable status bars for their desktop environment,
              without the need of having a black belt in shell scripting.
            </p>

            {% include mockup.html
            count='first'
            left='<i class="fas fa-circle mr-1"></i>
                  <i class="fas fa-circle-notch mr-1"></i>
                  <i class="fas fa-circle-notch mr-1"></i>'
            center='Tue Jul 10, 4:45 pm'
            right='<i class="fas fa-volume-up mr-1"></i>
                   <i class="fas fa-bell-slash mr-1"></i>
                   <i class="fas fa-wifi"></i>'
            %}

            {% include mockup.html
            count='second'
            left='<i class="fab fa-firefox fa-sm mr-1"></i>
                  <i class="fas fa-cog fa-sm mr-1"></i>
                  <i class="far fa-envelope-open fa-lg"></i>'
            center='<i class="fas fa-backward fa-sm mr-1"></i>
                    Sigur Rós - Varúð
                    <i class="fas fa-forward fa-sm ml-1"></i>'
            right='<span class="module pr-3"> 4:45 pm </span>
                   <i class="fas fa-power-off ml-4"></i>'
            %}

            {% include mockup.html
            count='third'
            left='<span class="module"> [ <i class="fas fa-microchip mr-1"></i> 25% ] </span>
                  <span> [ <i class="fas fa-hdd mr-1"></i> 350 GB ] </span>'
            center='This is Polybar'
            right='<span class="module"> [ <i class="fas fa-globe-americas"></i> En ] </span>
                   <span> [ <i class="far fa-calendar"></i>  Tue Jul 10 ] </span>'
            %}
          </header>

          <div id="btn-scroll-to-main"
               class="d-flex justify-content-center align-items-center clickable mb-1">
            <i class="fas fa-sm fa-angle-double-down"></i>
          </div>

        </div>
      </div>
    </section>
  </div>
</div>

<!-- Main content -->

<main class="home text-center">
  <div class="container pt-2 pb-5">

    <!-- Features section -->

    <section class="features row pt-5 pb-4">

      <header class="col-md-12 mb-4">
        <h3 class="pb-2">
          The main purpose of Polybar is to help users create awesome status bars.
          <br>
          It has built-in functionality to display information about the most commonly used services.
        </h3>
        <h4>
          Some of the features included so far:
        </h4>
      </header>

      {% for feature in site.data.features %}
        <div class="col-sm-6 col-md-4">
          <a href="{{ feature.link }}">
            <i class="{{ feature.icon }} feature-icon fa-3x my-3"></i>
          </a>
          <br>
          <a href="{{ feature.link }}">
            {{ feature.label }}
          </a>
        </div>
      {% endfor %}

    </section>

    <!-- Installation section -->

    <section class="installation row border-top py-5">

      <header class="col-md-12 pb-3">
        <h3>
          Where can you get it?
        </h3>
        <h4>
          Polybar has already been packaged for the distributions listed below,
          <br>
          if you're unable to find yours, you will likely have to build it
          from <a class="u" href="{{ page.links.releases }}">source</a>.
        </h4>
      </header>

      <div class="col-md-12">

        <table id="installation" class="table table-hover mb-5">
          <tbody class="border-bottom">
            {% for row in site.data.installation %}
              <tr>
                <th scope="row">
                  {{ row.distro }}
                </th>
                <td class="align-middle">
                  {{ row.instructions | markdownify | remove: '<p>' | remove: '</p>' }}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>

        <span>
          You can find full list of dependencies
          as well as build instructions <a href="{{ page.links.compiling }}">here</a>.
        </span>
      </div>
    </section>

    <!-- Configuration section -->

    <section class="configuration row border-top py-5">

      <header class="col-md-12 mb-2">
        <h3>
          Configuration
        </h3>
      </header>

      <div class="col-md-4 ml-auto text-md-right">
        <p>
          Polybar's powerful yet simple DSL allows for extensive customization
          while remaining
          <br>
          relatively easy to write and understand.
          <br>
          Here is an example of a basic date/time module that will display current date and time
          in <code class="text-nowrap">1970-01-01 - 00:00</code> format, with an update interval of one second.
        </p>
      </div>

      <div class="col-md-4 mr-auto text-start">
        <div class="highlighter-rouge mb-0 p-3">
          <div class="highlight">
            <pre class="highlight text-left">
<code>[<span class="k">module</span>/<span class="k">datetime</span>]
<span class="py">type</span> = <span class="kt">internal/date</span>
<span class="py">interval</span> = <span class="mi">1.0</span>

<span class="py">date</span> = <span class="s">"%Y-%m-%d%"</span>
<span class="py">time</span> = <span class="s">"%H:%M"</span>

<span class="py">label</span> = <span class="s">"%date% - %time%"</span></code></pre>
          </div>
        </div>
      </div>

      <div class="col-md-12 pt-5">
        <span>
          To learn more about configuring Polybar, take a look at
          <a href="{{ page.links.configuration }}">
            our wiki.
          </a>
        </span>
      </div>

    </section>

    <!-- Examples section -->

    <section class="row border-top py-5">

      <header class="col-md-12 mb-4">
        <h3>
          Examples
        </h3>
        <h4>
          These screenshots showcase a few of the countless ways Polybar can be set up in.
        </h4>
      </header>

      <div class="col-md-12">
        {% for example in site.data.examples %}
          <a href="{{ example.link }}">
            <img class="screenshot img-fluid {% unless forloop.last %} mb-5 {% endunless %}"
                 src="{{ example.src | relative_url }}"
                 alt="{{ example.alt }}">
          </a>
        {% endfor %}
      </div>

    </section>

  </div>
</main>