diff --git a/docs/components/introduction.md b/docs/components/introduction.md
index 4ff9b3455..f18bcba64 100644
--- a/docs/components/introduction.md
+++ b/docs/components/introduction.md
@@ -73,4 +73,5 @@ Let's explore a more sophisticated example that demonstrates how multiple compon
 | unfold/components/table.html      | Table                          | table, card_included, striped        |
 | unfold/components/text.html       | Paragraph of text              | class                                |
 | unfold/components/title.html      | Basic heading element          | class                                |
-| unfold/components/tracker.html    | Tracker component              | data                                 |
+| unfold/components/tracker.html    | Tracker component              | class, data                          |
+| unfold/components/layer.html      | Abstract components wrapper    |                                      |
diff --git a/src/unfold/templates/unfold/components/tracker.html b/src/unfold/templates/unfold/components/tracker.html
index c489d9dcc..24948d745 100644
--- a/src/unfold/templates/unfold/components/tracker.html
+++ b/src/unfold/templates/unfold/components/tracker.html
@@ -1,4 +1,4 @@
-<ul class="flex flex-row gap-0.5 overflow-hidden rounded-default">
+<ul class="flex flex-row gap-0.5 overflow-hidden rounded-default {% if class %}{{ class }}{% endif %}">
     {% for item in data %}
         <li class="h-8 px-px size-full {% if item.color %}{{ item.color }}{% else %}bg-base-300 dark:bg-base-400{% endif %} hover:opacity-50" title="{{ item.tooltip }}"></li>
     {% endfor %}