# Rep Fitness App UI Kit

> 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.

Canonical: https://gsapvault.com/ui-elements/rep-fitness-app-ui-kit
Live demo: https://gsapvault.com/demos/rep-fitness-app-ui-kit/index.html

| Property | Value |
|----------|-------|
| Type | ui-kit |
| Tier | paid |
| Price | £25 |
| Difficulty | advanced |
| Plugins | Draggable, InertiaPlugin |
| Techniques | token-theming, theme-switch, touch-gestures, touch-drag, drag, snap, keyboard-navigation, focus-management, dialog-animation, countdown, svg-draw, state-transition, micro-interaction, tabs, view-transitions |
| Uses Lenis | No |

## Overview

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.

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.

## Features

- 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

## 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

## 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.

## Vibe-Code Ready Setup

This component kit includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

### 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.

## Documentation

How this component kit works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### 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.

<!-- kit:components -->

#### 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 |

<!-- /kit:components -->

### 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.

- Gym training: https://www.pexels.com/photo/39219675/ — Pexels licence.
- City runners: https://www.pexels.com/photo/4853112/ — Pexels licence.

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.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium component kit. The standard license costs £25 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Rep Fitness App UI Kit](https://gsapvault.com/ui-elements/rep-fitness-app-ui-kit)
- [The Vault (£99 one-time, best value): every current and future effect, template and UI element](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt