@styloviz/commerce

Storefront basics — price, address card, file display and QR codes.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/icons @styloviz/commerce

Requires @angular/core and @angular/common >= 21. Also needs @styloviz/icons — listed above so no extra step is required on npm (on pnpm/yarn, list it yourself). Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvAddressCardComponent } from '@styloviz/commerce';

@Component({
  standalone: true,
  imports: [SvAddressCardComponent],
  template: `
    <sv-address-card [address]="address" (edit)="edit($event)" (remove)="remove($event)" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | address | Address | — | The address to display. | | selectable | boolean | false | Radio-style selection mode (checkout address picker). | | selected | boolean | false | Selected state (parent-controlled in a radio group). | | showActions | boolean | true | Show the action row. | | canEdit | boolean | true | Show the edit action. | | canRemove | boolean | true | Show the remove action. | | canSetDefault | boolean | true | Show the "Set as default" action (hidden when already default). |

Outputs

| Output | Type | Description | | --- | --- | --- | | addressSelected | Address | Emitted when the card is chosen in selectable mode. Named addressSelected, not select: select is a native DOM event name ( | | edit | Address | Emitted when the edit action is pressed. | | remove | Address | Emitted when the remove action is pressed. | | setDefault | Address | Emitted when "Set as default" is pressed. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/address-card

License

MIT