1. Web Components
Salla Platform Docs
  • Overview
  • Usage
  • Components Customization
  • Predefined vs Bundle Components
  • Elements
    • Conditional Fields
    • Count Down
    • Filters
    • Infinite Scroll
    • List Tile
    • Loading
    • Map
    • Placeholder
    • Progress Bar
    • Rating Stars
    • Skeleton
    • Slider
    • Social Share
    • Tabs
    • Apps Icons
    • Breadcrumb
    • Social
    • Reviews
    • Reviews Summary
    • Color Picker
    • Modal
    • Sheet
    • Notifications
  • Form
    • Button
    • Date Time Picker
    • Tel Input
    • Select
    • File Upload
    • Menu
    • Bottom Alert
    • Contacts
    • Quantity Input
    • Edit Order Button
  • Product
    • Product Card
    • Quick Buy
    • Meta Data
    • Payments
    • Comments
    • Orders
    • Conditional Offer
    • Installment
    • Add Product
    • Gifting
    • Offer
    • Offer Modal
    • Product Availability
    • Products List
    • Product Options
    • Product Size Guide
    • Products Slider
    • Quick Order
    • Scopes
    • Search
    • Advertisement
    • Multiple Bundle Product
    • Order Details
  • User
    • Cart Summary
    • User Menu
    • User Profile
    • Localization
    • Login
    • Loyalty
    • Rating
    • User Settings
    • Verify
  • Component Bundle
    • Directory Structure
    • Create Bundle
    • Setup Bundle
    • Publish Bundle
    • Publish Bundle Requirements
    • Getting Started
Merchant
Merchant
  • Merchant API
  • Embedded SDK
  • Salla OAuth 2.0
Storefront
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Ecommerce Events
  • Component Bundle
  • Checkout APIs
  • Change Log
App Functions
Partner APIs
Partner APIs
  • App API
  • Shipments & Fulfillment APIs
  • Salla AWB
  • Recurring Payments API
  • Billing System Salla partners
  • Communication Apps
Dev Tools
Dev Tools
  • Partners Agent Kit
  • Salla Apps Playbook
  • Salla CLI
Merchant
Merchant
  • Merchant API
  • Embedded SDK
  • Salla OAuth 2.0
Storefront
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Ecommerce Events
  • Component Bundle
  • Checkout APIs
  • Change Log
App Functions
Partner APIs
Partner APIs
  • App API
  • Shipments & Fulfillment APIs
  • Salla AWB
  • Recurring Payments API
  • Billing System Salla partners
  • Communication Apps
Dev Tools
Dev Tools
  • Partners Agent Kit
  • Salla Apps Playbook
  • Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Web Components

Predefined vs Bundle Components

image.png

Salla JS Web Components vs Component Bundles#

Two tools. Two audiences. One platform. Here's how to tell them apart and know which one you should be building.
JS Web Components are built by Salla for theme developers. Component Bundles are built by partners for merchants. They are not the same thing.

JS Web Components | Salla's UI Toolkit for Theme Developers#

Twilight JS Web Components are ready-made UI building blocks provided by Salla for developers building themes on the Twilight engine. You don't install them — the Twilight engine injects them automatically into every page.
Just drop the tag in your Twig template:
They cover everything: search, filters, product cards, sliders, modals, loyalty popups, cart, reviews, gifting, installments, and more. All styled with Tailwind CSS, all customizable via CSS variables, all maintained by Salla's core team.
Always include the Twilight components safe-list in your Tailwind config or styles will be purged in production:
JS Web Components are theme-bound. When a merchant switches themes, these components change with the theme. Merchants cannot install them independently.

Component Bundles — Your Product, Sold to 60,000+ Merchants#

Component Bundles are standalone packages built by partners and sold on the Salla Themes Marketplace. Unlike JS Web Components, bundles are completely independent of any theme, a merchant installs your bundle once and it works regardless of which theme they use, now or in the future.
This is where the business opportunity is. Build a component once, publish it to the marketplace, and earn revenue from every merchant who purchases it, across the entire Salla merchants.
Theme-Independent
Your bundle works on any Salla theme. Merchants keep it even when they switch themes.
Earn Revenue
Set your price and sell to all Salla merchants directly through the themes marketplace.
Build Once, Scale Infinitely
One bundle serves the entire Salla merchant base.

Get Started in 4 Steps#

1
Set up your environment
Create a partner account at Salla Partners Portal and connect your GitHub account.
2
Create your bundle
3
Build and test
Use your demo store to test the bundle across different themes before publishing.
4
Publish to the marketplace
Your bundle is now available for all merchants to discover and purchase.
Before publishing your Theme Bundle, you can preview and test it locally using the NPM package.
1.
Install dependencies: pnpm i
2.
Run the development server: pnpm dev

Which One Is for You?#

I'm building a theme
I'm building a product
Use JS Web Components. Drop them into your Twig templates, customise their styles, and ship. Salla maintains them — you just use them.
Start here: Twilight JS Web Components

JS Web Components are Salla's toolkit for building themes. Component Bundles are your opportunity to build a product and sell it to the entire Salla merchant base.
One is a tool. The other is a business.
Modified at 2026-07-29 11:46:05
Previous
Components Customization
Next
Conditional Fields