Getting up and running with spartan.

Adding spartan/ui to your project requires only a couple steps!

We support the Angular CLI & Nx! Start with installing our plugin:


spartan/ui is built on top of TailwindCSS. Make sure your application has a working TailwindCSS setup before you continue.

spartan/ui also builds on top of angular/cdk. To install it run the following command:

Installing ui-core

spartan/ui comes with a core package. To get started install this package with the command below:

Setting up tailwind.config.js

You now have to add our spartan-specific configuration to your TailwindCSS setup. To make the setup of your tailwind.config.js as easy as possible, the @spartan-ng/ui-core package comes with it own preset.

Simply add it to the presets array of your config file:

Adding CSS variables

To complete your TailwindCSS setup, you need to add our spartan-specific CSS variables to your style entrypoint. This is most likely a styles.css in the src folder of your application.

Again, if you are using Nx, we have written a plugin that will take care of the heavy lifting:

npx nx g @spartan-ng/cli:ui-theme

To learn more about the Nx plugin check out the CLI docs below.

If you are not using Nx (yet) you can copy the variables of the default theme below and manually add them to your style entrypoint, such as styles.css :

Also, make sure to check out the theming section to better understand the convention behind them and learn how to customize your theme.

Adding primitives

With the Nx plugin, adding primitives is as simple as running a single command. It will allow you to pick and choose which primitives to add to your project. It will add all brain dependencies and copy helm code into its own library:

npx nx g @spartan-ng/cli:ui

To learn more about the command line interface check out the docs below.

Theming Stack