Patterns are solutions and researched best practices that solve recurring user interface design problems:

• How do you build complex, multi-part web forms?
• How do you provide navigational context?
• How do you handle progressive disclosure?

How are they different from components?

A pattern is more than the sum of its parts. Patterns are solutions, whereas a component can be considered a UI chunk. Patterns consist of design, content strategy, reusable components, and accessibility put together to solve common problems.

Components can be considered concrete, a finite list: buttons, accordions, tables, etc. Patterns might be unique to a site or an application and may evolve with changes in technology or after competitive analysis.