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 Workout Planner Screen is a core feature in fitness, training, and wellness apps. It allows users to create and follow a personalized exercise schedule, track fitness stats like sets, reps, and duration, and monitor overall progress. A strong design includes daily/weekly views, workout categories, completion checkmarks, and summaries, offering a clear, motivational experience.
This guide will walk you through the steps to design and implement a Workout Planner Screen using the Ionic Design Kit. By leveraging its flexible UI components and the Ionic Framework, you can build a structured, responsive, and visually engaging fitness planner that helps users stay on track with their health goals.
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 workout blank --type=react
3. Get inside the project directory
cd workout
4. Create a Workout page
Create page Workout.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const Workout: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default Workout;
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.
5. 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>
6. Add header with back button and title
The outermost wrapper is IonPage, which defines the entire screen in an Ionic app. Inside it, IonHeader contains an IonToolbar where the title and back button are placed. The IonButtons component with slot='start' places the back button on the left side of the toolbar. The IonBackButton is configured with an empty text (so no label appears), a default link defaultHref='#', and a custom icon arrowBack.
IonTitle sets the main title of the page, in this case: 'My workout plan'. This header remains fixed at the top while scrolling the content.
import { arrowBack } from "ionicons/icons";
...
<IonHeader>
<IonToolbar>
<IonButtons slot='start' className='ion-padding-start'>
<IonBackButton text='' defaultHref='#' icon={arrowBack} />
</IonButtons>
<IonTitle>
My workout plan
</IonTitle>
</IonToolbar>
</IonHeader>
This concludes our work with IonHeader, and the following sections will cover working with IonContent.
7. Add a section for daily overview
The IonContent component wraps all scrollable content. It includes multiple IonList blocks. Each list begins with a heading item that uses IonItem, IonLabel, and IonNote.
IonLabel displays the day's name (e.g., 'Monday'), and IonNote to its right shows the number of activities planned for that day (e.g., '3 activities'). The lines='none' attribute removes default dividers between items. The ion-padding-top class adds spacing above the list.
<IonContent>
<IonList lines='none' className='ion-padding-top'>
<IonItem>
<IonLabel>
Monday
</IonLabel>
<IonNote>
3 activities
</IonNote>
</IonItem>
</IonList>
</IonContent>
8. Add workout list items
Each workout is represented by a separate IonItem. On the left, IonThumbnail is used to place an image. The slot='start' aligns the thumbnail at the beginning (left) of the row. Inside it, a standard <img> element is used to show the image file.
IonLabel holds all textual information, including the workout title inside <h2> and two <p> elements showing the level (e.g., 'Beginner') and duration or count (e.g., '20 mins'). On the right side, IonIcon with slot='end' adds a checkmark icon, indicating the activity is complete.
<IonContent>
<IonList lines='none' className='ion-padding-top'>
...
<IonItem>
<IonThumbnail slot='start'>
<img src='wo-1.jpg' alt='image' />
</IonThumbnail>
<IonLabel>
<h2>
Morning yoga
</h2>
<p>
Beginner
</p>
<p>
20 mins
</p>
</IonLabel>
<IonIcon slot='end' icon={checkmark} />
</IonItem>
<IonItem>
<IonThumbnail slot='start'>
<img src='wo-2.jpg' alt='image' />
</IonThumbnail>
<IonLabel>
<h2>
Side booty exercises
</h2>
<p>
Beginner
</p>
<p>
16 mins
</p>
</IonLabel>
<IonIcon slot='end' icon={checkmark} />
</IonItem>
<IonItem>
<IonThumbnail slot='start'>
<img src='wo-3.jpg' alt='image' />
</IonThumbnail>
<IonLabel>
<h2>
Upper-body and core
</h2>
<p>
Beginner
</p>
<p>
20 mins
</p>
</IonLabel>
<IonIcon slot='end' icon={checkmark} />
</IonItem>
</IonList>
</IonContent>
9. Repeat workout list for other days
After the first day ('Monday'), the pattern repeats using new IonList sections for each day (e.g., 'Tuesday', 'Wednesday'). Each of these lists starts with a header item and is followed by multiple activity entries using the same structure described in section 3.
This approach creates a grouped, organized view of a weekly workout plan. The consistent use of Ionic layout components ensures responsiveness and native feel across platforms.
<IonContent>
<IonList lines='none' className='ion-padding-top'>
<IonItem>
<IonLabel>
Tuesday
</IonLabel>
<IonNote>
2 activities
</IonNote>
</IonItem>
<IonItem>
<IonThumbnail slot='start'>
<img src='wo-4.jpg' alt='image' />
</IonThumbnail>
<IonLabel>
<h2>
Full body
</h2>
<p>
Beginner
</p>
<p>
45 mins
</p>
</IonLabel>
<IonIcon slot='end' icon={checkmark} />
</IonItem>
<IonItem>
<IonThumbnail slot='start'>
<img src='wo-5.jpg' alt='image' />
</IonThumbnail>
<IonLabel>
<h2>
Full body stretch
</h2>
<p>
Beginner
</p>
<p>
23 mins
</p>
</IonLabel>
<IonIcon slot='end' icon={checkmark} />
</IonItem>
</IonList>
<IonList lines='none' className='ion-padding-top'>
<IonItem>
<IonLabel>
Wednesday
</IonLabel>
<IonNote>
2 activities
</IonNote>
</IonItem>
<IonItem>
<IonThumbnail slot='start'>
<img src='wo-6.jpg' alt='image' />
</IonThumbnail>
<IonLabel>
<h2>
Upper-body and core
</h2>
<p>
Beginner
</p>
<p>
20 mins
</p>
</IonLabel>
<IonIcon slot='end' icon={checkmark} />
</IonItem>
<IonItem>
<IonThumbnail slot='start'>
<img src='wo-7.jpg' alt='image' />
</IonThumbnail>
<IonLabel>
<h2>
Strong yoga
</h2>
<p>
Beginner
</p>
<p>
56 mins
</p>
</IonLabel>
<IonIcon slot='end' icon={checkmark} />
</IonItem>
</IonList>
</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!