Loro UI

Loro UI is the Angular 21 design system for Al Loro. It ships standalone components, theme tokens, icons, images, and Storybook docs.

Use in an app

npm i @juligc99/loro-ui

@use 'sass:meta';

@include meta.load-css('@juligc99/loro-ui/design-tokens/loro-theme.scss');

import { LoroButton, LoroInput } from '@juligc99/loro-ui';

@Component({
  standalone: true,
  imports: [LoroButton, LoroInput],
  template: `
    <loro-button label="Guardar" />
    <loro-input label="Email" type="email" />
  `,
})
export class ExampleComponent {}

Forms contract

Form components in Loro UI are built primarily for @angular/forms/signals. They follow the FormValueControl<T> / FormCheckboxControl contracts and the model()-based value pattern used across the design system.

If your app still uses classic Angular FormGroup / formControlName, you will need a ControlValueAccessor bridge or adapter layer. The signals-based contract is the supported baseline for these components.

Local development

npm install
npm run build
npm run storybook

Use npm run storybook to check components and docs in the browser.

Storybook remoto with ngrok

Use ngrok when you want to test the local Storybook from other devices without deploying.

Install ngrok:

brew install ngrok/ngrok/ngrok

Add the auth token:

ngrok config add-authtoken 3G7ncpInz0dIbGwE1sLObjhbRA9_3Uo869KrBLkHuHXcxyK35

Start Storybook and expose it publicly:

npm run storybook
ngrok http 6006 --host-header=localhost:6006

Then open the ngrok URL on any phone, tablet, or another computer on the same network to test the UI in a real device.

Local package test

npm run build
cd dist/loro-ui
npm pack

Then install the generated tarball in the consuming app.

Publish

npm run build
cd dist/loro-ui
npm publish --access public

Package API

• Components are standalone.
• The public entrypoint is projects/loro-ui/src/public-api.ts.
• Sass helpers are exposed through package subpaths.
• Assets are copied from assets/loro-ui in the package output.