shadcn.io is not affiliated with official shadcn/ui
Content Personalization Onboarding Block for React
A setup panel split in two: twelve topic chips on one side and a five-story feed on the other that re-orders as topics are picked, with the matches first, marked and counted.
Installation
Overview
Let new readers tune what they see before they have read a thing, with this topic step for React with Base UI. It is a setup panel of Skimby, a newsletter reader, ruled by Guides and split in two. At the start, twelve topics as chips in a Toggle Group, three or more to pick. At the end, "Your feed": five typed headlines in five rows of one height, each with the topics it covers as Badges. The feed re-orders as the chips move: stories that cover a picked topic come first, marked by a bar at their start and a solid badge on the topic that matched, and the rest follow, quieter. A count says how many match, three figures say how many topics are picked, how many stories come first and how many topics no story covers yet, and one sentence says the same in words ("3 picked. Stories on Design, Film and Travel come first."). Save topics is the one Shine Button. On a phone the feed sits under the chips and shows three headlines.
FAQ
How do I change the topics and the stories?
Edit TOPICS (an id and a label each) and STORIES: each story has an id, a title, its reading time in minutes and a topics array of topic ids, the first two of which show as badges. Keep five stories so the feed keeps its height. NEEDED is the fewest topics that can be saved.
How is the feed ordered?
By how many of the picked topics a story covers, most first; stories with the same count keep their usual order, so the result is the same every time. The five rows are fixed slots, so a re-order changes the words in them and nothing moves. Rows four and five are hidden on a phone, where the rows above them are the matches.
What if no story covers a picked topic?
The sentence says so ("No story covers Music and Books this week."), the "No story yet" figure counts those topics, and they are still saved. If none of the picked topics has a story, the feed keeps its usual order and says that too.
What happens with fewer than three topics?
Save topics stays in the tab order and looks quiet. Pressing it says how many more to pick ("Pick 2 more topics to save.") under the chips and puts focus on the first chip. That line is always reserved, so nothing below it moves.
Is it usable with a keyboard and a screen reader?
The chips are toggle buttons in one named group: Tab reaches it and Space or Enter turns a chip on or off. A matching story says "Matches Design" in text ahead of its headline, so the order is not carried by a bar alone, and one polite status line announces each change once.
What stays local in the demo, and how do I wire it?
Everything: Save topics says it was saved in this demo and stores nothing. In your app send the picked ids to your server where submit says so, and build the real feed from them. The order rule is one pure function, feedOf, so you can keep it for the preview.
Related
- Pro
Industry Picker Onboarding
Several choicesA multi combobox with chips over eighteen industries that holds three, says the limit in words and refuses a fourth instead of switching anything off, with an Add row for a name that is not on the list.
- Pro
Mentor Match Onboarding
Several choicesA mentor step with four interest chips and three mentor cards that re-rank by how many interests they share, with the match said in words and an intro to request.
- Pro
Use Case Onboarding
One choiceA use-case question as a grid of six tiles on shared hairlines, each a native radio with a small drawing of its board, and one sentence under the grid that says which board opens first.
- Pro
Success Metrics Onboarding
Several choicesA setup panel split in two: four metric cards, up to three, and a scorecard that gains a row with a target box for each one picked, saying how far the target is from today.
- Pro
Skill Assessment Onboarding
Several choicesFour skills rated with a segmented control each, and a result band that works out the overall level, where to start and which basics to skip from the four ratings.
- Pro
Achievement Trail Onboarding
Milestones and recapsA language-learning app's first-run trail: eight milestones along a winding path drawn from hairlines, three reached, a you-are-here ring, a hover card per node, a rolling count and progress, and a button that previews the next unlock.