shadcn.io is not affiliated with official shadcn/ui
Trip Journal Travel Blogger Profile Block for React
A travel blogger profile as a trip journal: six trips on a hairline rail, each a collapsible entry with its month, countries and days that opens to two paragraphs and its stops, a continent filter that dims the other trips, and figures derived from the trips.
Installation
Overview
Tell a travel writer's story as a journal, with this trip journal profile for React with Base UI. A compact header holds the title and one sentence that counts her countries and continents from the trips themselves, and the hairline frame under it opens on the writer: initials, name, role, place and the same count as a badge. The main cell is a timeline on a rail of six trips, newest first, each a Collapsible entry whose heading names its month, title, countries and days, and which opens to two paragraphs and its stops as numbered chips, with the first trip open. A group of Toggle Group buttons names a continent with its number of trips; pressing one dims the other trips instead of hiding them, so nothing moves, and the end cell answers for the choice: trips, countries, continents and days away, with a bar of days on each continent. A polite line says what is showing. It's built from Collapsible, Toggle Group, Badge, Avatar and Guides, with a CSS entrance only and no photos. The writer and her trips are invented; the places are real. For a travel diary, a trip log or any profile that tells its story in order.
FAQ
How do I fill it with my own trips?
Edit TRIPS, made with trip(id, month, title, continent, days, countries, stops, paragraphs), newest first, and CONTINENTS for the groups the buttons offer. The count in the header and the badge, the number on each button, the figures in the end cell and the bars are all worked out from the trips, so nothing is typed twice. A trip belongs to one continent; for a journey that crosses two, split it into two entries.
Why does the continent filter dim instead of hide?
Hiding trips would pull the rest of the page up and move the end cell. Dimming keeps every trip where it is, with a soft tint and quieter text, and takes it out of the tab order until it matches again. The polite line says how many are showing ("Showing 2 of 6 trips on Europe, the rest dimmed"), and the end cell shows only what matches.
What stays local, and how do I make it real?
All of it: the trips are typed examples, nothing is fetched and a reload starts again with the first trip open. In your own app load the trips from your journal, link each title to its full post and keep the helpers, which only need a list.
Is it accessible?
Each entry is a heading with a button that says whether it is open, the rail and the nodes are decoration, the continent buttons are a named group that follows the arrow keys, and the bars repeat their figures as text. The status line is a polite live region present from the start. Months and places keep their reading order in a right-to-left page, and the chevron needs no mirroring.
How does it look on a phone?
The end cell with the figures and bars sits under the timeline, the continent buttons scroll sideways with the next one peeking, and the badge gives way to the sentence in the header. Opening a trip pushes the ones below it down, as an accordion does; the filter never moves anything.
Related
- Pro
A creator profile with four follower tiles and nine drawn video thumbnails that a group of three buttons ranks by views, engagement or watch time, each with its number, its metric and a badge on the top one.
- Pro
A social profile with a drawn cover strip and an overlapping avatar, a Follow toggle that moves the follower count by one, and Posts, Replies and Media tabs whose posts each have a Like toggle.
- Pro
Author Look Inside Profile
Writing and wordsAn author profile as a look inside: four books with drawn typographic covers, a read-only rating and an award badge, and a reading pane with a drop cap, a text size group and Next and Previous between two pages, beside a Follow toggle.
- Pro
Journalist Beat Tree Profile
Writing and wordsA journalist profile as a beat tree: a tree of six beats, sub-beats and stories with the number of stories rolled up on every branch, and a byline card for the story you pick with its outlet, date, length, reading time and Exclusive badge.
- Pro
Expandable Release Entries
Lists and timelinesFour release rows that each open to a sentence and a copyable migration snippet in a focusable code region; the newest is open on load and any number can be open.
- Pro
Animator Frame Scrubber Profile
Visual portfoliosAn animator profile as a frame scrubber: a drawn stage worked out from the frame number, a slider through 96 frames at 24 a second with the timecode and shot name, shots as buttons that jump to their first frame, and the credits.