Skip to main content

Super-JSS Documentation

Super-JSS is a powerful CSS-in-JS library specifically designed for Angular applications. It provides a type-safe, theme-aware styling system with pre-built components and a flexible API for custom styling.

🚀 Quick Start​

Get up and running in minutes:

📚 Documentation Sections​

🎯 Getting Started​

Installation guides, basic setup, and first steps with Super-JSS.

🧩 Components​

Pre-built UI components with consistent styling and theme integration.

🎨 Theming (Coming soon in Phase 2)​

Customize colors, spacing, typography, and component behavior.

📖 API Reference (Coming soon in Phase 2)​

Complete API documentation for all Super-JSS features.

✨ Key Features​

  • 🎯 Type-Safe: Full TypeScript support with autocomplete
  • 🎨 Theme-Aware: Consistent theming across all components
  • 📱 Responsive: Built-in responsive design utilities
  • 🔧 Flexible: Mix pre-built components with custom styling
  • ♿ Accessible: WCAG compliant components
  • 🚀 Performant: Optimized CSS generation and delivery

💡 Example​

import { Component } from "@angular/core";
import { sj, SJ_BASE_COMPONENTS_IMPORTS } from "super-jss";

@Component({
  selector: "app-example",
  standalone: true,
  imports: [SJ_BASE_COMPONENTS_IMPORTS],
  template: `
    <div
      [sj]="[
        sj.padding('24px'),
        sj.backgroundColor(sj.backgroundColor.options.primary.light),
        sj.borderRadius('12px')
      ]"
    >
      <h1 [sj]="[sj.color(sj.color.options.primary.main)]">Hello Super-JSS!</h1>

      <sj-button variant="filled" useDensity="2"> Get Started </sj-button>
    </div>
  `,
})
export class ExampleComponent {
  protected sj = sj;
}

🤝 Contributing​

Super-JSS is open source and welcomes contributions! Check out our GitHub repository to get involved.

📞 Support​