Looking for Ionic kit for you platform?
Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding — all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.
The Habit Tracker Screen is an essential feature in productivity, wellness, and self-improvement apps. It enables users to build positive routines through daily check-ins, visual progress indicators, and habit streak tracking. A well-designed habit tracker includes interactive calendars, progress bars, goals, and space for notes to help users stay consistent and motivated.
This guide will walk you through the steps to design and implement a Habit Tracker using the Ionic Design Kit. By leveraging its customizable UI components and the Ionic Framework, you can create a clean, user-friendly, and visually rewarding interface that encourages habit-building and long-term behavior change.
1. Install Ionic CLI with the command
Creating a project with the Ionic CLI
npm i -g @ionic/cli
2. Create a new project
To create a new project, run the following command.
ionic start tracker blank --type=react
3. Get inside the project directory
cd tracker
4. Create a Tab bar component
Use this instruction to create a Tab bar component.
5. Create a Tracker page
Create page Tracker.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const Tracker: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default Tracker;
Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.
6. Select the layout structure
For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.
<IonPage>
<IonHeader>
<IonToolbar>
...
</IonToolbar>
</IonHeader>
<IonContent>
...
</IonContent>
</IonPage>
7. Add a header with title and edit button
This section creates the header of the page using the IonHeader component. Inside, IonToolbar wraps the main toolbar structure. IonTitle displays the title text 'Read book'. On the right side, IonButtons slot="end" positions the edit button to the end of the toolbar. The IonButton contains an IonIcon with slot="icon-only" to show only the pencil icon (imported from ionicons/icons), visually representing an edit action. className="ion-padding-end" adds right-side padding.
<IonHeader>
<IonToolbar>
<IonTitle>Read book</IonTitle>
<IonButtons slot="end" className="ion-padding-end">
<IonButton>
<IonIcon slot="icon-only" icon={pencil} />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
This concludes our work with IonHeader, and the following sections will cover working with IonContent.
8. Add segment control to switch views
The main scrollable content is placed inside IonContent, which includes Ionic utility classes for horizontal padding and top spacing. The IonSegment acts as a toggle control with two IonSegmentButton for switching views: 'Progress' and 'Notes'. The value prop on the segment and buttons binds the selected segment. IonLabel is used to provide a readable label inside each segment button.
<IonContent className="ion-padding-horizontal ion-padding-top">
<IonSegment value="progress">
<IonSegmentButton value="progress">
<IonLabel>Progress</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="notes">
<IonLabel>Notes</IonLabel>
</IonSegmentButton>
</IonSegment>
</IonContent>
9. Display streak statistics in a grid
This part utilizes IonGrid for layout, containing a single IonRow with two IonCol, each taking up 50% of the width (size="6"). Inside each column, an IonLabel groups multiple text elements: <h1> for the main value (e.g., '5' or '5/7'), <h2> for the label (like 'Current streak'), and <p> for supportive feedback text. This structure is responsive and aligns neatly across screen sizes using Ionic’s grid system.
<IonContent className="ion-padding-horizontal ion-padding-top">
...
<IonGrid>
<IonRow>
<IonCol size="6">
<IonLabel>
<h1>5</h1>
<h2>Current streak</h2>
<p>See? You can do it!</p>
</IonLabel>
</IonCol>
<IonCol size="6">
<IonLabel>
<h1>5/7</h1>
<h2>Weekly goal</h2>
<p>Almost there, keep it up!</p>
</IonLabel>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
10. Highlight dates in calendar with IonDatetime
Here, the IonDatetime component displays a date-time picker. The presentation="date-time" specifies the format. The highlightedDates prop is used to visually mark specific dates, each with a date, textColor, and backgroundColor. These highlighted dates show streak activity and are styled with light blue highlights (rgba(0, 84, 233, .2)). The size="cover" ensures the picker takes up the full available space, and locale="en-US" ensures English formatting.
<IonContent className="ion-padding-horizontal ion-padding-top">
...
<br />
<IonDatetime
size="cover"
locale="en-US"
presentation="date-time"
highlightedDates={[
{
date: "2025-04-01",
textColor: "rgb(0, 84, 233)",
backgroundColor: "rgba(0, 84, 233, .2)",
},
{
date: "2025-04-03",
textColor: "rgb(0, 84, 233)",
backgroundColor: "rgba(0, 84, 233, .2)",
},
{
date: "2025-04-06",
textColor: "rgb(0, 84, 233)",
backgroundColor: "rgba(0, 84, 233, .2)",
},
{
date: "2025-04-12",
textColor: "rgb(0, 84, 233)",
backgroundColor: "rgba(0, 84, 233, .2)",
},
{
date: "2025-04-14",
textColor: "rgb(0, 84, 233)",
backgroundColor: "rgba(0, 84, 233, .2)",
},
{
date: "2025-04-15",
textColor: "rgb(0, 84, 233)",
backgroundColor: "rgba(0, 84, 233, .2)",
},
{
date: "2025-04-16",
textColor: "rgb(0, 84, 233)",
backgroundColor: "rgba(0, 84, 233, .2)",
},
{
date: "2025-04-17",
textColor: "rgb(0, 84, 233)",
backgroundColor: "rgba(0, 84, 233, .2)",
},
{
date: "2025-04-18",
textColor: "rgb(0, 84, 233)",
backgroundColor: "rgba(0, 84, 233, .2)",
},
]}
></IonDatetime>
</IonContent>
11. Show streak duration with progress line
This section shows the user's recent streak visually. IonText displays the section title 'Streaks'. The IonItem is used as a styled container without borders (lines="none"). It has two IonNote placed at the start and end slots, showing the start and end dates of the streak. Between them, a <div> with class line-progress (styled with a CSS line) represents the streak visually. Below that, a centered IonText inside a custom <div>. streak-days shows the total number of streak days ('5 days'), using the ion-text-center class for horizontal centering.
<IonContent className="ion-padding-horizontal ion-padding-top">
...
<br />
<IonText>Streaks</IonText>
<IonItem lines="none">
<IonNote slot="start">14 April</IonNote>
<div className="line-progress"></div>
<IonNote slot="end">18 April</IonNote>
</IonItem>
<div className="streak-days">
<IonText className="ion-text-center">5 days</IonText>
</div>
</IonContent>
Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.
Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!