Getting Started

This document shows the basic steps to integrate the Lyne components into your project.

Component documentation is available on digital.sbb.ch and on Docs App.

Select your technology to get started:

• Plain Javascript
• Angular
• React/Next.js

Plain Javascript

ⓘ For simple testing and reproductions, see Stackblitz starter for @sbb-esta/lyne-elements.

1. Install the @sbb-esta/lyne-elements and @sbb-esta/lyne-elements-experimental packages:

   npm install --save @sbb-esta/lyne-elements @sbb-esta/lyne-elements-experimental
   

   or, if using yarn:

   yarn add @sbb-esta/lyne-elements @sbb-esta/lyne-elements-experimental
   

2. Including global styles is strongly recommended to apply all SBB styles to your application. See the Theming Guide if you prefer more granularity on what to import.

   @import 'node_modules/@sbb-esta/lyne-elements/standard-theme.css';
   
   /** If you are using experimental components, additionally add */
   @import 'node_modules/@sbb-esta/lyne-elements-experimental/standard-theme.css';
   

3. Import the desired element and add it to globalThis:

   import { SbbButtonElement } from '@sbb-esta/lyne-elements/button.js';
   
   globalThis.SbbButtonElement = SbbButtonElement;
   

Angular

ⓘ We provide a Lyne Angular wrapper which helps to use Lyne components in Angular. See https://lyne-angular.app.sbb.ch for more information. However, it's possible to use Lyne Components in Angular without the wrapper.

ⓘ For simple testing and reproductions, see Stackblitz starter for @sbb-esta/lyne-angular.

1. Install Angular CLI, see Angular CLI documentation

2. Install the @sbb-esta/lyne-elements package:

   npm install --save @sbb-esta/lyne-elements
   

   or, if using yarn:

   yarn add @sbb-esta/lyne-elements
   

3. Including global styles is strongly recommended to apply all SBB styles to your application. See the Theming Guide if you prefer more granularity on what to import. Importing stylesheets is done by editing the styles.(s)css:

   @import 'node_modules/@sbb-esta/lyne-elements/standard-theme.css';
   
   /** If you are using experimental components, additionally add */
   @import 'node_modules/@sbb-esta/lyne-elements-experimental/standard-theme.css';
   

   or editing your angular.json:

     ...
     "styles": [
       "src/styles.scss",
       "node_modules/@sbb-esta/lyne-elements/standard-theme.css",
   
       /** If you are using experimental components */
       "node_modules/@sbb-esta/lyne-elements-experimental/standard-theme.css"
     ],
     ...
   

4. In order to use web components with Angular, you have to import CUSTOM_ELEMENTS_SCHEMA from the @angular/core package.

5. In each component, import the Lyne components you want to use in the TypeScript file: e.g. import '@sbb-esta/lyne-elements/button.js';

Example app

import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import '@sbb-esta/lyne-elements/button.js';

@Component({
  selector: 'my-app',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: ` <sbb-button>Lorem ipsum</sbb-button> `,
})
export class App {}

bootstrapApplication(App).catch((err) => console.error(err));

React/Next.js

ⓘ For simple testing and reproductions, see Stackblitz starter for @sbb-esta/lyne-react.

1. Prepare a React and Next.js setup.

2. Install the @sbb-esta/lyne-react package:

   npm install --save @sbb-esta/lyne-react
   

   or, if using yarn:

   yarn add @sbb-esta/lyne-react
   

3. Including global styles is strongly recommended to apply all SBB styles to your application. See the Theming Guide if you prefer more granularity on what to import.

   @import '~@sbb-esta/lyne-elements/standard-theme.css';
   
   /** If you are using experimental components, additionally add */
   @import '~@sbb-esta/lyne-elements-experimental/standard-theme.css';
   

4. Enhance the transpilePackages array in Next.js config.

   module.exports = {
     ...,
     transpilePackages: [
       '@sbb-esta/lyne-react',
       '@sbb-esta/lyne-elements',
       '@lit/react',
       '@lit/reactive-element',
       'lit',
       'lit-html',
       'lit-element',
     ],
   }
   

5. (Optional) To activate Server Side Rendering with Declarative Shadow DOM, you have to install the @lit-labs/nextjs package and use the method withLitSSR():

   const withLitSSR = require('@lit-labs/nextjs')({
     addDeclarativeShadowDomPolyfill: true,
   });
   
   module.exports = withLitSSR({
       ...,
       transpilePackages: [
         '@sbb-esta/lyne-elements',
         '@sbb-esta/lyne-react',
         '@sbb-esta/lyne-design-tokens',
         '@lit-labs/nextjs',
         '@lit-labs/ssr',
         '@lit-labs/ssr-react',
         '@lit/react',
         '@lit/reactive-element',
         'lit',
         'lit-element',
         'lit-html',
       ],
     });
   

6. Import and use Lyne component:

   import { SbbButton } from '@sbb-esta/lyne-react/button';
   
   export default function MyComponent() {
     return <SbbButton onClick={() => {}}></SbbButton>;
   }
   

   Whenever types are needed, they can be imported directly from the @sbb-esta/lyne-elements package:

   import type { SbbButtonSize } from '@sbb-esta/lyne-elements/button.js';
   import { SbbButton } from '@sbb-esta/lyne-react/button';
   
   export default function MyComponent() {
     const size: SbbButtonSize = 'm';
     return <SbbButton onClick={() => {}} size={size}></SbbButton>;
   }