Web Components

A shareable web components library that provides typed web components that can be used with plain HTML or within any major frameworks, such as React, Angular, Vue or Svelte.

Installation

You can install the package with:

npm install @sesamy/sesamy-components

or

yarn add @sesamy/sesamy-components

Load the vendor bundle in production

Most production integrations should not self-host the library. Load the per-vendor bundle from scripts.sesamy.com instead, which ships the components together with sesamy-js and your vendor configuration. See the Bootstrap Loader page.

Available Components

The library provides the following web components:

• sesamy-login - Authentication component with login button and user menu
• sesamy-content-container - Controls access to content based on authentication and entitlements
• sesamy-paywall - Displays a paywall for content with different templates
• sesamy-visibility - Conditionally renders content based on authentication status
• sesamy-button - Styled button matching the other Sesamy components

The library also registers sesamy-avatar and sesamy-login-menu-item. These are internal building blocks of sesamy-login with no stability guarantee, so avoid using them directly.

Basic Usage

All components are web components that can be used in plain HTML. Load the bundle once from a URL your server exposes, then use the elements anywhere on the page:

<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="/assets/sesamy-components.es.js"></script>
  </head>
  <body>
    <sesamy-login></sesamy-login>
  </body>
</html>

The bundle lives at node_modules/@sesamy/sesamy-components/dist/lib/sesamy-components.es.js inside the installed package. Browsers cannot load it from there directly, so copy or serve it from your own assets, or let your bundler resolve it by importing the package:

import '@sesamy/sesamy-components';

Framework Integration

These web components are compatible with all major frameworks:

• React - Use components directly in JSX
• Angular - Include in templates with CUSTOM_ELEMENTS_SCHEMA
• Vue - Use components in templates
• Svelte - Import and use in Svelte components

See custom-elements-everywhere.com for detailed framework compatibility.

Styling and Design Tokens

Components render inside shadow DOM and are customised through CSS custom properties (design tokens), slots, and documented attributes. See Styling Components for the styling model, the sizing model, and the global token reference. Each component page documents its own design tokens.