Light Mode

Usage

Twilight Web Components makes it easy to implement and use them across any framework or no framework at all. This is accomplished by utilizing web platform APIs and Web Components that are standardized for smooth use.

:::tip[Note]
It's worth noting that the Tailwind CSS Framework is the default foundation for the Twilight web components.There is a possibility that future plans may include other CSS frameworks.
:::

Installation

To use the components, developers need to load a CSS file and some JavaScript. The CSS file includes the fonts and design tokens.

Twilight Themes

When using Twilight web components within Twilight themes, there's no need to include them in your bundle or HTML. The Twilight theme engine will automatically inject the latest version of the Twilight web components into the page.

Bundler/ES modules

You need Node.js and Tailwind CSS installed, then install the components by performing one of the following commands:

``` npm install @salla.sa/twilight-components --save ``` ``` yarn add @salla.sa/twilight-components ```

In your javascript codebase, you can import the components as follows:

The following code imports and applies polyfills for older browsers, then registers the Twilight Web Components with the window object, enabling their use in the webpage.

import {
  applyPolyfills, 
  defineCustomElements as TwilightWebComponents
} from '@salla.sa/twilight-components/loader';

applyPolyfills().then(() => {
    TwilightWebComponents(window);
});

The another approach to loading Twilight Components is to use the version hosted on the CDN. The components can be loaded via `