Web components overview

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?Copy Anchor Link

Choose the first that exists:

1. A native engine component, such as Link, ProductCard 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 componentsCopy Anchor Link

InterfaceCopy Anchor Link

ProductsCopy Anchor Link

Cart and offersCopy Anchor Link

OrdersCopy Anchor Link

ReviewsCopy Anchor Link

Account and loyaltyCopy Anchor Link

Form fieldsCopy Anchor Link

Store and platformCopy Anchor Link