UI Components Library

Last updated:
Edit on GitHub

This document provides details about the UI components library.

Introduction

Separate from Spryker Core, there is a set of UI Angular Components that are distributed independently via npm Registry. Each package can be installed via npm or yarn commands:

npm install @spryker/package_name

yarn add @spryker/package_name

Under the hood, the UI Angular Components are built using Angular 9, rxjs and Ant Design. These components are used within the Spryker Core modules of the Merchant Portal. You can use them inside the angular ecosystem as default angular components, or you can transform them into web components and reuse them inside the Spryker twig modules (see Web Components). Many UI Components have extension points, and some of them must be configured on a project-level (e.g Table, Datasource).

UI Components List

The following is a list of available UI components:

  • @spryker/actions (npm)
    • @spryker/actions.close-drawer (npm, story)
    • @spryker/actions.drawer (npm, story)
    • @spryker/actions.http (npm, story)
    • @spryker/actions.notification (npm, story)
    • @spryker/actions.redirect (npm, story)
    • @spryker/actions.refresh-drawer (npm, story)
    • @spryker/actions.refresh-parent-table (npm, story)
    • @spryker/actions.refresh-table (npm, story)
  • @spryker/ajax-action (npm, story)
  • @spryker/ajax-form (npm, story)
  • @spryker/autocomplete (npm, story)
  • @spryker/button (npm, stories: core, link, toggle, ajax)
  • @spryker/button.action (npm, story)
  • @spryker/button.icon (npm, story)
  • @spryker/cache (npm)
  • @spryker/cache.static (npm)
  • @spryker/card (npm, story)
  • @spryker/checkbox (npm, story)
  • @spryker/chips (npm, story)
  • @spryker/collapsible (npm, story)
  • @spryker/data-serializer (npm)
  • @spryker/data-transformer (npm)
    • @spryker/data-transformer.array-map (npm)
    • @spryker/data-transformer.chain (npm)
    • @spryker/data-transformer.collate (npm)
    • @spryker/data-transformer.configurator.table (npm)
    • @spryker/data-transformer.date-parse (npm)
    • @spryker/data-transformer.date-serialize (npm)
    • @spryker/data-transformer.filter.equals (npm)
    • @spryker/data-transformer.filter.range (npm)
    • @spryker/data-transformer.filter.text (npm)
    • @spryker/data-transformer.lens (npm)
    • @spryker/data-transformer.object-map (npm)
    • @spryker/data-transformer.pluck (npm)
  • @spryker/datasource (npm)
    • @spryker/datasource.dependable (npm, story)
    • @spryker/datasource.http (npm)
    • @spryker/datasource.inline (npm, story)
    • @spryker/datasource.inline.table (npm, story)
    • @spryker/datasource.trigger (npm)
    • @spryker/datasource.trigger.change (npm, story)
    • @spryker/datasource.trigger.input (npm, story)
  • @spryker/date-picker (npm, story)
  • @spryker/drawer (npm, story)
  • @spryker/dropdown (npm, story)
  • @spryker/form-item (npm, story)
  • @spryker/grid (npm, story)
  • @spryker/header (npm, story)
  • @spryker/headline (npm, story)
  • @spryker/html-renderer (npm, story)
  • @spryker/icon (npm, story)
  • @spryker/input (npm, story)
  • @spryker/input.password (npm, story)
  • @spryker/interception (npm)
  • @spryker/label (npm, story)
  • @spryker/layout (npm, story)
  • @spryker/link (npm, story)
  • @spryker/locale (npm, stories: switcher, modules)
  • @spryker/logo (npm, story)
  • @spryker/modal (npm, story)
  • @spryker/navigation (npm, story)
  • @spryker/notification (npm, story)
  • @spryker/pagination (npm, story)
  • @spryker/persistence (npm)
  • @spryker/popover (npm, story)
  • @spryker/radio (npm, stories: component, group)
  • @spryker/select (npm, story)
  • @spryker/sidebar (npm, story)
  • @spryker/spinner (npm, story)
  • @spryker/styles (npm)
  • @spryker/table (npm, story)
    • @spryker/table.column.autocomplete (npm, story)
    • @spryker/table.column.chip (npm, story)
    • @spryker/table.column.date (npm, story)
    • @spryker/table.column.dynamic (npm, story)
    • @spryker/table.column.image (npm, story)
    • @spryker/table.column.input (npm, story)
    • @spryker/table.column.select (npm, story)
    • @spryker/table.column.text (npm, story)
    • @spryker/table.feature.batch-actions (npm, story)
    • @spryker/table.feature.editable (npm, story)
    • @spryker/table.feature.filters (npm, story)
    • @spryker/table.feature.pagination (npm, story)
    • @spryker/table.feature.row-actions (npm, story)
    • @spryker/table.feature.search (npm, story)
    • @spryker/table.feature.selectable (npm, story)
    • @spryker/table.feature.settings (npm, story)
    • @spryker/table.feature.sync-state (npm, story)
    • @spryker/table.feature.title (npm, story)
    • @spryker/table.feature.total (npm, story)
    • @spryker/table.filter.date-range (npm, story)
    • @spryker/table.filter.select (npm, story)
    • @spryker/table.filter.tree-select (npm, story)
  • @spryker/tabs (npm, story)
  • @spryker/textarea (npm, story)
  • @spryker/toggle (npm, story)
  • @spryker/tree-select (npm, story)
  • @spryker/unsaved-changes (npm)
    • @spryker/unsaved-changes.guard.browser (npm)
    • @spryker/unsaved-changes.guard.drawer (npm, story)
    • @spryker/unsaved-changes.guard.navigation (npm, story)
    • @spryker/unsaved-changes.monitor.form (npm, story)
  • @spryker/user-menu (npm, story)
  • @spryker/utils (npm)
  • @spryker/utils.date.adapter.date-fns (npm)
  • @spryker/web-components (npm)