Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Profile blocks

Pro

Life Coach Profile Block for React Aria

A life coach's client stories in a carousel: a quote, the client's initials and situation, a from-to pair such as Confidence 4 to 8 drawn as two bars, and the coach's reply, with arrows, dots and a polite Story 2 of 3.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let clients tell it, with this life coach profile for React with React Aria. A compact header says the stories are invented, and the hairline frame under it opens on the coach: initials, name, role and place. Under it a Carousel shows one story at a time. Each has a quote, the client's initials and situation, a from-to pair (for example Confidence in meetings, 4 to 8) drawn as two bars on the same scale with the change in words, and the coach's reply. The foot, ruled by Guides, holds a polite line that names the story in view ("Story 2 of 3"), a dot for each story and Previous and Next Buttons that stay in place at the ends. The arrow keys, Home and End also move between stories, and the arrows follow the reading direction. It's built from Carousel, Button, Badge, Avatar and Guides, with a CSS entrance only. For a coaching platform, a practice site or any profile that lets results speak.

FAQ

How do I fill it with my own stories?

Edit STORIES. Each has an id, the client's initials and situation, a quote, the coach's reply, a measure with a from and a to number, the max of its scale and the weeks the work took. The bars and the words "Up 4" are worked out from the two numbers. Use only stories you have permission to share, and keep clients to their initials.

How do I move between stories?

Press Previous or Next, a dot, or the arrow keys while focus is in the carousel; Home and End jump to the first and last story. The buttons use aria-disabled at the ends so they keep their place and focus. Stories that are out of view are inert, so they cannot take focus.

Does it work right to left?

Yes. The arrow keys follow the reading direction, the chevrons mirror, and the numbers stay whole inside their own isolate. The two bars always grow from the start edge of their scale.

What stays in the page, and how do I make it real?

Everything. The stories are invented and typed. Nothing is sent or saved, and there is no booking or package here. To make it real, load approved stories from your own content source and pass them in place of STORIES.

How does it look on a phone?

The story stays one column and the controls sit under it in the foot. The track is as tall as the longest story, so changing story never moves the foot. Swiping with a finger or dragging with a mouse also changes story.

All 100 profile blocks