Forem: Silvia O'Dwyer

20 Useful Flexbox CSS Snippets to Check Out

Silvia O'Dwyer — Fri, 21 Mar 2025 16:38:21 +0000

🎯 20 Useful Flexbox CSS Snippets You'll Use Again and Again

Flexbox is one of the most powerful layout tools in CSS. In this guide, I'll be covering 20 useful CSS snippets for utilising Flexbox effectively. It'll include common scenarios and lots of tips n' tricks.

Let's get started!

📌 Anatomy of a Flexbox Rule

Before we dive in, let’s break down a Flexbox rule:

.container {
  display: flex; /* Defines a flex container */
  justify-content: center; /* Aligns items horizontally */
  align-items: center; /* Aligns items vertically */
}

Selector (.container): Targets the element.
Property (display: flex): Turns it into a flex container.
Values (center, space-between, etc.): Adjust the layout.

💡 Top Tip: When in doubt, add outline: 1px solid red; to see what's happening!

1. Center Anything (Literally)

No more margin: auto tricks—this centers anything inside a flex container.

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full viewport height */
}

2. Space Out Items Evenly

Want equal spacing between items? Use justify-content: space-between.

.container {
  display: flex;
  justify-content: space-between;
}

3. Wrap Items to the Next Line

Allows items to wrap when they exceed the container width.

.container {
  display: flex;
  flex-wrap: wrap;
}

This is great for creating responsive columns without the need for extra media queries.

4. Make a Sticky Footer

Ensure your footer sticks to the bottom when there's little content.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.footer {
  margin-top: auto;
}

5. Add 3 Items per Row

A common scenario involves adding a certain number of items per row, such as 3 images per row for a gallery.
To do this, just create a parent container and then set the width of the elements within to a percentage. For 3 items, it would be 33%, for 4 items it would be 25% and so forth.

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 70vw;
    justify-content: center;
}

.container img {
    width: calc(33.333% - 10px); /* Three images per row */
    height: auto;
}

6. Gap Property Support in Flexbox

Modern browsers now support the gap property in Flexbox layouts, eliminating the need for margins between items.

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

7. Flex-grow

You can use fractional values with flex-grow to create more nuanced distributions of space.

.container {
  display: flex;
}

.item-primary {
  flex-grow: 2; /* Gets twice as much extra space */
}

.item-secondary {
  flex-grow: 1; /* Gets normal amount of extra space */
}

.item-minimal {
  flex-grow: 0.5; /* Gets half as much extra space */
}

8. Align Items to the Bottom

Great for chat bubbles or sticky elements.

.bottom-align {
  display: flex;
  align-items: flex-end;
}

9. Reverse Column Order

Flip the order of items without touching the HTML.

.reverse {
  display: flex;
  flex-direction: column-reverse;
}

10. Equal-Width Flex Items

Make all child elements take up equal space.

.equal {
  display: flex;
}
.equal > * {
  flex: 1;
}

11. Center Align Items

You can ensure the contents in the container stay center-aligned along the cross-axis by setting align-items to center.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

12. Make One Item Grow, Others Stay Fixed

Perfect for layouts with sidebars or main content.

.grow {
  display: flex;
}
.grow > .main {
  flex: 1;
}

13. Align Item to End of Row

You can also align an item to the end of a row by setting the margin-left property to auto.

.container {
  display: flex;
  flex-direction: row;
}

.item-third {          
  margin-left: auto;
}

14. Prevent Items from Shrinking

Prevents items from shrinking when the container size changes. To ensure the items wrap to the next line, add the flex-wrap property also.

.item {
  flex-shrink: 0;
  flex-wrap: wrap;
}

15. Align Content When Wrapping

Controls the alignment of flex items when they wrap to a new line.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

16. Wrap-reverse

If you'd like to reverse the order of the items and also ensure that the items wrap too, just set flex-wrap to wrap-reverse.

.container {
  display: flex;
  flex-wrap: wrap-reverse;
}

17. Align One Specific Item Differently

Overrides alignment for a specific flex item.

.item {
  align-self: flex-end;
}

18. Controlling Flex Item Growth Precisely

Using auto margins on flex items creates space between groups of items without extra wrapper elements. This is perfect for creating navigation bars with separated sections.

.navbar {
  display: flex;
  flex-direction: row;
}

.logo {
  margin-right: auto; /* Pushes everything else to the right */
}

.nav-links {
  /* These will be pushed to the right side */
}

19. Ordering Items in Responsive Layouts

The order property can rearrange flex items without changing your HTML structure. This is especially useful for responsive designs.

.container {
  display: flex;
}

.sidebar {
  order: 2; /* Will appear second visually */
}

.main-content {
  order: 1; /* Will appear first visually */
}

20. Align to End of Column

You can align an item to the end of a column by setting margin-top to auto. This is useful for sidebar layouts, for instance.

.container {
  display: flex;
  flex-direction: column;
}

.item-third {          
  margin-top: auto;
}

Follow Me for More Tips

If you want to get more resources like this, be sure to follow me on X/Twitter where I provide more resources like this. :-)

Got Any Other Tips to Share?

Thanks for reading! I hope that you've found this resource useful. What are your thoughts? Do you have any other Flexbox tips that you'd like to share? Be sure to let me know in the comments section below.

These snippets are super useful for common scenarios that you'll encounter as a developer. Flexbox is an incredibly powerful CSS layout tool for your toolkit. Copy these snippets, tweak them as needed, and use these to start building awesome layouts.

Thanks for reading!

7 Stunning Docsify Themes to Check Out

Silvia O'Dwyer — Fri, 07 Mar 2025 19:12:33 +0000

Welcome!

Docsify is a useful website generator that you can use to create documentation for your libraries and projects.

In this guide, I've rounded up seven Docsify themes that can give your docs that extra flair.

Also I make lists like these pretty regularly and share them with subscribers through my frontend toolbox newsletter. I share memes and other interesting news/articles and libraries. If you're a frontend dev, I'd be delighted if you joined! 😊

And now, without further ado, let's dive in!

1. Docsify Darklight Theme

This theme offers a sleek toggle between dark and light modes, and a preview of both are shown below.
You can create a new project with this theme or add it to an existing project instead. It is very quick to setup overall, and the full instructions are provided in the docs linked below.

🌞 Light theme

🌙 Dark theme

Website: Docsify Darklight Theme

GitHub Repo: GitHub Repo

Features:

User-friendly theme switcher
Highly customizable
Seamless integration with existing Docsify setups

2. Catppuccin Docsify Mocha

This is a soothing pastel theme that would be excellent for documentation sites. There are four other themes available too, so be sure to take a look at those also.

Preview

