ui-042
Optional AI setup

Rep Fitness App UI Kit

£25

A fitness mobile app component library with daily steps, workout logging, rest timers, progress charts, kudos and local crew chat. Cool graphite and lime, a violet light theme, Manrope headings, and eight connected app screens.

DraggableInertiaPlugin advanced
15 more details
token-themingtheme-switchtouch-gesturestouch-dragdragsnapkeyboard-navigationfocus-managementdialog-animationcountdownsvg-drawstate-transitionmicro-interactiontabsview-transitions
Rep Fitness App UI Kit - UI component kit preview

The kit's assembled screens, full window and fully interactive:

View interactive demo: Today Train Session Progress Crew Crew chat You Get started
Open Rep Fitness App UI Kit demo in new tab

About this kit

Rep is a mobile fitness app UI kit with a searchable component library and eight connected screens you can use. Daily steps, strength sessions and crew encouragement provide the worked example: start on Today, log each exercise in Session, save it to Progress, then give someone kudos or leave a message in the crew chat.

Read the full effect overview

Cool graphite surfaces, brand-lime actions and Manrope numerals give it a sharper athletic identity. Barlow carries the everyday controls and copy. Both themes read the same tokens, so a buyer can change the type, colours and dimensions in one place.

The library includes individual controls, form patterns, navigation, exercise data, overlays and composed sections. Each component has its own folder, and the connected screens reuse the same pieces. The phone previews fill a mobile viewport and sit in a handset column on a desktop.

This is a front-end kit for web and hybrid apps. Activity figures and crew members are sample content. Workout sets, saved sessions, preferences, kudos, comments and messages are stored locally; there is no server, sensor integration, real messaging or authentication.

What's included

11 items
  • Searchable component catalogue with family index and mobile index sheet
  • Eight connected screens: Today, Train, Session, Progress, Crew, Chat, You and onboarding
  • Two themes with shared colour, type, spacing and motion tokens
  • Barlow interface typography and Manrope display numerals
  • Four-exercise set logger with editable weight and reps, a rest timer and saved workout history
  • Daily step visualisation, interactive weekly chart, hydration log and step-goal sheet
  • Crew workout feed with reversible kudos, comments, a challenge and local chat
  • Draggable goal sheet, edge-swipe page stack, shared focus trapping and Escape dismissal
  • Local state survives navigation and reloads when browser storage is available
  • Individual component sources and generated full-kit CSS and JavaScript bundles
  • Baked WebP photography and documented keyboard interaction

Perfect for

4 use cases
  • Fitness and activity-tracking progressive web apps
  • Gym logging and coaching app prototypes
  • Habit and wellness dashboards for mobile web
  • Capacitor, Cordova or other WebView-based app interfaces

How it works

3 sections

Browse the parts, then open the app

The library lets you inspect each component in isolation. Its screen links open complete pages assembled from those same components, with real navigation and local interactions.

Rebrand through shared tokens

The themes share role names for ink, surfaces, controls and motion. A change to one token reaches the kit’s forms, cards, data displays and app screens.

Connect your own data

The worked example uses browser-local state and sample fitness data. Replace the sample content and connect the component events to your own app services.

Plugins Draggable, InertiaPlugin
Difficulty Advanced
Includes Every component in its own folder of markup, styles and script, the assembled screens, the two bundles, documentation, AI setup prompt, lifetime updates

Questions about this component kit

Can I open a finished app preview?

Yes. Open Today from the screen links and use the five-tab navigation. You can log sets, run the rest timer, save a session to Progress, give kudos and add a message to the local crew chat. Eight pages are included.

Can I take just one component?

Yes. Link the shared tokens, base stylesheet and runtime, then use the files from one component folder. The full CSS and JavaScript bundles are also supplied. The searchable catalogue and its rail are demo furniture.

Does Rep connect to health data or send real messages?

No. Steps and crew activity are sample data. Your edits, logged sessions and messages stay in browser storage, and no message is sent to another person. Sensor access, authentication, a backend and real-time messaging are integrations for your own app.

How is this different from Simmer?

Rep is built around movement, gym sessions and a supportive crew. Its default is dark graphite with lime actions and athletic Manrope headings and Barlow body type, plus a matching light theme. The components include exercise logging, progress history, kudos and chat.

Is it a native mobile app?

It is HTML, CSS and JavaScript for mobile web and hybrid app shells. On a phone the app screens fill the viewport; on desktop they sit inside a handset column. There are no native platform project files.

Can I change the fonts and colours?

Yes. Typography, palette, spacing and motion are named in tokens.css. The Barlow family is loaded with fallbacks and can be replaced alongside the font tokens. Photographs are local WebP files you can swap.

Paid component kit

Purchase to unlock the code.

Buying Rep Fitness App UI Kit opens every component as its own folder of markup, styles and script, the assembled screens and both bundles, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£25 Standard license, unlimited projects

