diff --git a/apps/demo-app/src/app/app.routes.ts b/apps/demo-app/src/app/app.routes.ts
index 1198c02..625f1c0 100644
--- a/apps/demo-app/src/app/app.routes.ts
+++ b/apps/demo-app/src/app/app.routes.ts
@@ -1,5 +1,4 @@
 import { Route } from '@angular/router';
-import { ListService } from '@qupaya/sketch';
 
 const UUID_REGEX = /^[a-z,0-9,-]{36,36}$/;
 
@@ -18,7 +17,6 @@ export const appRoutes: Route[] = [
   },
   {
     path: 'list-sample',
-    providers: [ListService],
     children: [
       {
         path: '',
diff --git a/apps/demo-app/src/app/pages/list-sample/list-sample.component.html b/apps/demo-app/src/app/pages/list-sample/list-sample.component.html
index 72a0fa0..4c04d7f 100644
--- a/apps/demo-app/src/app/pages/list-sample/list-sample.component.html
+++ b/apps/demo-app/src/app/pages/list-sample/list-sample.component.html
@@ -1,4 +1,4 @@
-<sk-list-collection (activeIdChanged)="rootActiveId.set($event)">
+<sk-list skListProvider (activeIdChanged)="rootActiveId.set($event)">
   <div class="sk-list" @skListAnimation>
     @for (rootItem of items(); track rootItem.link) {
     <sk-list-item [skListItemId]="rootItem.link" [skEnableRouting]="true">
@@ -10,7 +10,7 @@
         <span> {{ rootItem.label }} </span>
       </div>
       @if (rootItem.children?.length && rootActiveId() === rootItem.link) {
-      <sk-list-collection
+      <sk-list
         class="sk-child-list"
         sk-childs
         (activeIdChanged)="childActiveId.set($event)"
@@ -30,7 +30,7 @@
             </div>
             @if (childItem.children?.length && childActiveId() ===
             childItem.link) {
-            <sk-list-collection
+            <sk-list
               class="sk-grand-child-list"
               sk-childs
               (activeIdChanged)="grandChildActiveId.set($event)"
@@ -54,14 +54,14 @@
                 </sk-list-item>
                 }
               </div>
-            </sk-list-collection>
+            </sk-list>
             }
           </sk-list-item>
           }
         </div>
-      </sk-list-collection>
+      </sk-list>
       }
     </sk-list-item>
     }
   </div>
-</sk-list-collection>
+</sk-list>
diff --git a/apps/demo-app/src/app/pages/list-sample/list-sample.component.ts b/apps/demo-app/src/app/pages/list-sample/list-sample.component.ts
index 9c4c504..e4f9c8a 100644
--- a/apps/demo-app/src/app/pages/list-sample/list-sample.component.ts
+++ b/apps/demo-app/src/app/pages/list-sample/list-sample.component.ts
@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {
-  ListCollectionComponent,
   ListComponent,
   ListItemActiveDirective,
   ListItemComponent,
+  ListProviderDirective,
 } from '@qupaya/sketch';
 import { SAMPLE_DATA } from './list-sample.data';
 import { query, transition, trigger } from '@angular/animations';
@@ -17,10 +17,10 @@ import { RouterOutlet } from '@angular/router';
   imports: [
     CommonModule,
     ListItemActiveDirective,
-    ListCollectionComponent,
     ListItemComponent,
     ListComponent,
     RouterOutlet,
+    ListProviderDirective,
   ],
   templateUrl: './list-sample.component.html',
   styleUrl: './list-sample.component.css',
diff --git a/libs/sketch/src/lib/components/list/components/list-collection/list-collection.component.css b/libs/sketch/src/lib/components/list/components/list-collection/list-collection.component.css
deleted file mode 100644
index 4cef8a0..0000000
--- a/libs/sketch/src/lib/components/list/components/list-collection/list-collection.component.css
+++ /dev/null
@@ -1,4 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-}
diff --git a/libs/sketch/src/lib/components/list/components/list-collection/list-collection.component.html b/libs/sketch/src/lib/components/list/components/list-collection/list-collection.component.html
deleted file mode 100644
index 6dbc743..0000000
--- a/libs/sketch/src/lib/components/list/components/list-collection/list-collection.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<ng-content></ng-content>
diff --git a/libs/sketch/src/lib/components/list/components/list-collection/list-collection.component.spec.ts b/libs/sketch/src/lib/components/list/components/list-collection/list-collection.component.spec.ts
deleted file mode 100644
index 73a7642..0000000
--- a/libs/sketch/src/lib/components/list/components/list-collection/list-collection.component.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ListCollectionComponent } from './list-collection.component';
-
-describe('ListComponent', () => {
-  let component: ListCollectionComponent;
-  let fixture: ComponentFixture<ListCollectionComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ListCollectionComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ListCollectionComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/libs/sketch/src/lib/components/list/components/list-collection/list-collection.component.ts b/libs/sketch/src/lib/components/list/components/list-collection/list-collection.component.ts
deleted file mode 100644
index b88b795..0000000
--- a/libs/sketch/src/lib/components/list/components/list-collection/list-collection.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component, output, signal, ViewEncapsulation } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ListItemComponent } from '../list-item/list-item.component';
-
-@Component({
-  selector: 'sk-list-collection',
-  standalone: true,
-  imports: [CommonModule, ListItemComponent],
-  templateUrl: './list-collection.component.html',
-  styleUrl: './list-collection.component.css',
-  encapsulation: ViewEncapsulation.ShadowDom,
-})
-export class ListCollectionComponent {
-  private readonly activeItemId = signal<string | undefined>(undefined);
-  activeIdChanged = output<string>();
-
-  activateItem(id: string): void {
-    this.activeItemId.update(() => id);
-    this.activeIdChanged.emit(id);
-  }
-}
diff --git a/libs/sketch/src/lib/components/list/components/list-item/list-item.component.ts b/libs/sketch/src/lib/components/list/components/list-item/list-item.component.ts
index ccb3dfd..0226211 100644
--- a/libs/sketch/src/lib/components/list/components/list-item/list-item.component.ts
+++ b/libs/sketch/src/lib/components/list/components/list-item/list-item.component.ts
@@ -6,15 +6,13 @@ import {
   untracked,
   ViewEncapsulation,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { ListItemActiveDirective } from '../../directives/list-item-active.directive';
-import { ListCollectionComponent } from '../list-collection/list-collection.component';
 import { ListService } from '../../services/list.service';
+import { ListComponent } from '../../list.component';
 
 @Component({
   selector: 'sk-list-item',
   standalone: true,
-  imports: [CommonModule],
   templateUrl: './list-item.component.html',
   styleUrl: './list-item.component.css',
   encapsulation: ViewEncapsulation.ShadowDom,
@@ -28,7 +26,7 @@ export class ListItemComponent {
     optional: true,
     skipSelf: true,
   });
-  private readonly parentList = inject(ListCollectionComponent, {
+  private readonly parentList = inject(ListComponent, {
     optional: true,
     skipSelf: true,
   });
diff --git a/libs/sketch/src/lib/components/list/directives/list-provider.directive.ts b/libs/sketch/src/lib/components/list/directives/list-provider.directive.ts
new file mode 100644
index 0000000..28125ff
--- /dev/null
+++ b/libs/sketch/src/lib/components/list/directives/list-provider.directive.ts
@@ -0,0 +1,39 @@
+import {
+  AfterViewInit,
+  Directive,
+  forwardRef,
+  inject,
+  OnInit,
+  viewChild,
+} from '@angular/core';
+import { ListService } from '../services/list.service';
+import { ListComponent } from '../list.component';
+
+@Directive({
+  selector: '[skListProvider]',
+  standalone: true,
+  providers: [ListService],
+})
+export class ListProviderDirective implements OnInit, AfterViewInit {
+  private readonly possibleParentList = inject(ListComponent, {
+    optional: true,
+    skipSelf: true,
+  });
+  private readonly listComponent = viewChild(forwardRef(() => ListComponent));
+
+  ngOnInit(): void {
+    if (this.possibleParentList) {
+      throw new Error(
+        'The ListProviderDirective must be set on root sk-list component.'
+      );
+    }
+  }
+
+  ngAfterViewInit(): void {
+    if (!this.listComponent) {
+      throw new Error(
+        'The ListProviderDirective must be set on a sk-list component.'
+      );
+    }
+  }
+}
diff --git a/libs/sketch/src/lib/components/list/index.ts b/libs/sketch/src/lib/components/list/index.ts
index b20a4a8..6ef5a88 100644
--- a/libs/sketch/src/lib/components/list/index.ts
+++ b/libs/sketch/src/lib/components/list/index.ts
@@ -1,5 +1,5 @@
-export * from './components/list-collection/list-collection.component';
 export * from './components/list-item/list-item.component';
 export * from './directives/list-item-active.directive';
+export * from './directives/list-provider.directive';
 export * from './services/list.service';
 export * from './list.component';
diff --git a/libs/sketch/src/lib/components/list/list.component.css b/libs/sketch/src/lib/components/list/list.component.css
index e69de29..4cef8a0 100644
--- a/libs/sketch/src/lib/components/list/list.component.css
+++ b/libs/sketch/src/lib/components/list/list.component.css
@@ -0,0 +1,4 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/libs/sketch/src/lib/components/list/list.component.ts b/libs/sketch/src/lib/components/list/list.component.ts
index 1378224..6f6125f 100644
--- a/libs/sketch/src/lib/components/list/list.component.ts
+++ b/libs/sketch/src/lib/components/list/list.component.ts
@@ -1,13 +1,17 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ListService } from './services/list.service';
+import { Component, output, signal } from '@angular/core';
 
 @Component({
   selector: 'sk-list',
   standalone: true,
-  imports: [CommonModule],
-  providers: [ListService],
   templateUrl: './list.component.html',
   styleUrl: './list.component.css',
 })
-export class ListComponent {}
+export class ListComponent {
+  private readonly activeItemId = signal<string | undefined>(undefined);
+  activeIdChanged = output<string>();
+
+  activateItem(id: string): void {
+    this.activeItemId.update(() => id);
+    this.activeIdChanged.emit(id);
+  }
+}