@maro-tech/ui

Reusable standalone Angular UI components for Maro Tech projects.

Installation

npm install @maro-tech/ui

The package expects Angular 21 and lucide-angular as peer dependencies.

Usage

Import only the components used by the standalone component:

import {
  UiBadgeComponent,
  UiButtonComponent,
  UiCardComponent,
} from '@maro-tech/ui';

@Component({
  standalone: true,
  imports: [UiButtonComponent, UiBadgeComponent, UiCardComponent],
  template: `
    <ui-card>
      <ui-badge variant="success">Active</ui-badge>
      <ui-button variant="primary" size="md">Save</ui-button>
    </ui-card>
  `,
})
export class ExampleComponent {}

Public selectors are ui-button, ui-badge, and ui-card.

Tailwind CSS

The components use Tailwind utility classes and do not ship a separate CSS bundle. Configure the consuming application's Tailwind content paths to scan the package:

content: [
  './src/**/*.{html,ts}',
  './node_modules/@maro-tech/ui/**/*.{js,mjs}',
]

Local development

npm install
npm run docs       # component showcase
npm run test:ci   # unit tests
npm run build     # library build
npm run docs:build

The package is built into dist/ui. Publish only the built package with:

npm run publish:package