What do you add to a React project?

Add the Chakra UI package and the shared provider, which gives controls access to the same theme. The current setup uses Emotion for styles and lists Node.js 20 as the minimum for setup.

Start with one screen. Check its buttons and dialog against your existing styles before changing the rest of the app.

Which parts of a confirmation dialog does Chakra handle?

Chakra gives you the dialog structure and settings for initial focus, focus trapping and restoration. Focus is where keyboard input goes. You choose what the confirmation does, whether the dialog can close before it finishes, and what happens if the action fails.

For a change that is hard to undo, consider putting initial focus on Cancel so pressing Enter by habit does not confirm it.

What do you keep when you change the design?

The Chakra UI package is MIT-licensed. Keep your theme, chosen version, custom controls and app actions in your project. Recheck the dialog after changing its opening button or updating the package.

What should happen when a confirmation fails?

Sketch a dialog for archiving a fictional task. Keep the test on paper.

Choose the starting control
Write the dialog title, then mark where focus lands when it opens.
Separate cancel from confirm
Cancel leaves the task alone. If confirmation fails, keep the dialog available and show an explanation with a way to retry or cancel.
Trace the return
Mark where keyboard focus goes when the dialog closes. If the opening control disappears, pick a useful place in the remaining list.