📖 Step 6: Development#156 / 291
Component
Component
📖One-line summary
A reusable unit of UI, like a button or card.
💡Easy explanation
Like LEGO blocks! Once you build pieces like buttons, cards, and inputs, you can reuse them anywhere. Assembling a UI is like stacking LEGO.
✨Example
Reusable UI block = component
<Page />
<Header />
<Logo />
<Nav />
<Card />
<Card />
⚡Vibe coding prompt examples
>_
Build a Button component. Accept variant (primary, secondary, ghost), size (sm, md, lg), disabled, and loading states as props.
>_
Build a shared Modal component. Render it with Portal, close on backdrop click, close on ESC. Handle accessibility too.
>_
Build a Form component set including Input, Select, and Textarea. Wire them up with React Hook Form.
Try these prompts in your AI coding assistant!