UI Components Library

Edit on GitHub

This article 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.http (npm)
  • @spryker/datasource.inline (npm, story)
  • @spryker/datasource.inline.table (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)