Skip to main content

Installation

Super-JSS is a CSS-in-JS library specifically designed for Angular applications. Follow these steps to add it to your project.

Prerequisites​

  • Angular: Version 20.0.0 or higher
  • Node.js: Version 18.0.0 or higher
  • TypeScript: Version 5.0.0 or higher

Install Super-JSS​

npm​

npm install super-jss

Yarn​

yarn add super-jss

pnpm​

pnpm add super-jss

Import the Module​

Add the SJ_BASE_COMPONENTS_IMPORTS to your application's root module or standalone component:

import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
import { SJ_BASE_COMPONENTS_IMPORTS } from "super-jss";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [
    CommonModule,
    SJ_BASE_COMPONENTS_IMPORTS, // Add this line
  ],
  template: `
    <div [sj]="[sj.padding('16px'), sj.backgroundColor('#f5f5f5')]">
      Hello Super-JSS!
    </div>
  `,
})
export class AppComponent {
  // Import the sj API
  sj = (globalThis as any).sj;
}

Configure Your Theme (Optional)​

Super-JSS comes with a default theme, but you can customize it by providing your own theme configuration:

import { SJ_THEME_PROVIDER } from "super-jss";

@NgModule({
  providers: [
    SJ_THEME_PROVIDER, // Provides default theme
  ],
})
export class AppModule {}

Verify Installation​

Create a simple component to test your installation:

<!-- app.component.html -->
<div
  [sj]="[
  sj.padding('20px'),
  sj.backgroundColor('#e3f2fd'),
  sj.borderRadius('8px'),
  sj.color('#1976d2')
]"
>
  <h1>Welcome to Super-JSS!</h1>
  <p>Your installation is working correctly.</p>
</div>

Next Steps​

Live Example​

If the embed doesn’t load, open it directly: Open on StackBlitz.