This collection of reusable user interfaces aims to help you create more coherently with Spruce CSS. These are useful, modern, expanding patterns that can assist you in your daily development job.


Currently, we have three categories:

  • components: the smallest building blocks,
  • sections: a block that is spreading horizontally (inside your container) and usually contains components,
  • pages: a complete page view that contains components and sections.

Patterns and Components

Patterns and components can be interchangeable in our case. Spruce UI gives you smaller and larger building blocks, and we show one example of implementation for common patterns.

Spruce CSS Is Needed, but You Can Switch It

These components are built on Spruce, but you can swap and remove the dependency if you wish and use the barebones. All you need to do is to remove the related functions, mixins, and variables.


Spruce UI doesn’t have its public repository, but you can open an issue (related to any of the components) under Spruce CSS repository related to any issue.