shadcn.io is not affiliated with official shadcn/ui
Yoga Instructor Chat Block for Vue
A yoga teacher posts pose cards with a drawn figure, both names and a breath cue; add poses to a flow band with move earlier, move later and remove, then walk through it one pose per press.
Installation
Overview
Build a yoga flow pose by pose, with this yoga instructor chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a window for Mathall, a yoga studio: Jessamy Holt posts poses as cards, each with a drawn stick figure, the English and Sanskrit names, a level Badge, a breath cue and an "Add to my flow" Toggle. The flow band above the composer, a held height, lists your poses as numbered chips with Move earlier, Move later and Remove, and says "3 poses, about 2 min" from 45 seconds a pose. "Walk me through it" posts the flow one pose per press, each with its figure and cue, and there is no timer. The Shine Button sends text to a typed script that answers "back" or "tired" with another pose card. It's the starting point for a class chat, a routine builder or any thread that assembles a sequence.
FAQ
What stays in the page, and how do I make it real?
Everything. The six poses, their figures and cues and the replies are typed in the file; the flow lives in the page only. To wire it for real, load poses from your studio's library, save the flow where toggle, move and remove run, and send post's text to your messaging service.
How does the flow band work?
Each pose card's toggle adds or removes the pose, and the chips reorder or remove it; the toggle on every card follows the flow, and the length is derived from the count. The band keeps a fixed height and scrolls inside, with a line that explains the empty state, so adding poses never moves the composer.
What does Walk me through it do?
It posts the next pose of your flow as the instructor's message with its figure and cue, one per press, and then offers to start again. There is no timer: you move on when you are ready.
How are the figures drawn?
Each is a head circle and one line path in a 64 by 64 box, in the text color, hidden from assistive technology; the pose's name and cue are in text beside it.
Is it usable with a keyboard and a screen reader?
Yes. The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden "Jessamy Holt, 10:00" or "You, ...". Delivery is a glyph and a word, never a color. Every control is a real button, field or checkbox with a name, Enter sends and Shift and Enter add a line, and the avatars are hidden from assistive technology because names are always in text.