2 min read
Step 3: Props Controls
Add interactive controls to toggle props.
Add a Props Panel
Add a props control panel below the preview.
For each prop, show an appropriate control:
- label: text input
- variant: dropdown with options
- size: dropdown with options
- disabled: checkbox/toggle
When a control changes, update the preview live.Wire Up the State
Connect the controls to the preview:
- Changing "label" updates the button text
- Changing "variant" changes the button style
- Changing "size" changes the button size
- Toggling "disabled" enables/disables the button
All changes should be instant.Update Code Snippet
The code snippet should update when props change.
If I set variant to "secondary", the snippet should show:
<Button variant="secondary" ... />Add Reset Button
Add a "Reset to defaults" button that returns
all props to their default values.Understand State
Explain what's happening with state here.
How does changing a control update the preview?State is data that can change. When state changes, the UI updates to reflect it.
Style the Controls
Style the props panel:
- Clean layout, each prop on its own row
- Labels aligned
- Controls aligned
- Visually grouped with the previewCheckpoint
- Props panel displays all props
- Controls are appropriate types
- Preview updates live
- Code snippet updates
- Reset works
What You Learned
- Interactive controls
- State management
- Connecting controls to UI
- Real-time updates