UI Components

Your first feature works – now make it look the part. This lesson is about consistency and reuse: shared, reusable components so your whole app feels like one polished product, not a patchwork of one-off styles.

You'll use the exact same loop as the last lesson – plan, build, preview, refine, ship – just focused on design and reuse.

1. Plan a consistent, reusable design

Tell Claude how you want to work going forward: build on shadcn/ui (and any other component libraries you like), and reuse components across the app instead of styling each thing from scratch. Do this in plan mode first (Shift+Tab) so you can agree on the approach before any code changes.

Plan a shared component system (in plan mode)

We're in plan mode. Look at my first feature and how the rest of my app is styled.

I want every part of my app to share **consistent, reusable components** built on shadcn/ui (add other component libraries if they genuinely help). Propose a plan to:

- refactor my feature to use shared, production-ready, mobile-friendly components,

- pull repeated patterns into reusable components I can use everywhere,

- keep it accessible and consistent with my chosen look.

Show me the plan before we build.

Outcome: You have a plan to make your feature consistent and reusable.

I planned a consistent, reusable component approach

2. Build the polished version

Approve the plan, switch to auto-accept, and let Claude apply it. Watch it come together in the preview.

Build the consistent UI

Build the plan we agreed on. Make the feature polished, accessible, and mobile-ready using shared shadcn/ui components, and reuse those components consistently across the app. Show me the result in the preview when it's ready.

Outcome: Your feature looks production-ready and consistent with the rest of your app.

My feature uses polished, consistent, reusable components

3. Preview, refine, and ship

Try it at different screen sizes, give feedback, and iterate until it feels right – then ship it.

Refine and ship

Here's my feedback on the look and feel: [what you'd change]. Update it and show me in the preview. When I'm happy, commit and push to main so it goes live.

Outcome: Your polished feature is live, and you have reusable components to build on next time.

I shipped a polished, consistent feature