Plugin Install Onboarding Block for React Aria

They are typed in PLUGINS, two for each plugin, and they are meant to be the truth: say what the plugin reads, what it writes and, where it matters, what it never reads. The words Reads, Writes and Never reads carry the meaning, not a colour. Open and close a card with Enter or Space; opening one grows its card and the cards beside it in the same row, and nothing else moves.

It installs every plugin marked “Recommended for blogs” that is not installed yet, and the status line names them. When all three are installed the button is quiet and says so if pressed. Which ones are recommended is the recommended flag in PLUGINS.

With the chip's X in the tray, which is named for its plugin (“Remove Analytics”). The plugin's card goes back to Install and focus lands on that card's button, so a keyboard user is not left on a chip that has gone. The tray keeps its height whether it holds six chips or none.

The step needs one installed plugin (three start installed here). With none, Continue stays visible but quiet, and pressing it says so and focuses the first card's button. Skip for now leaves the step.

Everything: nothing is installed and the status line says “Installed in this demo”. In your app install the plugin where install says so, read the lines under “What it can access” from the plugin's manifest, and save the list where submit says so.

The cards stack in one column (two from the small breakpoint, three from the large one), the tray wraps its chips in a box that holds six, and Continue and Skip for now pin to the bottom of the screen.