Browse UI elements

Documentation

Quick Start

  1. Serve this folder from a local web server and open index.html to browse the library, or today.html to use the app preview.
  2. For the complete kit, link assets/style.css and load the supplied GSAP dependencies followed by assets/script.js.
  3. For one component, link assets/tokens.css, assets/base.css, assets/base.js and that component folder’s stylesheet/script. Copy its specimen.html fragment. Components with include directives need the referenced component markup too; the assembled screen pages demonstrate the resolved result.

The catalogue rail, search and index sheet live in catalogue.css and catalogue.js; they are demo furniture and are not required by an app. All root HTML pages and component source folders are included.

What’s Included

Controls, inputs, navigation, activity and training displays, feedback layers, fitness sections and connected screens. The app tabs are Today, Train, Progress, Crew and You; Session, Chat and onboarding are linked from those tabs.

Foundations

Cool graphite, lime and an athletic type ramp. Every component reads the same tokens.

Component Folder Root Keyboard
Colour roles components/colors/ .k-colors Native keyboard controls; visible focus
Typography components/typography/ .k-typography Native keyboard controls; visible focus
Icons components/icons/ .k-icons Native keyboard controls; visible focus
Layout & spacing components/layout/ .k-layout Native keyboard controls; visible focus

Controls

Made for a thumb between sets: clear labels, generous targets, short motion.

Component Folder Root Keyboard
Buttons components/button/ .k-button Native keyboard controls; visible focus
Icon buttons components/icon-button/ .k-icon-button Native keyboard controls; visible focus
Switches components/switch/ .k-switch Native keyboard controls; visible focus
Choice controls components/checkbox-radio/ .k-checkbox-radio Native keyboard controls; visible focus
Segmented control components/segmented-control/ .k-segmented-control Native keyboard controls; visible focus
Stepper components/stepper/ .k-stepper Native keyboard controls; visible focus
Slider components/slider/ .k-slider Native keyboard controls; visible focus
Filter chips components/chip/ .k-chip Native keyboard controls; visible focus
Effort rating components/rating/ .k-rating Native keyboard controls; visible focus

Inputs

Log the details of a session, find an exercise, or set the next goal.

Component Folder Root Keyboard
Text fields components/text-field/ .k-text-field Native keyboard controls; visible focus
Search bar components/search-bar/ .k-search-bar Native keyboard controls; visible focus
Date picker components/date-picker/ .k-date-picker Native keyboard controls; visible focus
Training tags components/tag-input/ .k-tag-input Enter or comma adds; Backspace removes the last tag; Tab reaches remove buttons
Workout form components/form-layout/ .k-form-layout Native keyboard controls; visible focus
Photo attachment components/photo-picker/ .k-photo-picker Native keyboard controls; visible focus

Navigation

Five app tabs, real destinations, and controls that stay within the handset.

Component Folder Root Keyboard
App shell components/app-shell/ .k-app-shell Native keyboard controls; visible focus
Navigation bar components/nav-bar/ .k-nav-bar Native keyboard controls; visible focus
Tab bar components/tab-bar/ .k-tab-bar Native keyboard controls; visible focus
Page stack components/page-stack/ .k-page-stack Native keyboard controls; visible focus
Scrollable tabs components/tabs/ .k-tabs Native keyboard controls; visible focus
Page indicator components/page-indicator/ .k-page-indicator Native keyboard controls; visible focus
Action toolbar components/toolbar/ .k-toolbar Native keyboard controls; visible focus

Activity & training

Numbers with context: today’s movement, training sets and the week behind you.

Component Folder Root Keyboard
Workout cards components/workout-card/ .k-workout-card Native keyboard controls; visible focus
Exercise list components/exercise-list/ .k-exercise-list Native keyboard controls; visible focus
Daily activity components/activity-ring/ .k-activity-ring Native keyboard controls; visible focus
Rest timer components/timer/ .k-timer Native keyboard controls; visible focus
Set logger components/set-list/ .k-set-list Native keyboard controls; visible focus
Avatars components/avatar/ .k-avatar Native keyboard controls; visible focus
Badges components/badge/ .k-badge Native keyboard controls; visible focus
Progress components/progress/ .k-progress Native keyboard controls; visible focus
Activity chart components/bar-chart/ .k-bar-chart Native keyboard controls; visible focus
Workout history components/workout-history/ .k-workout-history Native keyboard controls; visible focus

Feedback & overlays

Sheets, alerts and empty states share the same focus and dismissal behaviour.

Component Folder Root Keyboard
Confirmation dialog components/dialog/ .k-dialog Native keyboard controls; visible focus
Toasts components/toast/ .k-toast Native keyboard controls; visible focus
Action sheet components/action-sheet/ .k-action-sheet Native keyboard controls; visible focus
Goal sheet components/bottom-sheet/ .k-bottom-sheet Native keyboard controls; visible focus
Action menu components/menu/ .k-menu Native keyboard controls; visible focus
Empty states components/empty-state/ .k-empty-state Native keyboard controls; visible focus
Loading states components/skeleton/ .k-skeleton Native keyboard controls; visible focus
Banners components/banner/ .k-banner Native keyboard controls; visible focus

