Installation

Add the package, register the provider, and include the design tokens. Every component is standalone. Import only what you use from its group entry point.

1. Install

   The package is published to GitHub Packages. Point the @mushilu-san scope at that registry in your .npmrc first. GitHub Packages requires authentication even for public packages: sign in with npm login for the @mushilu-san scope and the https://npm.pkg.github.com registry, using a GitHub token that has the read:packages permission. Keep the token out of files you commit.

   .npmrc Copy

   @mushilu-san:registry=https://npm.pkg.github.com

   Terminal Copy

   npm install @mushilu-san/ui

2. Provide the library

   The library is zoneless and needs Angular 22.

   app.config.ts Copy

   import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';import { provideMushiluUi } from '@mushilu-san/ui';export const appConfig: ApplicationConfig = {  providers: [provideZonelessChangeDetection(), provideMushiluUi()],};

3. Include the styles

   tokens.css defines every --mui-* token, including dark mode. reset.css is optional.

   angular.json (build options) Copy

   "styles": [  "node_modules/@mushilu-san/ui/styles/reset.css",  "node_modules/@mushilu-san/ui/styles/tokens.css",  "src/styles.css"]

4. Use a component

   app.ts Copy

   import { Component } from '@angular/core';import { Button } from '@mushilu-san/ui/primitives';@Component({  selector: 'app-root',  imports: [Button],  template: `<button muiButton (clicked)="save()">Save</button>`,})export class App {  save() {}}

   Next: browse all components.