Step 2: First Component

Build and document your first component.

Create a Button Component

Create a simple Button component with these props:
- label: the button text
- variant: "primary" | "secondary" | "ghost"
- size: "small" | "medium" | "large"
- disabled: boolean

Put it in a components folder.
Style it to look clean and modern.

Understand Props

Ask Claude to explain:

Explain what props are.
How does the Button use its props?

Props are like function arguments — they let you customize a component for different uses.

Create the Documentation Page

Create a page that documents the Button component.

It should show:
- Component name as heading
- Brief description
- A live preview of the button
- The current props values displayed

Display the Preview

Show a live button preview at the top of the page.
It should be centered in a preview container
with a light background.

Show the Code

Below the preview, show the code snippet
for using the button with the current props.

Format it nicely with syntax highlighting.

Checkpoint

• Button component created
• Documentation page exists
• Live preview shows
• Code snippet displays

What You Learned

• Creating reusable components
• What props are and how they work
• Component documentation patterns

Exercises

1. Paste the "Create a Button Component" prompt, then ask Claude the two "Understand Props" questions and confirm you can explain in your own words how the Button uses each prop.
2. Build the documentation page and verify all four required elements show up: heading, description, live preview, and current prop values.
3. Add the code snippet below the preview with syntax highlighting, then change a prop value in code and confirm the snippet reflects it.