GitHub Repo: GitHub Repo
Website: Website

Features:

Aesthetic, pastel color scheme
Easy setup
Four pastel themes to choose from

3. Docsify Themeable Simple Dark

Docsify Themeable offers a robust system with multiple themes and rich customization options. One of these is the Simple Dark theme, which is shown below.
The cover page for the theme is also re-designed, featuring a sleek, gradient background.

Preview:

It also provides syntax highlighting for code snippets:

Website: Docsify Themeable

GitHub Repo: GitHub Repo

Features:

Quick setup
Gradient background cover pages
Loading indicator
Extensive customization options

4. Docsify Dark

This is one of the built-in themes provided by Docsify. It is quick to add, and can be added with one line of HTML.

There are also other themes available as part of the themes page. You can also preview each of the themes there by clicking on the options provided underneath the "Click to Preview" heading.

Preview

Features:

Part of the core themes
Just add with one line of HTML

If you would like to add a dark mode toggle, be sure to take a look at the dark mode switch plugin here.

6. Docsify Themeable Simple

Docsify Themeable also provides a light-theme variant, which is shown below.
You can also customize the theme quickly, as it uses CSS variables. There are lots of other customization options available too. The theme also provides a built-in loading indicator, but you can toggle this to display or not via the customization options.

Preview

GitHub Repo: GitHub Repo
Website: Docsify Themeable

Features:

Loading indicator
Cover page with gradient background
Theming via CSS variables
Lots of other customization options

7. Docsify Buble Theme

This is a modern, minimalist theme for Docsify that is available as part of the core themes.

Preview

To preview this theme, just visit this page and then click the buble.css option underneath the "Click to preview" header.

Features:

GitHub markdown styling
Minimalistic design
Easy to implement

Conclusion

Thanks for reading!
Hopefully you've found this guide useful and discovered some cool new Docsify themes to check out.

Follow Me For More Roundups

If you'd like to see more roundups like this, be sure to follow me on X/Twitter

If you have other themes or tips to share, drop them in the comments below. I'd love to update this guide with new examples.

Happy documenting!

10 Stunning Vitepress Themes To Check Out

Silvia O'Dwyer — Thu, 27 Feb 2025 14:11:06 +0000

Welcome!

Vitepress is a static generator that is popular for building documentation sites. It's blazing fast and is quick to setup overall. Within a few minutes, you can create a documentation site or blog that's powered by Vite and transforms Markdown files into static pages.

There's a great selection of Vitepress themes available that can transform the design aesthetic of your site. We'll be exploring lots of examples in this list, including those that would be useful for API documentation, blogs, documentation and more.

Get More Resoucres

Before we dive in, quick note: If you'd like to see more resource roundups like this in the future, I also publish a weekly frontend newsletter here, where I cover useful & interesting frontend resources each week.

Alright, with that aside, let's dive in to the goods!

1. Catppuccin Mocha

Catppuccin is a stunning pastel color scheme with four themes, including Mocha, which is shown below. This is a dark-theme variant that provides a lovely design aesthetic.

Here's a preview of what a documentation page looks like:

Live Demo: Cattppucin

GitHub Repo: GitHub Repo

Features:

Dark, elegant design
Responsive layout
Switch between light/dark mode
Customizable color accents

🔧 Top Tip: Set your theme variant to 'mocha' in your config:

export default {
  themeConfig: {
    catppuccin: {
      variant: 'mocha'
    }
  }
}

Catppuccin Latté

This is an example of a pastel theme in the Latté variant. You can also specify which accent color you'd like to use too. Full details on this are in the live demo linked above.

Preview

Plus, that's not all! There are also two other themes available, Frappé & Machiatto, with a delightful pastel aesthetic also. There are preview images of these in the documentation, which I'd recommend taking a look at also.

2. VitePress Blog Theme

If you’re looking to build a personal blog or a dev journal, be sure to take a look at this theme! It has built-in post categories, reading time estimates, and author profile pages.

Preview

Website: VitePress Blog Starter Demo

GitHub Repo: GitHub Repo

Features:

Clean, readable layout
SEO-friendly
Dark mode
Styled with unoCSS
Built-in local search functionality

3. Vitepress OpenAPI

If you'd like to build API documentation, then I'd recommend taking a look at this theme! It can be used to integrate OpenAPI specifications into your docs. It's a super useful theme if you'd like to create a documentation site for your API.

It displays a code snippet beside each endpoint, along with a live demo too, useful for developers that would like to try out the API first.

🌞 Light theme

🌙 Dark theme

Demo: Vitepress OpenAPI Demo
Docs: Vitepress OpenAPI

GitHub Repo: GitHub Repo

Features:

Modern design
Localization support
Code snippets beside each endpoint
Live demo of each endpoint
Intuitive

4. Aplós

This is an incredible theme with a stunning design and visual aesthetic overall. It has multiple page layouts, including a blog post page, a page for showcasing features and more.

There are lots of built-in components which you can add to the site, including a full-width navigation bar, sticky navigation island, alternative tables and more.

If you'd like to build a blog or website that contains guides, be sure to take a look at this theme. It has a delightful user interface overall, and would be excellent as a blog theme.

Preview

Website: Aplós

GitHub Repo: GitHub Repo

Features:

Ultra-lightweight ⚡
Beautiful design
Multiple page layouts
Simple customization
Built-in components available

5. API Documentation

You can create API documentation quickly and easily using this theme created by Logicspark. It also has a dark mode support, which you can enable by clicking on the theme button in the header.

🌙 Dark theme

🌞 Light theme

Live Demo: VitePress Blog Theme

GitHub Repo: GitHub Repo

Features:

Quick setup
Great for creating API documentation
Dark mode support

6. Vitepress Blog Pure

If you'd like to use Vitepress to build a blog, then be sure to take a look at this theme. It has a modern, minimalist design overall and stunning typography.

Along with blog post pages, you can also quickly add static pages too; an example is the About page shown in the navigation bar.

Live Demo: Live Demo

GitHub Repo: GitHub Repo

Features:

Beautiful typography ✨
Great navigation UI
Modern, minimalist design
Fully responsive
Dark mode

7. VitePress Demo Block

If you'd like to add components to your pages, this theme can help to make it intuitive to add components. Perfect when creating component libraries or documentation pages that require live demos.

Preview

Website: VitePress Demo Block

GitHub Repo: GitHub Repo

Features:

Prebuilt dark/light color schemes
Great for adding interactive components
Useful for component libraries

8. Vitepress Theme You

This is a modern, minimalist theme that would be well-suited towards generating documentation sites. You can also configure the theme to add a cover page too, and this is shown in the live demo linked below.

🌞 Light theme

