One onboarding question: progress, Skip, four choice cards with number keys, and Continue.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/onboarding-questionPlayground
Question 1 of 3
What is your role?
We will set up views and defaults for how you work.
Selected
Question 1 of 3
What is your role?
We will set up views and defaults for how you work.
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/onboarding-question
Accessibility
- Choices are native radios in a group labelled by the question.
- Selected adds a ring and wash, and focus has its own outline.
- Progress is a labelled progress bar.
Motion
- The panel fades and rises 8 over 400 ms, and rows fade in 40 ms apart.
- The ring changes over 120 ms.
- With reduced motion, the panel fades only and values swap.
Responsive behavior
- Cards stack below 480 wide.
Performance
- Choices fade in 40 ms apart, once, and reduced motion skips it.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import OnboardingQuestion from @/components/fetaui/onboarding-question. It composes Button with Kbd and Meter from product-kit. ROLE_CHOICES is exported.
- It is one step, so the parent holds the step and steps and moves on from onContinue.
- Number keys pick a choice once focus is inside. choices defaults to ROLE_CHOICES, and each custom choice needs an icon.
- Skip shows only when onSkip is passed. The demo's Skip does nothing.
Related
QuestionnaireComponentAsks one question at a time in a soft tray, with single or multiple answers, shortcuts, validation, restore, and conditional steps.Radio GroupComponentPick exactly one. A surface circle that fills to an ink disc with a dot.ProgressComponentShows how far a task has come, with states for done, paused, failed and unknown length, plus nine recipes.KbdComponentA keycap for showing keyboard input. One key per cap, grouped as a combo, chord or sequence.