Breathe: Meditation app template
Ten quiet minutes a day.
For meditation and mental wellbeing apps: a serif manifesto hero, auto-advancing practice tabs, a member's letter, one simple plan, FAQs and an app download card.
About the Breathe template
Breathe is for wellbeing apps. A serif manifesto hero, auto-advancing practice tabs, a member's letter, one simple plan, evidence-based FAQs and a download card keep the page as calm as the product.
Ten quiet minutes a day. It is a complete meditation app landing page for React and Tailwind CSS 4, assembled from 8 Charcoal UI sections.
Who Breathe is for
- Meditation and mindfulness apps.
- Sleep apps.
- Breathwork and journaling.
- Mental health wellbeing tools.
What is inside
8 sections, top to bottom:
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Manifesto: Full-height serif manifesto: lines rise in turn, numbered principles and a hand-drawn signature.
- Features Vertical Tabs: Vertical feature list that advances on its own, with a progress bar and a crossfading photo.
- Testimonials Letter: A customer's thank-you letter on lined paper with a serif body, a P.S. and a self-drawing signature.
- Pricing Single: One honest plan: a big price, everything included, and a guarantee.
- FAQ Grid: Questions laid out in a grid with a contact card, for short answers.
- CTA Download: App download card with store buttons and a QR code for desktop visitors.
- Footer Minimal: One quiet row: brand, a few links and the year.
How it is built
FAQs include a crisis-support answer you can localise. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.
Install Breathe
npx shadcn@latest add @charcoal/breatheTemplates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.
Frequently asked questions
- Can I use Breathe for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Breathe a Next.js template?
- It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.
Sections in this template
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Manifesto: Full-height serif manifesto: lines rise in turn, numbered principles and a hand-drawn signature.
- Features Vertical Tabs: Vertical feature list that advances on its own, with a progress bar and a crossfading photo.
- Testimonials Letter: A customer's thank-you letter on lined paper with a serif body, a P.S. and a self-drawing signature.
- Pricing Single: One honest plan: a big price, everything included, and a guarantee.
- FAQ Grid: Questions laid out in a grid with a contact card, for short answers.
- CTA Download: App download card with store buttons and a QR code for desktop visitors.
- Footer Minimal: One quiet row: brand, a few links and the year.