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 Account Balance Screen is a key feature in fintech, banking, and budgeting apps. It gives users a clear snapshot of their current balance, recent transactions, income, and spending summaries. A well-designed dashboard includes filter options, category icons, visual graphs, and secure interactions, helping users manage their finances with confidence and ease.
This guide will walk you through the steps to design and implement an Account Balance Screen using the Ionic Design Kit. By leveraging its robust UI components and the Ionic Framework, you can build a modern, intuitive, and informative financial dashboard that empowers users to stay in control of their money.
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 dashboard blank --type=react
3. Get inside the project directory
cd dashboard
4. Create a Tab bar component
Use this instruction to create a Tab bar component.
5. Create a Dashboard page
Create page Dashboard.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const Dashboard: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default Dashboard;
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 the page layout and header
The root element is IonPage, which wraps the entire screen content. Inside it, IonHeader contains a IonToolbar used for standard app bars in Ionic. The IonTitle component displays the page title — in this case, "Account". This structure ensures the header remains consistent across views.
<IonHeader>
<IonToolbar>
<IonTitle>Account</IonTitle>
</IonToolbar>
</IonHeader>
This concludes our work with IonHeader, and the following sections will cover working with IonContent.
8. Display profile info and action button
Inside IonContent, a spacing <br /> adds vertical padding. The next element is IonItem, a flexible row component often used for lists. Here, it's styled with ion-margin-top and made clickable via button. The detailIcon shows a notification icon (from ionicons/icons). Inside, IonAvatar displays the user’s image aligned to the start. IonLabel shows the user’s name, and IonButton (aligned to slot="end") lets the user perform an action — "Earn 100 EUR".
<IonContent>
<br />
<IonItem
className="ion-margin-top"
button
lines="none"
detail={true}
detailIcon={notificationsOutline}
>
<IonAvatar slot="start">
<img alt="avatar" src="./d-avatar.jpg" />
</IonAvatar>
<IonLabel>Jennifer Johnson</IonLabel>
<IonButton slot="end" color="primary" shape="round" size="small">
Earn 100 EUR
</IonButton>
</IonItem>
</IonContent>
9. Create a balance summary block
This IonItem also has no bottom line (lines="none") and some top margin. Within it, IonLabel wraps a <p> and an <h1>. The <p> shows the text "Total balance", and <h1> displays the main balance value. This layout ensures consistent alignment and styling.
<IonContent>
...
<IonItem lines="none" className="ion-margin-top">
<IonLabel>
<p>Total balance</p>
<h1>1562.26 EUR</h1>
</IonLabel>
</IonItem>
</IonContent>
10. Add quick action chips
Another IonItem contains IonChip components representing quick actions. The first chip is solid and labeled "Send", while the other two are outlined using outline={true}, labeled "Add money" and "Request". These chips are styled buttons for immediate actions.
<IonContent>
...
<IonItem lines='none'>
<IonChip color='primary'>
Send
</IonChip>
<IonChip color='primary' outline={true}>
Add money
</IonChip>
<IonChip color='primary' outline={true}>
Request
</IonChip>
</IonItem>
</IonContent>
11. Insert a header for the transactions section
This section uses IonItem with a top padding class to label the transaction history. IonLabel displays "Transactions", and IonButton with fill="clear" adds a "See all" option aligned to the end, styled minimally using the primary color.
<IonContent>
...
<IonItem lines='none' className='ion-padding-top'>
<IonLabel>
Transactions
</IonLabel>
<IonButton fill='clear' color='primary'>
See all
</IonButton>
</IonItem>
</IonContent>
12. Render a list of recent transactions
The IonList component groups multiple IonItem transactions. Each transaction shows an IonIcon (arrowUp or arrowDown) in the start slot, followed by an IonLabel containing the name and date. The amount is shown using IonNote in the end slot. Each transaction is clearly structured for quick reading and visual distinction.
<IonContent>
...
<IonList lines='none'>
<IonItem>
<IonIcon icon={arrowUp} slot='start' />
<IonLabel>
Jennifer Johnson
<p>
Sent · Apr 22
</p>
</IonLabel>
<IonNote slot='end'>
560 EUR
</IonNote>
</IonItem>
<IonItem>
<IonIcon icon={arrowUp} slot='start' />
<IonLabel>
Jennifer Johnson
<p>
Sent · Apr 17
</p>
</IonLabel>
<IonNote slot='end'>
800 EUR
</IonNote>
</IonItem>
<IonItem>
<IonIcon icon={arrowDown} slot='start' />
<IonLabel>
Michael Smith
<p>
Apr 10
</p>
</IonLabel>
<IonNote slot='end'>
1000 EUR
</IonNote>
</IonItem>
</IonList>
</IonContent>
13. Insert a header for recent contacts
Another IonItem with ion-padding-top introduces the "Recent contacts" section. It's a simple text item not meant to be interactive but acts as a title for the next list.
<IonContent>
...
<IonItem lines='none' className='ion-padding-top'>
Recent contacts
</IonItem>
</IonContent>
14. Show recent contacts with avatars
This IonList contains three IonItem elements for recent contacts. Each includes an IonAvatar with a corresponding image, and an IonLabel with the contact's name. The avatars are aligned to the start, making it easy to identify people visually.
<IonContent>
...
<IonList lines='none'>
<IonItem>
<IonAvatar slot='start'>
<img alt='avatar' src='./d-avatar-2.jpg' />
</IonAvatar>
<IonLabel>
Michael Smith
</IonLabel>
</IonItem>
<IonItem>
<IonAvatar slot='start'>
<img alt='avatar' src='./d-avatar-3.jpg' />
</IonAvatar>
<IonLabel>
Miller Johnson
</IonLabel>
</IonItem>
<IonItem>
<IonAvatar slot='start'>
<img alt='avatar' src='./d-avatar-4.jpg' />
</IonAvatar>
<IonLabel>
Charlotte Williams
</IonLabel>
</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!