project component playground

Step 3: Props Controls

System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck

Full Lesson Reference

Add interactive controls to toggle props.

Add a Props Panel

terminal
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

terminal
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

terminal
The code snippet should update when props change.
If I set variant to "secondary", the snippet should show:
<Button variant="secondary" ... />

Add Reset Button

terminal
Add a "Reset to defaults" button that returns
all props to their default values.

Understand State

terminal
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

terminal
Style the props panel:
- Clean layout, each prop on its own row
- Labels aligned
- Controls aligned
- Visually grouped with the preview

Checkpoint

  • 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

Exercises

  1. Paste the "Add a Props Panel" and "Wire Up the State" prompts, then change each control and confirm the preview updates instantly with no page reload.
  2. Verify the code snippet stays in sync: set variant to "secondary" and check the snippet shows <Button variant="secondary" ... />.
  3. Add the reset button, change several props, then click reset and confirm every control returns to its default value.