Membuat Komponen

A full page can feel overwhelming to prompt. The pro move is to generate one component at a time: a button, a card, a form, a navbar. Each is a small, reusable building block.

In this lesson you'll prompt v0, Lovable, and Bolt to produce clean components on demand — and learn how to combine them into a real interface.

A component is a self-contained piece of UI you can reuse: one button definition, used 50 times across your app. Change it once, it updates everywhere.

Thinking in components keeps your prompts focused and your app consistent. Most AI UI tools output components in React, the most popular way to build modern interfaces.

Start tiny. Ask for a button and describe every state: default, hover, disabled. Naming states tells the AI you care about polish.

The more variants you request up front, the more reusable the result.

Cards are everywhere — products, blog posts, profiles. Describe the slots: what goes in the card and in what order.

Tell the AI which parts are images, headings, and actions so the layout comes out right.

Forms are where details matter most: labels, placeholders, required fields, and error messages. Spell them out.

Good forms also include validation — telling the user when something is wrong. Ask for it explicitly.

You don't need to write React, but recognizing its shape builds confidence. A component is a function that returns markup. Below is the kind of simple, framework-free version of a button the AI might explain to you.

You can run this snippet — it just logs the label, simulating what a button 'does' when clicked.

The word that turns a one-off design into a reusable component is prop (short for 'property') — a value you pass in to customize it.

Ask the AI to make things configurable: label, color, size, icon. Then one Button component covers every button in your app.

Need a whole set? Ask for all variants at once and request a preview gallery so you can see them side by side. Tools like v0 will render every option for you to compare.

Once you have buttons, cards, and forms, assemble them. Reference the components you already made by name so the AI reuses them instead of inventing new ones.

This keeps your design consistent — the same button everywhere, the same card style across sections.

Many tools build on top of polished libraries like shadcn/ui. You can lean on these to get accessible, professional components instantly, then restyle them by prompt.

You don't install anything manually in v0 or Lovable — just ask for it.

Try this loop in v0 or Lovable: generate a single Card, refine it until you love it, then ask for a grid of them. Building bottom-up — small pieces first — gives you far more control than prompting a whole page blindly.

Save prompts that work well; they become your personal component toolkit.

You learned to build interfaces in reusable pieces. Prompt for one component at a time — button, card, form — and describe its slots and states. Make components flexible with props, generate variants in one shot, and lean on libraries like shadcn/ui as a base.

Then assemble components into pages by referencing them by name so the AI reuses, not reinvents. Next: making everything beautiful with colors, spacing, and dark mode — all by prompt.