🌙 Dark theme

Website: Vitepress Theme You

GitHub Repo: GitHub Repo

Features:

Great for documentation sites
Clean, modern interface
Dark mode
Responsive

9. VitePress Theme Curve

This is a feature-packed theme with all sorts of useful components built-in. It can make for an excellent blog or documentation theme. Blog posts have an animated table of contents, comments sections, category tags and more.

🌞 Light theme

🌙 Dark theme

Website: VitePress Theme Curve

GitHub Repo: GitHub Repo

Features:

Responsive and mobile-friendly
Prebuilt dark/light mode
Great for blog sites
Animated effects
Lots of built-in components

10. Lumen

Lumen is a Vitepress theme with extra features built-in including site statistics, announcements, and more.

It has a selection of useful components that would be excellent for adding to a site, including social sharing buttons, link cards and video components.

I'd also recommend taking a look at the demo to see the additional features available too.

🌙 Dark theme

🌞 Light theme

Here is an example of what a documentation page looks like:

Website: Lumen

GitHub Repo: GitHub Repo

Features:

Social sharing buttons
Comments via Twikoo
Dark-mode support
Site statistics
Link cards
Extra built-in components

Wrapping Up

Thanks for reading!

In this guide, we've explored lots of cool VitePress themes including those for building documentation sites, blogs, API docs and more.

Vitepress is a very useful static site generator that can be used for a variety of different contexts. I'd definitely recommend taking a look at the demos linked above to see the themes in action!

Got a favorite VitePress theme I missed? Let me know! I'd love to update this with more examples.

Hope to see you again soon!

How to Deploy A Docsify Site to GitHub Pages

Silvia O'Dwyer — Sat, 22 Feb 2025 16:02:49 +0000

Build and Deploy a Docsify Site to GitHub Pages 🚀

Welcome!

If you want to build a Docsify site and push it to GitHub Pages, you've arrived at the right tutorial!

Docsify is a markdown-powered static site generator that doesn’t require a build process. And the best part? You can deploy it to GitHub Pages in minutes.

Let's get started!

1. Prerequisites 📋

Before diving in, make sure you have:

Node.js & npm installed (Docsify requires them)
A GitHub account (You’ll need this for deployment)
Git installed (to push your site to GitHub)

To check if you have Node.js installed, run:

node -v

If you see a version number, you’re good to go. If not, you can download it from nodejs.org.

2. Install Docsify-CLI

Docsify has a CLI, which makes setup easier. Install it globally with:

npm install -g docsify-cli

Now, you can generate a new Docsify site in seconds using this tool.

3. Set Up Your Docsify Site 📂

Create a new directory and then move into it:

mkdir my-docs-site && cd my-docs-site

Then, initialize your Docsify site:

docsify init ./

This creates:

index.html - Entry file
README.md - Homepage content

Want to see your site? Run:

docsify serve

Then open http://localhost:3000/ in your browser, and your new site will be up and running 🎉

4. Customize Your Site 🛠️

Open index.html and tweak the <title> or theme settings. Docsify supports different themes, and you can configure sidebar navigation, plugins, and more. Check out the Docsify docs for customization options.

💡 Pro Tip: If you have a GitHub repo already and just want docs for it, you can generate 4-7+ pages about the library (including a getting started guide etc) using this documentation generator for Docsify. You can export the full code and deploy it to GitHub quickly.

This can be useful if you'd like to quickly scaffold the documentation pages for your repo.

5. Deploy to GitHub Pages 🚀

Step 1: Initialize a Git Repository

Inside your Docsify folder, run:

git init

When adding files to git, you can specify to ignore unnecessary files by adding a .gitignore file to your directory. One way is through the command-line, but you could also create a new file in your code editor and then save it.

echo "node_modules/" >> .gitignore

Step 2: Create a GitHub Repository

When you're ready to publish your new site, it's time to create a new GitHub repo!

Go to GitHub and create a new repository. One of the options will be to initialize a README, but since we already have one, there's no need to select this.

Now, link your local repo to GitHub:

git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO

Step 3: Commit and Push Your Docsify Site

git add .
git commit -m "Initial Docsify site"
git branch -M main
git push -u origin main

Step 4: Enable GitHub Pages

Go to your repo on GitHub.
Navigate to Settings > Pages.
Under Branch, select main and click Save.
Your site will be available at https://YOUR_USERNAME.github.io/YOUR_REPO/ after a few minutes. 🎉

Adding A Docs Site To A GitHub Repo

If you already have a library or code repo (with your code) and want to add documentation to this, you can add a docs folder to your repo and include the Docsify site there.

Then when you enable GitHub pages for your site, any time you push to the docs directory, your site will be automatically updated.

Follow Me For More Tutorials

If you'd like to get more tutorials like this, be sure to follow me on Twitter/X where I will be posting more developer resources and code tutorials.

Wrapping Up

Thanks for reading!

Docsify really makes it super intuitive to build and deploy a markdown-based documentation site.

And with just a few commands, your docs are live on GitHub Pages.

Hopefully you've found this guide useful, and let me know if you have questions. I'm always glad to help!

10 Open-Source Documentation Frameworks to Check Out

Silvia O'Dwyer — Fri, 21 Feb 2025 20:09:56 +0000

So you want to build a documentation site for your project? Well, you've arrived at the right place!

We'll be taking a look at a selection of documentation frameworks that you can use to quickly create your project's docs.

And now, without further ado, let's get started!

1. VitePress

First up, I'd recommend VitePress, which is a static site generator powered by Vue.js. It's optimized for building documentation sites and generates pages from Markdown files.

The default theme has a great, modern aesthetic. It also supports dark-mode out of the box, along with built-in search functionality too. You can also configure Vitepress to add a cover page too, which showcases features of your project's library.

It's super quick to get started with, and is powered by Vite, which makes it blazing-fast ⚡️.

Preview:

Website: Vitepress

GitHub Repo: Vitepress GitHub Repo

Features:

Fast and SEO-friendly
Dark mode theme
Markdown-centric
Built-in search
Quick to setup

🍵 Vitepress Catppuccin plugin

For a pastel aesthetic, be sure to check out the Catppuccin Vitepress plugin, which has four aesthetic themes to choose from:

🌞 Light Theme

🌙 Dark Theme

Top Tip: You can also render Vue components, which can be useful for displaying code examples or custom components within the documentation.

2. Fumadocs

Fumadocs is a new documentation framework that leverages Next.js to build documentation sites. It has a stunning user interface, and an incredibly modern visual aesthetic.

It's powered by Next.js, and has lots of useful components you can add to the pages.

Preview

Website: Fumadocs

GitHub Repo: GitHub Repo

Features:

