Component libraries

Component libraries are a little bit like design systems or style guides. They are all a great example of how important it is to master the art of taking a large project and dividing it into smaller pieces "divide and conquer" like someone once said or "q: how does one eat an elephant? - a: one piece at a time". This is a key to taking on large projects in web development and it helps with a lot of classic problems that you probably all know from earlier group works:

Design systems are essentially a visual display of how programming works. It is all about abstraction, decoupling, modularity and dependencies. These topics tend to be very specific to each product and that is both why they have caused big debates in the programming society and why it is so important to understand them, specially in the age of AI when we need to know the product very well to turn generalized code into something specific for our product.

• The relationship between component libraries, style guides and design systems.

• Abstraction as a way to hide implementation details behind a clear component interface.

• Modularity and composition as ways to divide complex interfaces into reusable parts.

• How dependencies and coupling affect reuse, maintenance and the impact of changes.

• How design tokens and component variants maintain visual consistency.

• The role of component documentation and examples in collaboration and reuse.

• Break down an interface into components with clear responsibilities.

• Build reusable components with configurable variants and compose them into larger interfaces.

• Centralise shared design values in tokens and apply changes consistently.

• Identify component dependencies and reduce unnecessary coupling.

• Document component interfaces and demonstrate their variants interactively.

• Evaluate and adapt library or AI-generated components to a product’s design rules.

Take a look at how things are done by the government. The Icelandic government is probably the largest single cell that we can take an example from here in Iceland and they are also the only once who keep their design systems open for everyone to see. That is why these two examples from Reykjavíc City and island.is are probably the nearest thing you will see to what you will actually encounter when you start working as a web developer in an Icelandic company. It always takes time to get to know the codebase and understand all the different workflows when starting to work in a new company, even for an experienced developer.

There are also a more general guidelines that most modern design systems take example from for example like Google's Materia UI and IBM's Carbon as you can see, there is some similarities with all of them and maybe you can see where Reykjavík and island.is got their inspiration from.

Now it is time for you to make such a design system. Take some of the projects you have already done in Vefskólinn, for example your last group project or the design you made in Module 3 design guides and make your own component library:

Make a component library with all the necessary components and make them as reusable as possible:

Use the AI to create a demonstration for the usage of the components where you can toggle all the variants graphically like shown in the Hanna and island.is examples.

Here is also a more explained example fo these design systems along with a guide in the end of how you can try them out yourselves.