Skip to main content
Light Dark System


Angular plays nice with custom elements, so you can use Shoelace in your Angular apps with ease.


To add Shoelace to your Angular app, install the package from npm.

npm install @shoelace-style/shoelace

Next, include a theme and set the base path for icons and other assets. In this example, we’ll import the light theme and use the CDN as a base path.

import '@shoelace-style/shoelace/dist/themes/light.css';
import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';



Then make sure to apply the custom elements schema as shown below.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
export class AppModule {}

Reference Shoelace components in your Angular component code

import { SlDrawer } from '@shoelace-style/shoelace';

  selector: 'app-drawer-example',
  template: '<div id="page"><button (click)="showDrawer()">Show drawer</button><sl-drawer #drawer label="Drawer" class="drawer-focus" style="--size: 50vw"><p>Drawer content</p></sl-drawer></div>'
export class DrawerExampleComponent implements OnInit {

  // use @ViewChild to get a reference to the #drawer element within component template
  drawer?: ElementRef<SlDrawer>;


  constructor(...) {

  ngOnInit() {


  showDrawer() {
    // use nativeElement to access Shoelace components

Now you can start using Shoelace components in your app!