Skip to main content

Subcomponents

Subcomponents are the building blocks inside your main components. They help keep your code organized, reusable, and easy to maintain. Think of them as the little helpers that make your big components shine.

Why Use Subcomponents?​

When you break your UI into subcomponents, you keep things DRY (Don't Repeat Yourself), make updates easier, and help your team work faster. Subcomponents are perfect for things like icons, buttons, cards, and any repeated element.

info

Vectors are a great use case for subcomponents! For a practical example, check out the Vectors page to see how to turn icons into reusable components.

Practical Example​

Want to see how to use vectors as subcomponents? Head over to the Vectors page for a full example.

Common Mistakes​

  • Copy-pasting code instead of using subcomponents
  • Making small changes to each instance (leads to inconsistency)
  • Not naming subcomponents clearly
  • Forgetting to update all places when a change is needed
caution

Don't repeat yourself! Use subcomponents to keep your code clean and consistent. If you copy-paste, you'll regret it later.

Best Practices Checklist​

  • Break complex components into smaller subcomponents
  • Name your subcomponents clearly
  • Use subcomponents for repeated elements (like icons, buttons, cards)
  • Avoid editing individual instances—update the subcomponent instead
  • Keep your subcomponents organized in a dedicated folder or section

Want more tips? Check out Vectors and Layer Names to make your designs Bob-friendly.