Modern interface with a stunning design
Responsive layout
Markdown-based content
Built-in search functionality
Localization support

3. mdBook

The next tool I'd recommend is mdBook, which is a Rust-powered documentation site generator that's quick to setup and install.

It has a cool collection of themes available, and has dark mode support too, a preview of which is shown below. You can switch themes by clicking the paintbrush icon in the top header bar.

MDBook also has built-in search functionality and code syntax highlighting support, which is very useful when you want to add code snippets as part of your docs.

🌞 Light Theme

🌙 Dark Theme

Website: Website

GitHub Repo: GitHub Repo

Features:

Powered by Rust
Modern, minimal interface
Built-in search support
Lots of themes to choose from

4. MkDocs

Next up, I'd recommend taking a look at MkDocs! Written in Python, it uses Markdown for content authoring and offers a stunning variety of themes.

Simply add your content files as markdown, and with a single command, your docs will be built!

I often use this for building documentation sites for my repos, and would highly recommend it as it is super quick to install and setup.

Website: MkDocs

GitHub Repo: GitHub Repo

Features:

Quick installation and setup
Wide range of themes available
Markdown-based content authoring
Lots of plugins available

MKDocs Material

One of the most popular themes is MKDocs Material, which has a stunning and modern aesthetic. It supports dark-mode and content search right out of the box, plus lots of other cool features.

I've been using it for one of my open-source repositories and would highly recommend it! A demo is here.

Here's a preview:

5. Docusaurus

Docusaurus is a modern documentation generator developed by Facebook and built with React. It's one of the most popular documentation generators out there, with over 50k stars on GitHub.

It has a lot of customization options so that you can configure the look and feel of the generated site.

🌞 Light Theme:

🌙 Dark Theme:

Website: Docusaurus

GitHub Repo: GitHub Repo

Features:

Built with React
Customizable themes and layouts
Comprehensive documentation
Versioning and localization support

6. Slate

If you'd like to build API documentation, then I would recommend taking a look at Slate. This is a popular, open-source generator designed for creating beautiful, responsive API documentation. Its clean layout and easy navigation make it a favorite for documenting RESTful APIs.

Preview:

Website: Slate

GitHub Repo: GitHub Repo

Features:

Responsive and modern design
Clean, intuitive navigation
Markdown-based content authoring
Customizable styling
Extensive documentation

7. Astro Starlight

Astro is a blazing-fast static site generator, which you can use to build blogs, documentation sites and more. It has a useful documentation theme called Starlight, with lots of features including built-in search, a dark theme, localization and more.

🌙 Dark Theme

🌞 Light Theme

Website: Starlight

GitHub Repo: GitHub Repo

Features:

Quick to setup
Dark mode
Detailed documentation and examples
Powered by Astro

8. Docsify

Docsify generates documentation websites on the fly without a static site generator build process. Simply write Markdown files and then Docsify will handle the rest.

You can also configure Docsify to generate a full-screen cover page, which has a cool, randomized gradient background. A preview of this is shown below:

If you want a documentation site that just works out of the box, without any build steps, then I would recommend Docsify.

Website: Docsify

GitHub Repo: GitHub Repo
Automatic Generator for Your Repo: Generator Here

Features:

No build process required
Real-time Markdown rendering
Customizable themes and plugins
Easy integration and setup

9. Zola

Zola is a static site generator written in Rust. It has some cool documentation themes that you can use to build docs sites quickly. One of these is the EasyDocs Theme, and a preview of it is shown below. This theme has a modern, minimal design aesthetic with a quick setup overall.

Preview:

Website: Zola Easy Docs Theme

GitHub Repo: GitHub Repo

Features:

Generates static HTML sites from Markdown
Simple configuration and setup
Lightweight and fast performance
Clean, responsive design
Well-organized documentation

10. Docus

Docus is a documentation theme that's powered by Nuxt and Vue. It's quick to setup overall, and uses a markdown-based system for content authoring.

It has a built-in collection of components that may be useful when building documentation sites. You can quickly specify the project's social media profiles and more in the configuration options. These will then be displayed in the header of the page.

Preview

Demo: Docus Demo

GitHub Repo: GitHub Repo

Features

Powered by Nuxt
Different layouts available, including blog posts
Markdown-based
Lots of useful components available

(Also, I put together lists like this pretty often and send them out weekly too, usually with a few extra finds + frontend news/memes. If you're into that, it's here)

Conclusion

Thanks for reading! Hopefully you've discovered some new documentation frameworks to take a look at.

Do you have any others you'd like to recommend? Let me know, as I'd love to update this list with new examples!

Wishing you the very best, and hope to see you again soon!

10 Open-Source Icon Libraries to Check Out for 2026🚀

Silvia O'Dwyer — Sat, 15 Feb 2025 16:53:41 +0000

Welcome! In this guide, we're going to take a look at a selection of stunning icon libraries, which are free and open-source. Perfect for adding some magic to your websites, web apps and dashboards.

Let's get started!

💡 Also I make lists like these pretty regularly and share them with subscribers through my frontend toolbox newsletter. I share memes and other interesting news/articles and libraries. If you're a frontend dev, I'd be delighted if you joined! :)

And now, without further ado, let's dive into the list!

1. Heroicons

Heroicons is a modern, beautifully designed icon library. It was created by the creators of Tailwind CSS, and has over 300 icons to choose from.

You can quickly search for icons on the official website, and preview the collection.

Website: Heroicons

GitHub Repo: GitHub Repo

Features:

Available in outline, solid, and mini styles
Vue and React components available
Figma file
300+ icons to choose from

2. Feather Icons

Feather Icons is a minimalist and lightweight open-source icon set, focused on simplicity and elegance. It has over 280 icons available, which you can quickly search for. You can install the icon library via NPM or by loading the script via a CDN.

Website: Feather Icons

GitHub Repo: GitHub Repo

Features:

SVG-based for easy integration
Install via NPM or CDN
Interface has customization sidebar

3. Tabler Icons

Next up is Tabler Icons! This is a crisp and highly customizable icon set that would be well-suited to websites, dashboards and web applications. There are thousands of icons to choose from; it's a very extensive collection, I must say!

Website: Tabler Icons

GitHub Repo: GitHub Repo

Features:

Great for dashboards and admin interfaces
Available as React, Vue, Angular, and Svelte components
Figma plugin available
Extensive collection

4. Lucide Icons

Lucide is a community-driven fork of Feather Icons, offering additional icons, as well as packages for utilising the icons in various frameworks including React, Angular and Vue.

Website: Lucide Icons

GitHub Repo: GitHub Repo

Features:

Expanded collection of icons
Available for multiple frameworks
Figma plugin
Optimized for modern UI/UX design

