shadcn.io is not affiliated with official shadcn/ui
Migration FAQ Block for Ark UI
A FAQ for moving to a help-centre tool: a source picker, numbered steps and a field-mapping table in a framed figure, then five questions about the move.
Installation
Overview
A migration FAQ for React with Ark UI. A start-aligned header sits over a band with a "Moving from" picker, a segmented control with three choices (a help centre, a spreadsheet, a CSV file). Below it a framed figure, drawn with + marks on its corners, shows the choice: four numbered steps beside a "Their field, our field" table that maps each source field to one of ours, with an arrow that mirrors in a right-to-left layout. The three sources share one grid cell, so the figure keeps the height of the tallest and nothing moves when you pick another. Five questions about the move follow as hairline rows under a rule with + marks, one answer open at a time. The mapping table scrolls sideways inside itself when it's wider than its column, and keyboard users can scroll it. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Segment Group, Table, Accordion and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For help-centre, docs and support products that win customers from a tool they already use.
FAQ
How do I add a source or change the mapping?
Edit SOURCES at the top of the file: each entry has a value, the segment's label, a heading, four steps and a list of mappings, each a theirs field and the ours field it lands in. The picker, the figure and the table are built from that array, so a fourth source is one more entry. Keep the mappings to about five rows and the steps to about four, so the figure stays short.
Why doesn't the figure change height when I pick a source?
All the sources are drawn in one grid cell, and the ones that aren't chosen are invisible, out of the tab order and hidden from assistive technology. The tallest sets the height, so the questions below stay where they are. Only the chosen source's table can take focus.
How does the mapping table work with a keyboard and a screen reader?
The table is named after its source ("Field mapping: From a spreadsheet") and its first column holds the row headers, so a screen reader reads each of their fields with the field of ours it maps to. When the table is wider than its column its container scrolls sideways and takes a tab stop, so a keyboard can scroll it.
How does the picker work, and does it announce the change?
It's a segmented control with one choice always selected, and the arrow keys move between choices. The steps and the table swap at once. The picker has a name ("Moving from"), and the heading of the chosen source changes with it, so the new content is easy to find.