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