App sections

Fitness-specific compositions for a daily check-in, a workout and a crew conversation.

Component Folder Root Keyboard
Daily header components/daily-header/ .k-daily-header Native keyboard controls; visible focus
Week strip components/week-strip/ .k-week-strip Native keyboard controls; visible focus
Hydration log components/hydration/ .k-hydration Native keyboard controls; visible focus
Workout header components/workout-header/ .k-workout-header Native keyboard controls; visible focus
Crew feed components/crew-feed/ .k-crew-feed Native keyboard controls; visible focus
Crew chat components/chat-thread/ .k-chat-thread Native keyboard controls; visible focus
Crew challenge components/challenge/ .k-challenge Native keyboard controls; visible focus
Athlete profile components/profile-header/ .k-profile-header Native keyboard controls; visible focus
Settings components/settings-group/ .k-settings-group Native keyboard controls; visible focus
Onboarding components/onboarding-pager/ .k-onboarding-pager Native keyboard controls; visible focus

Clickable app

Open Today to use the app. Each screen is composed from the components in this library.

Component Folder Root Keyboard
Today components/today-screen/ and today.html .k-today-screen Native keyboard controls; visible focus
Train components/train-screen/ and train.html .k-train-screen Native keyboard controls; visible focus
Session components/session-screen/ and session.html .k-session-screen Native keyboard controls; visible focus
Progress components/progress-screen/ and progress.html .k-progress-screen Native keyboard controls; visible focus
Crew components/crew-screen/ and crew.html .k-crew-screen Native keyboard controls; visible focus
Crew chat components/chat-screen/ and chat.html .k-chat-screen Native keyboard controls; visible focus
You components/profile-screen/ and profile.html .k-profile-screen Native keyboard controls; visible focus
Get started components/onboarding-screen/ and onboarding.html .k-onboarding-screen Native keyboard controls; visible focus

Themes and Typography

assets/tokens.css owns both themes and the UI, display and numeric roles. Set data-theme="dark" or data-theme="light" on the document. Manrope is deliberately used for clear, expressive numbers and sentence-case headings; Barlow keeps long labels and ordinary app copy readable. The broad sans-serif shapes avoid the condensed gym-poster look. Both are open fonts served by Google Fonts with system fallbacks; self-host them for an offline build.

Motion and Reduced Motion

GSAP 3.15.0 core, Draggable and InertiaPlugin load from jsDelivr. The sheet and page stack use Draggable; the sheet snaps between detents. The floating frosted-glass navigation dock has a magnetic selection pill that follows pointer and keyboard focus. Progress uses an elastic period indicator; the working-weight stepper rolls individual digits; training tags spring in and collapse out. These adapt the Magnetic Pill Nav, Elastic Segmented Switch, Quantity Stepper Roll and Tag Input Chips elements to the kit tokens. The Session stepper updates unfinished sets for the current exercise, and workout tags save with the plan. Reduced motion uses immediate states. The rest timer tracks elapsed time independently from animation and updates its display only while visible.

Accessibility and Keyboard

Controls have visible focus and phone-sized targets. Native inputs retain their keyboard behaviour. Segmented controls, tabs and effort ratings support arrows; sliders retain Home/End and arrow keys. A screen’s tab bar uses real links. Every overlay uses the shared Escape handler, focus trap and focus return. The goal sheet can expand using its handle button and close without a gesture; page-stack details have a Back button as well as edge swipe. Theme changes work with a layer open. Live regions announce actions without reading a timer every second.

Local Demo State

Sample steps, activity history and crew members are fictional. The kit includes no sensor access, health guidance, authentication, backend or real messaging. Local storage remembers settings, water, set rows, saved sessions, kudos, comments and the chat thread where available. Clearing the browser’s storage resets the demo. A storage-disabled browser still renders the components, with persistence unavailable. Connect your own application services to the component events and runtime helpers when building a product.

Photography

Bundled WebP derivatives are cropped and toned from Pexels photographs. Replace the files in assets/img/ to use your own imagery. assets/img-manifest.json records the regeneration inputs; in the Vault source repository run bun scripts/build-template-assets.ts rep-fitness-app-ui-kit to rebake them.

The photographs illustrate workout content; the depicted people are not the fictional crew members.

Dependencies

Modern browser, GSAP core and the listed plugins. No framework, build process or backend is required to use the assembled files. Serve through HTTP for the most consistent page navigation and local storage behaviour.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Your cart

Your cart is empty

The Vault £99

Every effect, template and UI element: 165 today, plus everything we release next.

Or browse effects, templates or UI elements.