# Web components overview (https://docs.salla.dev/twilight/react/web-components)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

Salla ships its storefront widgets as web components (`<salla-*>` tags) in `@salla.sa/twilight-components`. A theme can use them from React. Each page lists what the component accepts, so an assistant (or you) does not need to guess attributes.

The same data is published with the package as `@salla.sa/twilight-components/docs.json`.

## Which one do I use? [#which-one-do-i-use]

Choose the first that exists:

1. **A native engine component**, such as [`Link`](https://docs.salla.dev/twilight/react/components/link), [`ProductCard`](https://docs.salla.dev/twilight/react/components/product-card) or `Breadcrumb`.
2. **A native React version** from `@salla.sa/twilight-components-react`: `SallaButton`, `SallaProductsList`, `SallaProductsSlider`, `SallaSlider` (marked **native** below).
3. **A React wrapper** of the web component: `import { SallaX } from '@salla.sa/twilight-components-react/x'` (marked **wrapper**). The subpath is the tag without `salla-`.
4. **The raw tag** `<salla-x>`, only when no wrapper exists.

In a wrapper, set props by their **Property** name (camelCase). In a raw tag, use the **Attribute** name (kebab-case). Complex values (objects, arrays) are passed as props, not attributes.

## All components [#all-components]

### Interface [#interface]

| Tag                                                                    | Properties | Events | Methods | In React |
| ---------------------------------------------------------------------- | ---------- | ------ | ------- | -------- |
| [`<salla-accordion>`](https://docs.salla.dev/twilight/react/web-components/salla-accordion)                 | 4          | 0      | 0       | wrapper  |
| [`<salla-alert>`](https://docs.salla.dev/twilight/react/web-components/salla-alert)                         | 3          | 0      | 0       | wrapper  |
| [`<salla-badge>`](https://docs.salla.dev/twilight/react/web-components/salla-badge)                         | 3          | 0      | 0       | wrapper  |
| [`<salla-bottom-alert>`](https://docs.salla.dev/twilight/react/web-components/salla-bottom-alert)           | 5          | 0      | 0       | wrapper  |
| [`<salla-breadcrumb>`](https://docs.salla.dev/twilight/react/web-components/salla-breadcrumb)               | 0          | 0      | 0       | native   |
| [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button)                       | 11         | 0      | 5       | native   |
| [`<salla-count-down>`](https://docs.salla.dev/twilight/react/web-components/salla-count-down)               | 19         | 0      | 1       | wrapper  |
| [`<salla-drawer>`](https://docs.salla.dev/twilight/react/web-components/salla-drawer)                       | 11         | 1      | 5       | wrapper  |
| [`<salla-infinite-scroll>`](https://docs.salla.dev/twilight/react/web-components/salla-infinite-scroll)     | 5          | 0      | 0       | wrapper  |
| [`<salla-list-tile>`](https://docs.salla.dev/twilight/react/web-components/salla-list-tile)                 | 2          | 0      | 0       | wrapper  |
| [`<salla-loading>`](https://docs.salla.dev/twilight/react/web-components/salla-loading)                     | 4          | 0      | 0       | wrapper  |
| [`<salla-maintenance-alert>`](https://docs.salla.dev/twilight/react/web-components/salla-maintenance-alert) | 0          | 0      | 0       | wrapper  |
| [`<salla-menu>`](https://docs.salla.dev/twilight/react/web-components/salla-menu)                           | 6          | 0      | 0       | wrapper  |
| [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal)                         | 14         | 2      | 5       | wrapper  |
| [`<salla-placeholder>`](https://docs.salla.dev/twilight/react/web-components/salla-placeholder)             | 3          | 0      | 0       | wrapper  |
| [`<salla-progress-bar>`](https://docs.salla.dev/twilight/react/web-components/salla-progress-bar)           | 10         | 0      | 0       | wrapper  |
| [`<salla-skeleton>`](https://docs.salla.dev/twilight/react/web-components/salla-skeleton)                   | 3          | 0      | 0       | wrapper  |
| [`<salla-slider>`](https://docs.salla.dev/twilight/react/web-components/salla-slider)                       | 22         | 16     | 24      | native   |
| [`<salla-tabs>`](https://docs.salla.dev/twilight/react/web-components/salla-tabs)                           | 2          | 0      | 0       | wrapper  |
| [`<salla-tooltip>`](https://docs.salla.dev/twilight/react/web-components/salla-tooltip)                     | 3          | 0      | 0       | wrapper  |

### Products [#products]

| Tag                                                                                | Properties | Events | Methods | In React |
| ---------------------------------------------------------------------------------- | ---------- | ------ | ------- | -------- |
| [`<salla-add-product-button>`](https://docs.salla.dev/twilight/react/web-components/salla-add-product-button)           | 11         | 2      | 0       | wrapper  |
| [`<salla-applied-filters>`](https://docs.salla.dev/twilight/react/web-components/salla-applied-filters)                 | 0          | 0      | 0       | wrapper  |
| [`<salla-basket-gap>`](https://docs.salla.dev/twilight/react/web-components/salla-basket-gap)                           | 1          | 0      | 0       | wrapper  |
| [`<salla-bought-together>`](https://docs.salla.dev/twilight/react/web-components/salla-bought-together)                 | 1          | 0      | 0       | wrapper  |
| [`<salla-bullet-delivery>`](https://docs.salla.dev/twilight/react/web-components/salla-bullet-delivery)                 | 0          | 4      | 2       | wrapper  |
| [`<salla-filters>`](https://docs.salla.dev/twilight/react/web-components/salla-filters)                                 | 1          | 1      | 4       | wrapper  |
| [`<salla-multiple-bundle-product>`](https://docs.salla.dev/twilight/react/web-components/salla-multiple-bundle-product) | 1          | 0      | 0       | wrapper  |
| [`<salla-price-range>`](https://docs.salla.dev/twilight/react/web-components/salla-price-range)                         | 4          | 1      | 1       | wrapper  |
| [`<salla-product-availability>`](https://docs.salla.dev/twilight/react/web-components/salla-product-availability)       | 4          | 0      | 0       | wrapper  |
| [`<salla-product-card>`](https://docs.salla.dev/twilight/react/web-components/salla-product-card)                       | 12         | 0      | 0       | wrapper  |
| [`<salla-product-card-embed>`](https://docs.salla.dev/twilight/react/web-components/salla-product-card-embed)           | 3          | 0      | 0       | wrapper  |
| [`<salla-product-options>`](https://docs.salla.dev/twilight/react/web-components/salla-product-options)                 | 8          | 1      | 11      | wrapper  |
| [`<salla-product-size-guide>`](https://docs.salla.dev/twilight/react/web-components/salla-product-size-guide)           | 0          | 0      | 2       | wrapper  |
| [`<salla-products-list>`](https://docs.salla.dev/twilight/react/web-components/salla-products-list)                     | 13         | 2      | 7       | native   |
| [`<salla-products-slider>`](https://docs.salla.dev/twilight/react/web-components/salla-products-slider)                 | 12         | 0      | 0       | native   |
| [`<salla-quick-buy>`](https://docs.salla.dev/twilight/react/web-components/salla-quick-buy)                             | 12         | 2      | 0       | wrapper  |
| [`<salla-quick-order>`](https://docs.salla.dev/twilight/react/web-components/salla-quick-order)                         | 9          | 1      | 0       | wrapper  |
| [`<salla-search>`](https://docs.salla.dev/twilight/react/web-components/salla-search)                                   | 6          | 0      | 0       | wrapper  |
| [`<salla-searchable-dropdown>`](https://docs.salla.dev/twilight/react/web-components/salla-searchable-dropdown)         | 15         | 4      | 0       | wrapper  |

### Cart and offers [#cart-and-offers]

| Tag                                                                        | Properties | Events | Methods | In React |
| -------------------------------------------------------------------------- | ---------- | ------ | ------- | -------- |
| [`<salla-cart-coupons>`](https://docs.salla.dev/twilight/react/web-components/salla-cart-coupons)               | 0          | 0      | 1       | wrapper  |
| [`<salla-cart-item-offers>`](https://docs.salla.dev/twilight/react/web-components/salla-cart-item-offers)       | 4          | 0      | 0       | wrapper  |
| [`<salla-cart-summary>`](https://docs.salla.dev/twilight/react/web-components/salla-cart-summary)               | 1          | 0      | 1       | wrapper  |
| [`<salla-cashback-banner>`](https://docs.salla.dev/twilight/react/web-components/salla-cashback-banner)         | 0          | 0      | 0       | wrapper  |
| [`<salla-conditional-offer>`](https://docs.salla.dev/twilight/react/web-components/salla-conditional-offer)     | 0          | 0      | 0       | wrapper  |
| [`<salla-delivery-promise>`](https://docs.salla.dev/twilight/react/web-components/salla-delivery-promise)       | 0          | 0      | 0       | wrapper  |
| [`<salla-fulfillment-methods>`](https://docs.salla.dev/twilight/react/web-components/salla-fulfillment-methods) | 0          | 0      | 0       | wrapper  |
| [`<salla-gift-card-redeem>`](https://docs.salla.dev/twilight/react/web-components/salla-gift-card-redeem)       | 0          | 1      | 0       | wrapper  |
| [`<salla-gifting>`](https://docs.salla.dev/twilight/react/web-components/salla-gifting)                         | 7          | 0      | 3       | wrapper  |
| [`<salla-installment>`](https://docs.salla.dev/twilight/react/web-components/salla-installment)                 | 4          | 0      | 0       | wrapper  |
| [`<salla-next-order-coupon>`](https://docs.salla.dev/twilight/react/web-components/salla-next-order-coupon)     | 0          | 0      | 0       | wrapper  |
| [`<salla-offer>`](https://docs.salla.dev/twilight/react/web-components/salla-offer)                             | 1          | 0      | 0       | wrapper  |
| [`<salla-offer-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-offer-modal)                 | 0          | 0      | 2       | wrapper  |
| [`<salla-payments>`](https://docs.salla.dev/twilight/react/web-components/salla-payments)                       | 1          | 0      | 0       | wrapper  |
| [`<salla-tiered-offer>`](https://docs.salla.dev/twilight/react/web-components/salla-tiered-offer)               | 0          | 0      | 0       | wrapper  |

### Orders [#orders]

| Tag                                                                        | Properties | Events | Methods | In React |
| -------------------------------------------------------------------------- | ---------- | ------ | ------- | -------- |
| [`<salla-edit-order-button>`](https://docs.salla.dev/twilight/react/web-components/salla-edit-order-button)     | 1          | 0      | 0       | wrapper  |
| [`<salla-order-branch>`](https://docs.salla.dev/twilight/react/web-components/salla-order-branch)               | 1          | 0      | 0       | wrapper  |
| [`<salla-order-cancel>`](https://docs.salla.dev/twilight/react/web-components/salla-order-cancel)               | 2          | 0      | 0       | wrapper  |
| [`<salla-order-details>`](https://docs.salla.dev/twilight/react/web-components/salla-order-details)             | 1          | 0      | 0       | wrapper  |
| [`<salla-order-edit>`](https://docs.salla.dev/twilight/react/web-components/salla-order-edit)                   | 3          | 0      | 0       | wrapper  |
| [`<salla-order-options-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-order-options-modal) | 0          | 0      | 2       | wrapper  |
| [`<salla-order-shipments>`](https://docs.salla.dev/twilight/react/web-components/salla-order-shipments)         | 1          | 0      | 0       | wrapper  |
| [`<salla-order-summary>`](https://docs.salla.dev/twilight/react/web-components/salla-order-summary)             | 1          | 0      | 0       | wrapper  |
| [`<salla-order-totals-card>`](https://docs.salla.dev/twilight/react/web-components/salla-order-totals-card)     | 1          | 0      | 0       | wrapper  |
| [`<salla-orders>`](https://docs.salla.dev/twilight/react/web-components/salla-orders)                           | 2          | 0      | 0       | wrapper  |

### Reviews [#reviews]

| Tag                                                                | Properties | Events | Methods | In React |
| ------------------------------------------------------------------ | ---------- | ------ | ------- | -------- |
| [`<salla-comment-form>`](https://docs.salla.dev/twilight/react/web-components/salla-comment-form)       | 3          | 1      | 0       | wrapper  |
| [`<salla-comments>`](https://docs.salla.dev/twilight/react/web-components/salla-comments)               | 10         | 0      | 1       | wrapper  |
| [`<salla-rating-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-modal)       | 2          | 0      | 3       | wrapper  |
| [`<salla-rating-stars>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-stars)       | 8          | 0      | 0       | wrapper  |
| [`<salla-review-card>`](https://docs.salla.dev/twilight/react/web-components/salla-review-card)         | 1          | 0      | 0       | wrapper  |
| [`<salla-reviews>`](https://docs.salla.dev/twilight/react/web-components/salla-reviews)                 | 7          | 0      | 0       | wrapper  |
| [`<salla-reviews-page>`](https://docs.salla.dev/twilight/react/web-components/salla-reviews-page)       | 0          | 0      | 0       | wrapper  |
| [`<salla-reviews-summary>`](https://docs.salla.dev/twilight/react/web-components/salla-reviews-summary) | 1          | 0      | 0       | wrapper  |
| [`<salla-verified-review>`](https://docs.salla.dev/twilight/react/web-components/salla-verified-review) | 1          | 0      | 0       | wrapper  |

### Account and loyalty [#account-and-loyalty]

| Tag                                                                              | Properties | Events | Methods | In React |
| -------------------------------------------------------------------------------- | ---------- | ------ | ------- | -------- |
| [`<salla-login-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-login-modal)                       | 9          | 0      | 1       | wrapper  |
| [`<salla-loyalty>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty)                               | 7          | 0      | 4       | wrapper  |
| [`<salla-loyalty-banner>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-banner)                 | 0          | 0      | 0       | wrapper  |
| [`<salla-loyalty-panel>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-panel)                   | 3          | 0      | 0       | wrapper  |
| [`<salla-loyalty-points-banner>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-points-banner)   | 0          | 0      | 0       | wrapper  |
| [`<salla-loyalty-points-history>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-points-history) | 0          | 0      | 0       | wrapper  |
| [`<salla-loyalty-program>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-program)               | 0          | 0      | 0       | wrapper  |
| [`<salla-notifications>`](https://docs.salla.dev/twilight/react/web-components/salla-notifications)                   | 2          | 0      | 0       | wrapper  |
| [`<salla-user-menu>`](https://docs.salla.dev/twilight/react/web-components/salla-user-menu)                           | 5          | 0      | 0       | wrapper  |
| [`<salla-user-profile>`](https://docs.salla.dev/twilight/react/web-components/salla-user-profile)                     | 1          | 0      | 0       | wrapper  |
| [`<salla-user-settings>`](https://docs.salla.dev/twilight/react/web-components/salla-user-settings)                   | 0          | 0      | 0       | wrapper  |
| [`<salla-verify>`](https://docs.salla.dev/twilight/react/web-components/salla-verify)                                 | 4          | 1      | 2       | wrapper  |
| [`<salla-wallet>`](https://docs.salla.dev/twilight/react/web-components/salla-wallet)                                 | 0          | 0      | 0       | wrapper  |
| [`<salla-wishlist-actions>`](https://docs.salla.dev/twilight/react/web-components/salla-wishlist-actions)             | 0          | 0      | 4       | wrapper  |
| [`<salla-wishlist-summary>`](https://docs.salla.dev/twilight/react/web-components/salla-wishlist-summary)             | 0          | 0      | 0       | wrapper  |

### Form fields [#form-fields]

| Tag                                                                      | Properties | Events | Methods | In React |
| ------------------------------------------------------------------------ | ---------- | ------ | ------- | -------- |
| [`<salla-attachment-view>`](https://docs.salla.dev/twilight/react/web-components/salla-attachment-view)       | 1          | 0      | 2       | wrapper  |
| [`<salla-attachments>`](https://docs.salla.dev/twilight/react/web-components/salla-attachments)               | 8          | 0      | 0       | wrapper  |
| [`<salla-booking-field>`](https://docs.salla.dev/twilight/react/web-components/salla-booking-field)           | 2          | 1      | 0       | wrapper  |
| [`<salla-color-picker>`](https://docs.salla.dev/twilight/react/web-components/salla-color-picker)             | 7          | 5      | 6       | wrapper  |
| [`<salla-conditional-fields>`](https://docs.salla.dev/twilight/react/web-components/salla-conditional-fields) | 0          | 0      | 0       | wrapper  |
| [`<salla-custom-fields>`](https://docs.salla.dev/twilight/react/web-components/salla-custom-fields)           | 3          | 2      | 3       | wrapper  |
| [`<salla-datetime-picker>`](https://docs.salla.dev/twilight/react/web-components/salla-datetime-picker)       | 49         | 2      | 0       | wrapper  |
| [`<salla-file-upload>`](https://docs.salla.dev/twilight/react/web-components/salla-file-upload)               | 58         | 5      | 1       | wrapper  |
| [`<salla-quantity-input>`](https://docs.salla.dev/twilight/react/web-components/salla-quantity-input)         | 1          | 0      | 3       | wrapper  |
| [`<salla-tel-input>`](https://docs.salla.dev/twilight/react/web-components/salla-tel-input)                   | 5          | 1      | 2       | wrapper  |

### Store and platform [#store-and-platform]

| Tag                                                                      | Properties | Events | Methods | In React |
| ------------------------------------------------------------------------ | ---------- | ------ | ------- | -------- |
| [`<salla-advertisement>`](https://docs.salla.dev/twilight/react/web-components/salla-advertisement)           | 0          | 0      | 0       | wrapper  |
| [`<salla-app-install-alert>`](https://docs.salla.dev/twilight/react/web-components/salla-app-install-alert)   | 0          | 0      | 0       | wrapper  |
| [`<salla-apps-icons>`](https://docs.salla.dev/twilight/react/web-components/salla-apps-icons)                 | 3          | 0      | 0       | wrapper  |
| [`<salla-contacts>`](https://docs.salla.dev/twilight/react/web-components/salla-contacts)                     | 5          | 0      | 0       | wrapper  |
| [`<salla-cookies-bar>`](https://docs.salla.dev/twilight/react/web-components/salla-cookies-bar)               | 0          | 0      | 3       | wrapper  |
| [`<salla-hook>`](https://docs.salla.dev/twilight/react/web-components/salla-hook)                             | 1          | 0      | 1       | wrapper  |
| [`<salla-localization-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-localization-modal) | 3          | 0      | 3       | wrapper  |
| [`<salla-map>`](https://docs.salla.dev/twilight/react/web-components/salla-map)                               | 10         | 4      | 2       | wrapper  |
| [`<salla-metadata>`](https://docs.salla.dev/twilight/react/web-components/salla-metadata)                     | 2          | 0      | 0       | wrapper  |
| [`<salla-scopes>`](https://docs.salla.dev/twilight/react/web-components/salla-scopes)                         | 2          | 0      | 3       | wrapper  |
| [`<salla-social>`](https://docs.salla.dev/twilight/react/web-components/salla-social)                         | 0          | 0      | 0       | wrapper  |
| [`<salla-social-share>`](https://docs.salla.dev/twilight/react/web-components/salla-social-share)             | 5          | 0      | 3       | wrapper  |
| [`<salla-trust-badges>`](https://docs.salla.dev/twilight/react/web-components/salla-trust-badges)             | 1          | 0      | 0       | wrapper  |