5. Google Material Symbols & Icons

Google’s Material Symbols is an extensive icon collection with thousands of icons to choose from. It's very useful if you'd like to build a web dashboard. It also has a Figma plugin so that you can utilise the icons in your designs before developing the product, site or web app.

The user interface makes it seamless to search for different icons and it even has dark mode support too! The interface also features a customization sidebar, plus you can search for icons by category.

Dark mode:
Click the Moon emoji in the bottom-left corner to enable dark mode!

Website: Material Symbols

GitHub Repo: GitHub Repo

Features:

Extensive collection of icons
Great for web apps, dashboards and user interfaces
Figma plugin
Search for icons by category

6. Bootstrap Icons

Bootstrap Icons is a free icon set with packages available for React and Vue.js. I often use this library for my own projects, and would definitely recommend taking a look at it! You can quickly search for icons on the official website and get the icons you need.

Website: Bootstrap Icons

GitHub Repo: GitHub Repo

Features:

Available in SVG and font formats
Easy to customize with CSS
Packages available for React and Vue (on NPM)

7. Radix Icons

Radix Icons is a thoughtfully designed icon set grouped into different collections, such as arrows, typography icons and more. You can download the icons as SVGs (through a .zip archive) or install the library for React via NPM.

Website: Radix Icons

GitHub Repo: GitHub Repo

Features:

Crisp and modern aesthetic
Available as SVG and React components
Install via NPM or download as SVGs
Free and open-source

8. Iconoir

Iconoir is a free and open-source icon library with a modern aesthetic. The icons are available for multiple frameworks including React and Vue.js.

Website: Iconoir

GitHub Repo: GitHub Repo

Features:

Over 1,200 icons
Consistent and minimalistic design
Supports React, Figma, and SVG
Free for personal and commercial use
Regular updates

9. Phosphor Icons

I'd also recommend taking a look at the Phosphor icon library. It has a wide range of styles including a cool duotone style! You can preview the various styles by clicking the Styles dropdown in the top header menu.

You can also customize the size of the icons or randomize the styles too. The interface is very intuitive overall, and makes it quick and easy to search for the icons you need.

Examples:

Website: Phosphor Icons

GitHub Repo: GitHub Repo

Features:

Supports multiple weights and styles
Available in SVG, React, Vue, and more
Customizable stroke width and colors
Open-source and free to use

10. Carbon Icons

Carbon Icons is IBM’s open-source icon library, part of the Carbon Design System, ideal for web applications, dashboards and more.

Website: Carbon Icons

GitHub Repo: GitHub Repo

Features:

Part of the IBM Carbon Design System
Available as React, Angular and Vue components
Install via NPM or Yarn
You can also use the icons in vanilla JavaScript

Conclusion

Hopefully you've discovered some cool icon sets that you can use for your project.

Do you have any other examples you'd like to mention? Be sure to let me know in the comments below!

📦 10 Amazing Classless CSS Frameworks to Check Out for 2026 🚀

Silvia O'Dwyer — Wed, 12 Feb 2025 23:57:12 +0000

Welcome! In this post, I'll be outlining 10 amazing classless CSS frameworks that you can use to style your web pages with ease.
Simply drop one line of HTML into the <head> tag of your website, and your webpage will be looking ✨stunning✨ instantly.

I think that classless CSS frameworks are an excellent way to quickly enhance a webpage in seconds.

Let's begin!

1. Pico.css

Pico.css is an excellent classless CSS framework with a modern, minimal aesthetic.

Preview

Features:

Responsive
Dark theme support
Great documentation
Cool examples
Form styling
Built-in components

Website: Website
GitHub Repo: GitHub Repo

2. Holiday.css

If you want to style a webpage, article or blog post quickly, then be sure to take a look at the Holiday.css framework. It has a modern visual aesthetic, and supports dark mode too.

It also has built-in code snippet styling with syntax highlighting, which can be useful for creating code tutorials and so forth.

Overall, this framework could be very useful if you'd like to create a personal website, blog or just want to add some magic to a website.

☀️ Light theme

🌙 Dark theme

Website: Website
GitHub Repo: GitHub Repo

Features:

Only ~5kb, super lightweight
Responsive
Nav styling
Converts nested <ul>s into dropdowns
Code snippet styling with syntax highlighting
Dark theme support
Form styling

3. LaTeX.css

If you'd like to style your webpages like LaTeX documents, then this is the CSS library for you! It's such a cool library overall, and can be great if you'd like to make articles and blog posts appear like LaTeX documents.

It also has an alternative typeface available, you can preview this by scrolling to the "Alternative Typeface" section, and there will be a toggle button which you can click to preview the other typeface.

☀️ Light theme

🌙 Dark theme
There's also a dark theme version too. If you scroll down on the website, there will be a toggle that you can click to enable/disable dark theme mode.

Website: Website
GitHub Repo: GitHub Repo

Features:

Responsive
Dark theme support
Supports sidenotes
Beautiful styling of tables, blockquotes etc
Support for displaying equations, proofs, theorems, lemmas
Text formatting

4. Bamboo

Bamboo is a CSS framework with a clean, minimal design. It automatically switches the theme according to the system mode, but you can also specifically specify whether to use light/dark mode. This framework is super lightweight, and is fully responsive also.

☀️ Light theme

🌙 Dark theme

Features:

Responsive
Dark theme support
Great documentation
Cool examples
Form styling
Built-in components

Website: Website
GitHub Repo: GitHub Repo

Get Resources To Your Inbox
💡 I make lists like these pretty regularly and share them with subscribers through my newsletter. I share memes and other interesting news/articles and libraries for frontend devs. If you're a frontend dev, I'd be delighted if you joined! :)

5. New.css

You can use this for styling a blog post, article or just for stylising text. It has a sleek, modern aesthetic and can instantly enhance your website in seconds.
It has both light and dark mode support.

☀️ Light theme

🌙 Dark theme

Bonus: It also has a cool terminal theme, you can preview it here.

** Terminal theme**

Website: Website
GitHub Repo: GitHub Repo

Features:

Responsive
Dark theme support
Built-in header styling
Cool terminal theme
Great documentation

6. Simple.css

Simple.css is another great library I would recommend taking a look at. You can see a preview of it below, and a link to the website is also provided below too.

Preview

Website: Website
GitHub Repo: GitHub Repo

Features:

Responsive
Dark theme support
Built-in header styling
Test page with common HTML elements, view it here

7. Silicon.css

Silicon.css is a new framework which can make webpages look incredible instantly! It uses the Outfit font, which adds a modern aesthetic overall. It supports dark mode, and looks great on mobile devices too.

Website: Website
GitHub Repo: GitHub Repo

Features:

Responsive
Dark theme support
Great documentation

8. Tacit

Tacit is a great CSS framework which you can quickly add to your webpages. You can see a preview of it in the image below, and the library's website acts as a demo for the library too, so you can preview what it looks like.

Preview

Website: Website
GitHub Repo: GitHub Repo

Features:

Responsive
Dark theme support
Great documentation
Cool examples

9. MVP.css

I'd also recommend taking a look at MVP.css, which helps you to quickly style your webpages. If you're creating a new website for a project and want to style the page without much CSS, then just import this library and you're good to go!

Preview

Website: Website
GitHub Repo:GitHub Repo

Features:

Responsive
Dark theme support
Great documentation
Great for quickly building project websites etc

10. Almond.css

Almond.css is a lovely, minimalist CSS framework that's lightweight and responsive. It has great documentation, and showcases a preview of what common HTML elements look like with the framework styling applied.

You can install it via NPM or by adding the stylesheet to your website's head tag.
The theme can be adjusted, so it supports custom styling too.

Preview

Website: Website
GitHub Repo: GitHub Repo

Features:

Responsive
Great documentation
Custom styling
Lightweight

Got more examples?

What are your favourite classless CSS libraries? Be sure to let me know, as I would like to update the article with new libraries.

Thanks for reading, and hope to see you again soon!

How to Add A React Lightbox to Your Project or Website (in Just 3 Steps)

Silvia O'Dwyer — Wed, 28 Sep 2022 13:35:46 +0000

Want to add a React lightbox to your project? You've come to the right place!

In this guide, we're going to be taking a look at how to add a lightbox to your React project in just 3 simple steps.

This is great if you want to include a lightbox in your:

eCommerce store
blog
portfolio or personal website
and so much more

Let's get started!

Demo

Here's a demo of what we'll be creating:

Pretty cool, right? And what's even better is that it can be set-up in a matter of minutes.

Step 1: Install Lightbox.js

Firstly, install Lightbox.js, which is a fully responsive React lightbox that has a great set of features, perfect for desktop and mobile devices.

Features include:

Image zooming
Mobile zoom
Thumbnails
Slideshow
Theming and customization options

We'll be taking a look at these features below also, just to show some of the extended functionality provided with the lightbox.

To install the lightbox, simply open your terminal of choice and run:

npm install lightbox.js-react --save

Once the package is installed, it's time to get started with implementing it!

Step 2: Initialization

Open the file of the React component where you wish to integrate the lightbox and add the following imports:

import React, {useEffect} from "react";
import 'lightbox.js-react/dist/index.css'
import {SlideshowLightbox, initLightboxJS} from 'lightbox.js-react'

Licensing:

Lightbox.js is free if you're using it for an open source project. Otherwise, a commercial license can be purchased, which can be done so on the pricing page here.

Readers of this tutorial can also avail of an exclusive 35% off discount, using the code OFFER35.

Open source project: Contact Lightbox.js to get a free license key through the contact form here.
Commercial project: Purchase a commercial license on the official website here. Use the exclusive code OFFER35 to get a discount too!

If you're an individual developer, the Individual commercial license is recommended, while a Team & Company plan can be purchased for teams or companies wishing to use the library.

Once you have your license key, pass it to the initLightboxJS function you imported previously, along with the name of the plan your license uses. The two plan types are team and individual.

useEffect(() => {
  initLightboxJS("Insert License key", "Insert plan type here");
});

Step 3: Adding the Lightbox

Next, wrap the images you wish to include in a SlideshowLightbox component, as shown in the example snippet below.

Add the following to your JSX:

<SlideshowLightbox theme="day" showThumbnails={true} className="images" roundedImages={true}> 
    <img alt='Mechanical keyboard with white keycaps.' src={"https://source.unsplash.com/sQZ_A17cufs/549x711"} />
    <img alt="Mechanical keyboard with white, pastel green and red keycaps."  src={"https://source.unsplash.com/rsAeSMzOX9Y/768x512"} />  
    <img alt="Mechanical keyboard with white, pastel pink, yellow and red keycaps."  src={"https://source.unsplash.com/Z6SXt1v5tP8/768x512"} />
    <img alt="Mechanical keyboard with white keycaps." src={"https://source.unsplash.com/2WcghjtPodU/549x711"} />       

</SlideshowLightbox>

While no extra CSS is required to style the images in the lightbox itself, if you'd like to style the initial images displayed outside (the images which are clicked to display the lightbox), you could use flexbox so that the images are positioned in a row. This step is optional however, as it may depend on your use case and how you'd like the images to be displayed and so forth.

Add the following CSS:


.images {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.images img {
    flex-basis: 33%;
    padding: 2px;
}

The Result

If you've followed the steps above, you should now have a lightbox that displays whenever any of the images are clicked! Here's a demo:

Full Example

import React, {useEffect} from "react";
import { SlideshowLightbox, initLightboxJS } from "lightbox.js-react";
import "lightbox.js-react/dist/index.css";

export function Demo() {
  useEffect(() => {
    initLightboxJS("Insert License key", "Insert plan type here");
  });

  return (
    <SlideshowLightbox
      theme="day"
      showThumbnails={true}
      className="images"
      roundedImages={true}
    >
      <img
        alt="Mechanical keyboard with white keycaps."
        src={"https://source.unsplash.com/sQZ_A17cufs/549x711"}
      />
      <img
        alt="Mechanical keyboard with white, pastel green and red keycaps."
        src={"https://source.unsplash.com/rsAeSMzOX9Y/768x512"}
      />
      <img
        alt="Mechanical keyboard with white, pastel pink, yellow and red keycaps."
        src={"https://source.unsplash.com/Z6SXt1v5tP8/768x512"}
      />
      <img
        alt="Mechanical keyboard with white keycaps."
        src={"https://source.unsplash.com/2WcghjtPodU/549x711"}
      />
    </SlideshowLightbox>
  );
}

Bonus Step: Theming & Customization

This step is optional, but if you'd like to update the lightbox's theme, this is possible through passing a value to the theme prop. The three themes available are:

day: A white background with gray icons
night: A dark background with white icons
lightbox: A semi-transparent gray background with gray icons

For further customization, you can also adjust the background color of the lightbox by passing a color to the backgroundColor prop as an RGB, RGBA, HEX code, or CSS color name value:

<SlideshowLightbox backgroundColor="gray">
...
</SlideshowLightbox>

Here's an example with the lightbox theme:

Exploring More Demos

If you'd like to see more examples and demos of Lightbox.js in action, be sure to take a look at our demos page, which lists lots of example demos to get you started.

Online café shop

Photo showcase

Conclusion

Thanks very much for reading this tutorial, I hope you've found it useful! If you have any questions or comments, be sure to let me know below!

If you have any issues with setting up the lightbox or need any other assistance, don't hesitate to let me know or use the contact form provided on the official website, where all support queries are answered.

Thanks again, and wishing you the very best!

How I Created an Ecommerce App with Medusa and Ionic

Silvia O'Dwyer — Thu, 25 Aug 2022 11:46:00 +0000

Introduction

Ionic is an open source toolkit that allows developers to create cross-platform apps that support a variety of mobile platforms, including Android and iOS. Developers can build with their frontend framework of choice, including Angular, Vue and React.

Medusa is an open source composable ecommerce platform that allows developers to create their own customizable and extendable online store. Medusa aims to provide developers with a great experience creating unique ecommerce stores.

In this tutorial, you’ll build an ecommerce app using Medusa and Ionic. This app can then be used on mobile phones such as Android, iOS and Windows phones, and can also be used as a progressive web app (PWA).

You can view the source code for the tutorial in this repository on GitHub.

Prerequisites

To use Medusa, you need Node.js (version 14+) installed on your machine. You can download it from the official Node.js website.

Set up the Medusa Server

First, install the Medusa CLI by running the following command in your terminal:

npm install -g @medusajs/medusa-cli

Next, run the following command to create a new Medusa server:

medusa new ecommerce-store-server --seed

The --seed flag populates the database with demo data that can then be used as part of the ecommerce store later on.

Finally, navigate to the ecommerce-store-server directory and start the server:

cd ecommerce-store-server
medusa develop

If the server runs successfully, you should see in your terminal an output similar to this:

Install Medusa Admin

Next up, it's time to setup and run the Medusa Admin dashboard. In a separate directory, run the following command:

git clone https://github.com/medusajs/admin medusa-admin

Navigate into the newly-created medusa-admin directory and install the dependencies for the project:

cd medusa-admin
npm install

Then, to run the admin, execute the following command in your terminal:

npm run develop

This runs the Medusa admin on localhost:7000. Make sure the Medusa server is also still running.

If you open the Medusa Admin, you should see a login page.

Since you created a Medusa server in the previous section with the --seed flag, a test user was created in addition to the demo data. So, you can use the email admin@medusa-test.com and password supersecret to log in.

The Medusa admin includes many functionalities such as viewing orders, managing products, configuring your store and regions, and much more!

You can try editing some of the existing demo products or adding new products in the Medusa admin.

Initialize An Ionic Project

In this section, you’ll start building the Ionic app.

First, install the Ionic CLI by running the following command:

npm install -g @ionic/cli

Then, in a separate directory, create a new Ionic app using the following command:

ionic start ecommerce-store blank --type=react

This tutorial uses React to create the Ionic app. This is specified as part of the command above with the --type flag.

It usually takes several minutes to install all the dependencies required for the project.

Once the installation is done, change to the ecommerce-store directory and install the other dependencies required:

cd ecommerce-store
npm install axios

axios is used to send asynchronous requests to the Medusa server. This will allow you to perform operations such as fetching products.

Testing the Ionic App

To test out the blank ionic app, run the following command in your terminal:

ionic serve --lab

This runs a development Ionic server on localhost:8100 and the Ionic Lab on localhost:8200. You can use the Ionic Lab to simulate how the app looks like on different devices such as iOS or Android.

Change Store CORS Variable

Since the Ionic app runs on port 8100, you need to update the Store CORS settings on your Medusa server in the medusa-config.js file to the following:

const STORE_CORS = process.env.STORE_CORS || "http://localhost:8100"

For more information, check out this official guide on updating your CORS settings.

Make sure to restart the Medusa server after making this change.

Create Product Item Cards

In this section, you’ll create a reusable component to display products as cards on the home page.

First, you need to create two interfaces, one for products and another for images. These interfaces will be used to define the structure of a product and an image.

To do that, create the file src/Interfaces.tsx with the following content:

export interface Product {
    id: string;
    title: string;
    handle: string;
    images: Image[];
    description: string;
    variants: any[];
}

export interface Image {
    url: string;
}

Next, you’ll create the reusable product item card component.

Now that the interfaces are defined and exported, it’s time to create the UI for the product item cards.

Create a new file src/components/ProductItemCard/ProductItemCard.tsx with the following content:

import React, { useEffect } from 'react';
import { IonCard, IonCardHeader, IonCardSubtitle, IonImg, IonCardTitle } from '@ionic/react';
import { Product } from '../../Interfaces';

const ProductItemCard = ({ product }: { product: Product }) => {

  return (
    <div>
      {product && (
        <IonCard routerLink={"/product/" + product["id"]} className="product_card">
          <IonImg src={product.images[0]["url"]} class="image" />
          <IonCardHeader>
            <IonCardTitle className="product_title"><b>{product["title"]}</b></IonCardTitle>
            <IonCardSubtitle>{product["handle"]}</IonCardSubtitle>
            <IonCardSubtitle>${product["variants"][0]["prices"][1]["amount"] / 100}</IonCardSubtitle>
          </IonCardHeader>
        </IonCard>
      )}
    </div>

  );
};

export default ProductItemCard;

Each card displays the image, title, type and price of a product. A product prop will be passed to the component, and its corresponding metadata is then displayed. The Product interface is used to enforce the type of the product prop.

Create the Home layout

Now that the component for individual product cards has been created, it’s time to fetch and render the products in the Home layout screen.

The Home.tsx and Home.css files are created by default in src/pages when you initialize an Ionic project. Create a new directory src/pages/Home and move Home.tsx and Home.css into the src/pages/Home directory.

Edit the Header

If you open the src/pages/Home/Home.tsx file and take a look at the returned JSX, you'll see a header has automatically been added for you. You can replace the text nested in the component IonTitle with the name of your ecommerce store. For example:

<IonHeader>
    <IonToolbar>
      <IonTitle>Medusa Ecommerce Store</IonTitle>
    </IonToolbar>
</IonHeader>

Fetch Products from the Medusa Server

Create the file src/server-url.js with the following content:

const medusaServerBaseURL = "http://localhost:9000";

export default medusaServerBaseURL;

It’s useful to define the base URL of the Medusa server in one file. Then, if the port or URL needs to be updated, you only need to update the URL in this file.

If you’re testing on a mobile device, the URL should be changed to your machine’s IP.

Next, in src/pages/Home/Home.tsx, replace the imports at the beginning of the file with the following:

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonGrid, IonRow, IonCol, } from '@ionic/react';
import './Home.css';
import React, { useEffect, useState } from 'react';
import axios from "axios";
import ProductItemCard from '../../components/ProductItemCard/ProductItemCard';
import medusaServerBaseURL from "../../server-url";

