shadcn.io is not affiliated with official shadcn/ui
Overview Tabs About Block for Vue
An about section for a travel platform: a pill control for Mission, Vision, Values and Culture, each panel a different layout inside one framed card.
Installation
Overview
An overview for Vue with Ark UI, written for Tripmoor, a fictional platform for group travel. A centred header sits over a pill Segment Group with four topics: Mission, Vision, Values and Culture. The control scrolls sideways when the labels do not fit. Each topic is a different layout inside one framed card: Mission is a statement, Vision is a two-step horizon, Values is a definition list, and Culture is a short list beside a figure. All four panels stay mounted and stacked, so the card keeps the height of the tallest and does not jump when the topic changes. The page's rails and top rule come from the Guides spine. It's built from Segment Group and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that has to hold a mission, a horizon, a set of values and a culture in one place. The hosts and the sentences are example data.
FAQ
How do I change the topics and the copy?
The labels are TOPICS. Mission, the horizon, the principles and the habits are the components and the arrays under them: HORIZON, PRINCIPLES, HABITS and HOSTS. The culture figure is HOSTS.length, and the three names under it are the last three entries. The first topic starts selected. You can rename a label without touching the panel, and you can rewrite a panel without touching the control.
How is it read by a screen reader?
The heading is the section's only h2. The control is a radio group named "About Tripmoor". Each panel has its own headings: Mission is one h3, Vision is two (This year and In three years), Values is one h3 over a definition list, and Culture is one h3, a list and a figure. Panels that are not selected are hidden from assistive technology. After a change, a polite status line announces the topic's label. Nothing is announced on load. The lines are drawn by a layer hidden from assistive technology.
How does the control work for a keyboard?
The control is a radio group. Tab reaches it, and the arrow keys move between Mission, Vision, Values and Culture. The same behaviour holds on every base and on the Vue, Svelte and Solid ports. Choosing a topic shows that panel. It does not move focus into the panel and it does not navigate anywhere.
Why doesn't the card change height?
The four panels are stacked in one grid cell. The ones not selected stay in the page, hidden, so the card is always as tall as the tallest panel. A shorter topic sits in that space rather than collapsing the card. The hidden panels are not removed from the HTML.
How does it fit on a phone?
The header stays centred and the pill control scrolls on its own row, so a narrow screen does not clip the first label. Below sm the horizon and the culture figure stack, each with a rule between the parts. Nothing else scrolls sideways at 320 pixels. In a right-to-left layout the control and the horizon's divider follow the reading direction, and the figure stays in order.