Similar to how design tokens can keep a design consistent, turning visual chunks into building blocks that can be copy/pasted over and over will help the visual language of your app stay consistent to the user.

Anything in your brands visual language that will be reused really ought to be component-ized. Not only will this make it easier to update in the future if something like a logo ever changes, it helps guarantee the integrity of your brand is maintained across a codebase and across domains.

Think about all the many places the example of a logo will show up over time in a normal business:

• website navigation
• marketing emails
• company avatars in business apps like Slack or on LinkedIn
• employee email signatures
• company letterhead (sorry if this example would include you, I'm not too fond of paper or designing for print)

If you have more than one place to update your logo in code, you're almost going to guarantee some logo across these different areas will be different. Don't forget that consistency is key in every aspect of your design, losing consistency between similar pieces of UI will breakdown the intuitiveness of your UI.

Imagine a new design calls for a variation on a logo.

Recall the logo from the previous example:

When sized or scaled up incorrectly, you'll start to encounter an inconsitent case where stroke widths don't match text accurately, where spacing isn't consistent, and it's used in ways that were never imagined by the designer.

You should update an existing component to take different options to account for these kinds of variations so that elements like your logo (or really anything) stay consistent.

These are the kinds of places you need to start paying attention to. For the design to stay looking great, it has to be consistent, and reuse with components is one of the easiest ways to avoid diverging pieces of design that are repeated throughout an interface.

Just like a logo's brand needs to be protected by using the logo correctly, components need to be used to enforce sameness across pages and apps.

Additional resources

Thinking in React

React docs that encourage users to see components like the trees that make up the forest

Learn Design

Awesome UI Component Libraries

A GitHub repo full of UI component libraries across frameworks

Learn Design