shadcn.io is not affiliated with official shadcn/ui
Overview Tabs About Block for React
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 React with Base 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.
Related
- Pro
Mission About
StatementsA mission statement for a home-care scheduling company: the mission in large type beside one supporting sentence, three pillars that each carry the figure they are checked by, and a founding line in relative time.
- Pro
Horizon Vision Statement About
StatementsA vision statement for a climate-data company as a horizon: the vision is the centred heading, and three stations on one hairline (Now, In three years, In ten years) each say what is true by then.
- Pro
Values Bento About
Culture and valuesA bento of six values for a community-forum company: three tall cells that each carry a story of what the value looked like in a nested quote, and three one-line cells stacked beside them, in shared hairlines.
- Pro
Culture Rituals About
Culture and valuesA team's rituals sorted by how often they happen: three bands, every week, every quarter and every year, each with three cells that say what the ritual is, who comes and how long it takes.
- Pro
Situation Tabs Operating Principles
Principles and processAn operating-principles section for an accounting-automation company: line tabs by situation, and under them the open situation's three rules as hairline rows, each with the question we ask.
- Pro
Philosophy About
StatementsA philosophy section for a meditation app: a heading and one pull quote that stays in view at the start, beside five numbered beliefs, each a short title and a paragraph, ruled from a solid divider to the rail.