Habit Tracker Dashboard

Habit tracker app dashboard with a week strip, progress ring, habit list with check buttons and streak counts, and an add-habit bottom sheet for mobile sites and PWAs.

Also known as: habit tracker app ui, daily habit checklist, streak tracker app screen, routine tracker mobile template, habit progress ring

Bootstrap 5 Mobile Dashboards Responsive #app #bottom-sheet #dashboard #habit tracker #mobile #responsive

Habit Tracker Dashboard live demo

Open in new tab

Bootstrap 5 code (HTML, CSS, JS)

Beautify

A habit tracker dashboard built as an HTML mobile template with Bootstrap 5: a week strip, a progress ring, a daily habit checklist with streak counts and an add-habit bottom sheet. Use it as the home screen of a habit tracker app UI, a routine planner or a wellness PWA, and package it with Capacitor for the app stores.

How it works

The root .htd-app is a 430 px app column centred on a light grey page. The greeting follows the visitor's clock and the data-htd-name attribute. The script fills .htd-week-row with one .htd-day button per day of the current week, so dates never go stale; each day shows a small ring driven by the --htd-p custom property.

The emerald .htd-progress card holds an SVG ring whose .htd-ring-bar uses stroke-dashoffset to show the share of habits done on the selected day. The list is rendered from the SAMPLE array: each .htd-item has a tinted icon, its goal, a flame streak count and a round .htd-check toggle. Checking a habit updates the ring, the week strip and the streak and shows a short .htd-toast. Past days show sample check-ins; future days show disabled checks and a note. The .htd-chip buttons filter by morning, afternoon or evening.

The plus button in .htd-tabbar opens #htd-sheet, a Bootstrap offcanvas styled as a bottom sheet. Its form validates the name and goal, adds the habit, closes the sheet and resets.

Customization

--htd-accent and --htd-accent-dark on .htd-app: the emerald of checks, chips and the plus button.
The gradient in .htd-progress: use a flat colour or your brand gradient.
SAMPLE in script.js: names, icons, time, goal and streak, or load habits from your API.
TINTS in script.js: icon tile background and icon colour per Bootstrap Icons name.
data-htd-name on .htd-app: the name in the greeting; remove it for a plain greeting.
The submit handler of .htd-form: replace habits.push(habit) with a fetch() call to your server.
Remove .htd-chips if your app does not group habits by time of day.

Use cases

Habit tracker apps: users tick off daily habits and keep their streaks.
Wellness and fitness PWAs: water, steps and meditation goals on one screen.
Language and study apps: a daily practice checklist with progress.
Coaching platforms: clients log agreed routines between sessions.

Accessibility

Day, chip and check buttons are real buttons with aria-pressed, and each day has a label such as "Thursday 5, 4 of 6 done". The ring is a role="img" element with an aria-label, and the toast is a role="status" live region. The sheet traps focus, closes with Escape or the backdrop, focuses the name field and returns focus to the plus button. Invalid fields get is-invalid and aria-invalid. Touch targets are at least 44 px, and transitions stop with prefers-reduced-motion.

Usage notes

Needs Bootstrap 5 with its bundle, Bootstrap Icons and Manrope. Check-ins live in memory; connect them to your backend.

Habit Tracker Dashboard at a glance

Framework: Bootstrap 5
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 5, Bootstrap Icons, fonts.googleapis.com
Layout: Mobile-first app screen, centred on wider screens
Category: Mobile Dashboards
License: Free for personal and commercial use

Questions about this template

Can I use the Habit Tracker Dashboard code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 5 and Bootstrap Icons and fonts.googleapis.com from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Can I turn this screen into an iOS or Android app?

Yes. It is plain HTML, CSS and JavaScript, so it works in a mobile website or progressive web app as it is. To ship it as a store app, put it in the web folder of a Capacitor or Cordova project and build it for iOS and Android; replace the sample data with calls to your own API.

How does it look on a desktop screen?

The screen is designed for phones. On wider screens it stays at phone width in the middle of the page, so it still looks like an app. The live demo opens at mobile width; use the Tablet and Desktop buttons to check other sizes.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap">