BrowserMoon App templatesMeditation app session detail screen

Meditation app session detail screen template

A session detail screen for a meditation or mindfulness app on iOS and Android. Built for guided meditation apps where each session has a hero image, a play button and a description. Build it in Bolt, Lovable, or Replit.

Home App templates

About this app template

The detail screen is where somebody decides to press play or go back. This template puts a large landscape photograph at the top, the session title in a serif typeface over a dark gradient, a prominent play button, and three action rows underneath: Details, Days and More journeys. The layout works for any content that has a cover image and a single primary action: guided meditations, sleep stories, breathing exercises, yoga flows. Paste it into Bolt, Lovable or Replit and wire the play button to an audio player.

Build a full mobile app with this template design

A home screen carries the type scale, spacing, and card style a user sees more than any other surface, so it can set the standard for every screen after it. Copy the template, paste it into Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, or Cursor, and send this alongside it.

Paste into Claude Code, Replit, Lovable, Bolt, or Cursor

Common questions about this template

How do I wire the play button to audio?

Ask your AI to add a Howler.js or native audio element behind the play button, reading the file URL from your session data. The button already has the right size and position, so the AI only needs to add the listener.

Should I show the full description on this screen?

Keep the description short, two or three sentences, and put the full text behind the Details row. People on this screen have already decided to look; what they need now is permission to start.