Angular

Why custom elements

This package does not ship an Angular compiler library. Light-DOM custom elements let every Angular app use component tags without a second copy of the kit. Styles stay on the host, so existing Caustica CSS still applies.

Install

npm install caustica-design

Call once in main.ts before bootstrap:

import 'caustica-design/css'
import { provideCaustica } from 'caustica-design/angular'
import { bootstrapApplication } from '@angular/platform-browser'
import { AppComponent } from './app.component'

provideCaustica()
bootstrapApplication(AppComponent)

Allow unknown tags on the component that uses them:

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

@Component({
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<ca-button variant="primary">Continue</ca-button>`,
})
export class AppComponent {}

Tags

Boolean props are attributes (compact, open, busy). String props use the same names as React, in kebab-case where needed (backdrop-label).

<ca-panel>
  <ca-panel-head>
    <ca-panel-title>Tonight’s release</ca-panel-title>
  </ca-panel-head>
  <ca-button variant="primary" compact>Name it</ca-button>
</ca-panel>

<ca-modal [attr.open]="open ? '' : null" backdrop-label="Dismiss dialog"
          (openchange)="open = $event.detail">
  <ca-modal-dialog label="Name this release">…</ca-modal-dialog>
</ca-modal>

Checkboxes and switches take a label attribute (projected text is not used). Native <input> with Caustica classes still works when you want Angular forms on the real control.

Next steps

• Getting started — CSS, theme, and palette
• React components — full typed core
• Vue components — PascalCase imports like React
• Components overview — every primitive
• Custom elements playground — local verification after npm run build