Skip to content
GetUrUI

Flowstate

NewTemplateApp UI6 screens

An app-like site for Flowstate, a fictional online yoga and pilates membership: a filterable on-demand library with photo thumbnails and favourites, multi-week programs you tick off day by day, a live calendar with ticking countdowns and reminders, pricing with a monthly / annual toggle, and a class player with pose chapters.

Get this template

A self-contained Next.js project. One-time purchase, lifetime updates for this template, source yours to deploy.

$29

One-time payment in USD, plus tax where applicable.

Or get every template with Lifetime

By continuing you agree to the Terms and the License. You ask for access to the digital content straight away and acknowledge that you lose your 14-day right of withdrawal once you download or install a paid item; our Refund policy still applies.

Included with Lifetime ($149) — compare plans.

Open

What is this?

Flowstate is the front end of an online yoga and pilates membership, built as a design kit: a light-first theme with dark mode, named colour and type roles, and 19 reusable components from class cards and photo frames to a segmented control. Six screens share one in-page router (deep-linkable with ?screen=), and every class thumbnail, program cover, teacher headshot and player still is a real photograph from Pixabay (37 in all, credited, listed in photos.json), ready to swap for your own video stills.

Who is it for?

Online fitness studios, teachers moving classes on demand, and wellness apps that need a membership front end with real interactions: filtering, favourites, program tracking, live scheduling and playback. All state is plain React, so wiring it to your video host and billing is straightforward.

What you get

Everything needed to make it yours.

Filterable class library

Search plus style, duration, level and intensity filters with live counts, a saved-only switch, sort, and a filter sheet on phones. Cards animate in and out as results change.

Favourites everywhere

A heart on every class card and in the player saves it to favourites, with a small pop, and the library can show saved classes only.

Day-by-day programs

Three multi-week programs with week tabs, tickable days, rest days, a progress ring, streak, minutes practised and an up-next card that starts today's session.

Live calendar with countdowns

An on-air-now card and seven days of live classes whose 'starts in' labels tick every second from a fixed clock, with reminder switches and a join button near start time.

Class player mock

Simulated playback with pose chapters on a segmented scrubber: each chapter cross-fades to a photo of the pose, with back and forward 15 seconds, preview speed, the teacher's cue, a next-pose preview and progress.

Pricing that explains itself

A monthly / annual toggle that animates prices and shows the yearly saving, a 14-day trial on every plan, a compare table and an FAQ.

Screens & sections

  • Home: hero with live app preview, new classes, programs, upcoming live classes, features, trial call to action
  • Library: search, style, duration, level and intensity filters, saved-only switch, sort, class cards with favourites
  • Programs: three multi-week programs, day-by-day tracker with ticks, streak, minutes and up next
  • Live: on-air-now card, seven-day calendar with starts-in countdowns and reminder switches
  • Pricing: monthly / annual toggle with savings, 14-day trial, compare table, FAQ
  • Player: simulated playback, chapter scrubber, back / forward 15 s, speed, next-pose preview, progress

Stack

Next.jsReact 19Tailwind CSS 4Motion

38 source files · GetUrUI components bundled

motion, lucide-react, clsx, tailwind-merge

More templates