shadcn.io is not affiliated with official shadcn/ui
Size Guide FAQ Block for Vue
A FAQ for an outdoor-clothing shop whose first answer is a size guide: a centimetres or inches switch and a table of body measurements, above five rows on delivery, returns and care.
Installation
Overview
A size-guide FAQ for Vue with Ark UI. A centred header sits over rows that run from rail to rail, each opened by a chevron at its start. The first answer is open on load and holds a size guide: a one-line instruction, a switch between centimetres and inches, a table of body measurements (size, chest, waist, hip) that scrolls inside itself on a narrow screen, and a note on where to measure. Five more rows cover delivery, returns, exchanges, care and repairs, and a contact line closes the block. The rails and top rule come from the Guides spine, so the block lines up with its neighbours. It's built from Accordion, Segment Group, Table, Guides and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For product pages where a wrong size is the main reason for a return.
FAQ
How do I change the sizes and measurements?
Edit MEASURES at the top of the file: each size has its chest, waist and hip in centimetres. The inches column is worked out from those numbers, rounded to the nearest half, so there's one list to keep right. Add a column by adding a field, a TableHead and a TableCell. The other questions are in QUESTIONS.
How does the unit switch work?
It's a Segment Group named "Unit" with centimetres and inches, and exactly one is always on. The line beside it ("Measurements in centimetres") is a polite live region, so a screen reader hears the change, and the table keeps its size, because only the numbers change. The choice isn't saved between visits.
How does the table behave on a phone and with a keyboard?
The table sits in a box that scrolls sideways when the screen is narrower than the table. With a keyboard, Tab focuses the box and the arrow keys scroll it; it's a named region ("Size guide"), so a screen reader announces it. Each size is a row header, so the reader says "M, chest 96".
Are the closed answers in the page's markup?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens.
How does the accordion work with a keyboard?
Each question is a button inside its own h3 under the section's h2. Enter or Space opens and closes one, and the button says whether it's expanded; one answer is open at a time.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.