Styles

The style flag in components.json determines the visual appearance of generated components. Each style offers a distinct look while maintaining full access to the underlying CSS variables and Tailwind utilities for customization.

The style is set the first time you run the spartan CLI. During ng g @spartan-ng/cli:init or ng g @spartan-ng/cli:ui you will be prompted to choose a style. The selection is stored in components.json .

ng g @spartan-ng/cli:init

To change your style, edit the style field in components.json and regenerate affected components:

{
  "style": "nova",
  ...
}

ng g @spartan-ng/cli:ui button

See the update guide for how to migrate existing components to the new style.

Available styles: nova , vega , lyra , maia , mira , luma .

All styles use the same CSS variable system. After choosing a style, you can further customize colors, border radius, and spacing by overriding the CSS variables in your styles.css file. See the Theming page for details.

Icons use <ng-icon> which inherits its size from the parent font size. Each component style already sets the icon size appropriately. To manually scale an icon, use text-[length:--spacing(n)] (e.g. text-[length:--spacing(5)] ) — this follows the spacing scale.