Then, create a state variable inside the Home component to store the products:

const [products, setProducts] = useState([]);

And add the following after creating the state variable:

useEffect(() => {
    axios
      .get(`${medusaServerBaseURL}/store/products`)
      .then((response) => {

        if (response.data) {
          let products = response.data.products;

          setProducts(products);
        }
      })
      .catch((err) => {
        console.log("error", err)
      });
  }, []);

With useEffect, the Home component will fetch the products from the server when the screen first opens. A request is sent with axios to the List Products endpoint. Then, the result is used to set the products state variable.

Create A Grid of Products

Next up, it’s time to create a grid of product items using the <IonGrid> component.

Still in src/pages/Home/Home.tsx, add the following within the <IonContent> element in the returned JSX, replacing the <ExploreContainer> component:

<IonGrid class="ion-no-padding ion-no-margin">
    <IonRow>
     {products.map((product, i) =>
         <IonCol size="6">
             <ProductItemCard product={product} />
         </IonCol>)}
     </IonRow>
</IonGrid>

This grid renders each product using the ProductItemCard component. Two products are displayed per row, but if you’d like to alter this to a single product per row, update the size prop for the IonCol element to 12. For more information on grids in Ionic, be sure to take a look at the official documentation.

Add the CSS

Change the content of src/pages/Home/Home.css to add some helpful styling:

.product_card {
    cursor: pointer;
}

.product_title {
    font-size: 1em;
}

Testing the Home Screen

Make sure that the Medusa server is still running and re-run the Ionic server if it’s not still running.

If you open the app now in Ionic lab, you should see on the Home screen the products fetched from your Medusa server.

Please note that the screenshot shown is in dark mode due to system preferences. If you use light mode, the screen will look different.

Create the ProductDetail Screen

In this section, you’ll create the ProductDetail screen. This screen will display the individual product’s information and image.

Create the file src/pages/ProductDetailPage/ProductDetailPage.tsx with the following content:

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import './ProductDetailPage.css';
import React, { useEffect, useState } from 'react';
import { IonCard, IonCardHeader, IonBackButton, IonButtons, IonCardSubtitle, IonToast, IonImg, IonCardTitle, IonCardContent, IonButton } from '@ionic/react';
import axios from "axios";
import { RouteComponentProps } from 'react-router-dom';
import { Product } from '../../Interfaces';
import medusaServerBaseURL from "../../server-url";

const ProductDetailPage: React.FC<RouteComponentProps<{ id: string }>> = (props) => {
  const [product, setProduct] = useState<Product>();

  useEffect(() => {
    let product_id = props.match.params.id;

    axios
      .get(`${medusaServerBaseURL}/store/products/${product_id}`)
      .then((response) => {
        if (response.data.product) {
          setProduct(response.data.product);
        }
      })
      .catch((err) => {
        console.log("error", err)
      });
  }, [props.match.params.id])

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton text="">
            </IonBackButton>
          </IonButtons>
          <IonTitle>Medusa Ecommerce Store</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>

        {product && (

          <IonCard mode="ios">
            {product["images"] && (
              <IonImg class="product_detail_img" src={product.images[0]["url"]} />
            )}
            <IonCardHeader>
              <div className="metaInfo">
                <IonCardTitle>{product["title"]}</IonCardTitle>
                <IonCardSubtitle>{product["handle"]}</IonCardSubtitle>
                <h3>${product["variants"][0]["prices"][1]["amount"] / 100}</h3>
              </div>

            </IonCardHeader>
            <IonCardContent>
              <h3>Description</h3>
              {product["description"]}
              <IonButton class="button" size="default" shape="round" expand="block">Add to Cart</IonButton>

            </IonCardContent>
          </IonCard>
        )}

      </IonContent>
    </IonPage>
  );
};

export default ProductDetailPage;

In this page, the product ID is retrieved from the route parameters. Then, the axios library is used to send a request to the Retrieve Product endpoint on the Medusa server to retrieve the individual product’s data. Then, the product state variable is set using the response of the request.

Next, create the file src/pages/ProductDetailPage/ProductDetailPage.css with the following content:

.product_detail_img {
    height: 30vh;
    object-fit: cover;
}

@media (prefers-color-scheme: light) {  
    h3 {   
         color: black;  
    }
}

h3 {
    font-weight: bold;
}

.button {
    margin-top: 1em;
}

.metaInfo {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

Add a New Route

To actually use the new screen, it must be added as a new route in the app.

First, import the ProductDetailPage component in src/App.tsx:

import ProductDetailPage from './pages/ProductDetailPage/ProductDetailPage';

Then, add the new route into the list of routes defined in App:

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/home">
          <Home />
        </Route>
        <Route exact path="/">
          <Redirect to="/home" />
        </Route>
        <Route path="/product/:id/" component={ProductDetailPage} />

      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

Test Product Details Screen

While the Medusa and Ionic development servers are still running, open the Ionic Lab in your browser and click on one of the products in the home screen. A new screen opens showing the product’s details.

Show Add to Cart Notification

In this section, you’ll add a simple toast notification when the Add to Cart button is clicked. This doesn’t actually add the product to cart but only simulates the functionality.

In the src/pages/ProductDetailPage/ProductDetailPage.tsx file, add the following after the creation of the product state variable to create a new state variable managing the visibility of the toast notification:

const [showToast, setShowToast] = useState(false);

Then, add an IonToast component in the returned JSX. It should be placed within IonContent and after the IonCard component:

<IonContent fullscreen>
   {product && (

     <IonCard mode="ios">
            ...
     </IonCard>
    )}

    <IonToast
      isOpen={showToast}
      onDidDismiss={() => setShowToast(false)}
      message="Product added to cart"
      duration={800}
    />

</IonContent>

Finally, change the Add to Cart button to add an onClick event handler:

<IonButton class="button" size="default" shape="round" expand="block"  
onClick={() => setShowToast(true)}>Add to Cart</IonButton>

Now, whenever the button is clicked, the value of showToast is set to true to show the toast notification.

Testing the Notification

While the Medusa and Ionic development servers are still running, on the details screen of one of the products click the Add to Cart button. A toast notification will then be shown for a few seconds indicating that the product was added to cart.

What’s Next?

By following this tutorial, you’ve successfully connected your Ionic app to your Medusa server, and fetched products from the server.

More features can be added using your Medusa server in your Ionic app including:

Adding cart functionalities that allows the customer to add items to their carts and manage its content.
Implement the Checkout flow to allow customers to place an order
Integrating a payment provider such as Stripe

Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.