Step 4: More Components

Build out your component library.

Add Navigation

Add a sidebar that lists all components.
Clicking a component shows its documentation.
Currently just Button.

Create an Input Component

Create an Input component with props:
- placeholder: placeholder text
- label: label above the input
- type: "text" | "email" | "password"
- error: error message to display
- disabled: boolean

Create its documentation page with live controls.

Create a Card Component

Create a Card component with props:
- title: card title
- description: card body text
- image: optional image URL
- onClick: optional click handler

Create its documentation page.

Create a Badge Component

Create a Badge component with props:
- text: badge text
- color: "gray" | "red" | "green" | "blue" | "yellow"
- size: "small" | "medium"

Simple component, simple documentation.

Component Organization

Organize the components folder:
- Each component in its own folder
- Component file + any styles
- Keep it organized as it grows

Navigation Updates

Update the sidebar to list all components.
Show the current page as active.

Consistent Documentation

Each component page should have the same structure:

• Name and description
• Live preview
• Props controls
• Code snippet

Checkpoint

• Navigation works
• Input component + docs
• Card component + docs
• Badge component + docs
• Consistent structure

What You Learned

• Building multiple components
• Consistent documentation patterns
• Navigation between pages
• Scaling component libraries

Exercises

1. Add the sidebar navigation and create all three new components (Input, Card, Badge), each with its own documentation page and live controls.
2. Reorganize the components folder so each component lives in its own folder with its file and styles, then confirm everything still loads.
3. Check that all four component pages (Button, Input, Card, Badge) follow the same structure — name, preview, props controls, code snippet — and that the sidebar highlights the active page.