2 min read
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 displayedDisplay 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