Components

Live previews of every UI component used in My Trainer Connect. Each block shows the rendered output with the exact Tailwind classes from the codebase, plus a code view you can copy.

Jump to Section

Actions Data Entry Data Display Feedback Overlays Navigation Layout

Actions

Data Entry

Default

Disabled

With Error

Please enter a valid email address

Bio

0 / 500 characters

Experience Level

Checked Unchecked Disabled

Notifications

Dark mode

Budget $75

Data Display

Program Overview

12-week strength building program for intermediate lifters.

Weeks

Workouts

4.8

Rating

Default Secondary Destructive Outline Ghost Link

AB SM LG

Name	Status	Role
JD John Doe	Active	Trainer
JS Jane Smith	Pending	Client
MK Mike Kim	Inactive	Client

Calories 1,680 / 2,200

Protein 95 / 150g

Completion 25%

Full 100%

Feedback

Heads up!

Your trial ends in 3 days. Upgrade to keep access to all features.

Error

Your session has expired. Please log in again to continue.

Add to favorites

Overlays

Delete Program

Are you sure you want to delete this program? This action cannot be undone.

Navigation

Tab content for "Overview" would render here.

Tab content for "Profile" would render here.

My Trainer Connect is a platform that connects personal trainers with clients. Trainers can manage clients, build workout programs, and grow their brand.

Layout

Horizontal Separator

Content above the separator.

Content below the separator.

Blog

Docs

Source