This collection of reusable user interfaces (total of 44) 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.

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.

How to Use

The components are simple copy-paste ones. All you need to do is to set up your development environment (with Sass compile and installed Spruce CSS), create a preferred folder structure, paste the necessary files, and import/forward them.

  • Some components use custom JS too, which you will see under the code panel.
  • Some of them have dependencies that you must include in your build.

Preview

You can open any component in a separate browser window to see it individually (mostly, we add some markup because of the presentation). When you do so, you can add two query strings to activate the dark color mode and the RTL direction (or both):

https://ui.sprucecss.com/html/form/auth-preview.html?theme-mode=dark
https://ui.sprucecss.com/html/form/auth-preview.html?dir=rtl
https://ui.sprucecss.com/html/form/auth-preview.html?theme-mode=dark&dir=rtl

Contribution

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.