@trineui/cli

@trineui/cli is the public Trine CLI for the current Button-first baseline.

Current public baseline:

• package: @trineui/[email protected]
• guided init
• add button
• Button is the only public component baseline in scope
• Angular has the strongest proof coverage right now

Canonical public flow:

npx @trineui/cli@latest init
npx @trineui/cli@latest add button

init is guided by default. Use --yes for non-interactive mode.

What Works Right Now

The current public Trine baseline is intentionally narrow.

It supports:

• preparing a supported Angular app with init
• delivering a consumer-owned Button with add button
• wiring a local @trine/ui alias into the target app
• injecting the Trine styling baseline into the target app's real global stylesheet entry
• local customization by editing button.skin.ts or adding semantic variable overrides below the Trine-managed block

It does not currently support:

• more components than Button
• automatic prerequisite installation
• automatic usage-surface scaffolding
• broad framework coverage claims beyond the current Angular-first baseline

Before You Start

Supported target shape

The current proven target shape is an Angular app with:

• src/app
• tsconfig.app.json
• a valid global stylesheet entry such as:
  • src/styles.scss
  • src/styles.css
  • src/global.scss
  • or a build styles entry resolved from angular.json

init can distinguish angular and ionic-angular, but Angular has the strongest live proof coverage today.

Manual prerequisites

The live CLI still expects these prerequisites to be installed manually in the target repo.

For the current Button baseline, these are hard requirements rather than optional enhancements:

npm install class-variance-authority
npm install -D tailwindcss@^4 @tailwindcss/postcss postcss

The current baseline also expects PostCSS configuration in the target repo:

.postcssrc.json

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Use a Node LTS line supported by Angular 21 in the target repo. Odd-numbered Node releases can build with warnings.

For the styling-layer contract behind these requirements, see:

• docs/01-overview/05-styling-contract.md

Quickstart

1. Run guided init

From the app root:

npx @trineui/cli@latest init

If you prefer non-interactive mode:

npx @trineui/cli@latest init --yes

If you are inside a workspace root or want to target a specific app:

npx @trineui/cli@latest init --target /absolute/path/to/app

init currently:

• detects the target app
• detects angular vs ionic-angular
• resolves the target stylesheet entry
• previews file changes before mutation
• injects a named Trine-managed styling block into the resolved global stylesheet entry
• ensures src/app/components/ui/index.ts
• ensures local @trine/ui in tsconfig.app.json
• ensures the stylesheet block includes semantic tokens, .dark overrides, and Tailwind v4 @theme inline mapping

init does not currently install Tailwind/PostCSS/CVA or generate .postcssrc.json for you.

Rerunning init on an already prepared target should no-op cleanly.

2. Deliver Button

npx @trineui/cli@latest add button

Or explicitly:

npx @trineui/cli@latest add button --target /absolute/path/to/app

add button currently delivers:

• src/app/components/ui/button/button.ts
• src/app/components/ui/button/button.html
• src/app/components/ui/button/button.skin.ts
• src/app/components/ui/button/index.ts
• src/app/components/ui/index.ts

It fails clearly if consumer-owned Button files already exist. It does not silently overwrite them.

3. Render a small proof

Import TrineButton from local @trine/ui and render a small proof surface:

import { Component } from '@angular/core';
import { TrineButton } from '@trine/ui';

@Component({
  selector: 'app-root',
  imports: [TrineButton],
  template: `
    <trine-button>Primary action</trine-button>
    <trine-button variant="secondary">Secondary action</trine-button>
    <trine-button [loading]="true">Saving</trine-button>
  `,
})
export class App {}

4. Build the target app

npm run build

Successful verification usually means:

• the app builds
• @trine/ui resolves to local consumer source
• the resolved stylesheet entry contains a Trine-managed baseline block
• Button renders from local delivered files

Customize Locally

Trine uses a copy-paste ownership model.

After delivery, the consumer repo owns the visual layer.

The two main local customization paths are:

• edit src/app/components/ui/button/button.skin.ts
• add semantic variable overrides below the Trine-managed block in the resolved global stylesheet entry

The current public token surface is intentionally lean:

• --background, --foreground
• --surface, --surface-foreground
• --overlay, --overlay-foreground
• --primary, --primary-foreground
• --secondary, --secondary-foreground
• --muted, --muted-foreground
• --accent, --accent-foreground
• --destructive, --destructive-foreground
• --border, --input, --ring, --radius

The injected consumer block does not include legacy bridge values such as --trine-*, --color-trine-*, --radius-trine-*, --shadow-trine-*, or Trine motion aliases.

Repo core now uses that same semantic styling direction directly. There is no separate internal --trine-* compatibility bridge left in active source.

This is the intended model. Trine does not keep runtime ownership of the Button visuals after delivery.

Current Limitations

• Button-only public baseline
• manual prerequisites still required
• usage surface is not scaffolded automatically
• Angular has the strongest live proof coverage; Ionic Angular coverage is narrower
• multiple target apps still require --target or guided selection
• src/styles.scss and src/global.scss currently work, but Angular 21 surfaces a Sass deprecation warning for @import 'tailwindcss';
• the baseline is intentionally narrow and not yet a broader component platform

Full Walkthrough

For a fuller repo-level walkthrough of the current baseline, see:

• docs/01-overview/04-cli-getting-started.md