Installation
Getting up and running with spartan.
Adding spartan/ui
to your project requires only a couple steps!
If you are already using Nx, start with installing our plugin:
Prerequisites
spartan/ui
is built on top of TailwindCSS. Make sure your application has a working TailwindCSS setup before you continue.
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:
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:
To learn more about the Nx plugin check out the CLI docs below.
Known issue: Dependencies are added to package.json, but their peer dependencies are not automatically installed
It seems like the Nx generator does not install the peer dependencies for new dependencies added to the package.json of the project when running the "install dependencies" task inside its execution context. Workaround: Manually run npm i after the plugin adds the primtives.
If you are not using Nx (yet) you can follow the guide on how to manually install the primitive on the respective documentation page.