UI components library

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

npm install @spryker/package_name

yarn add @spryker/package_name

Under the hood, the components are built using Angular 9, rxjs and Ant Design. These components are used in the core modules of the Merchant Portal. You can use them in the Angular ecosystem as default Angular components, or you can transform them into web components and reuse them in Spryker Twig modules. For more details about web components in Twig modules, see Web Components.

Many UI Components have extension points, and some of them must be configured on a project-level. For example, Table or Datasource.

Available UI components

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)