diff --git a/src/features/admin/devkit/ComponentsPage.client.js b/src/features/admin/devkit/ComponentsPage.client.js
index 4f53d1d..d90b2e5 100644
--- a/src/features/admin/devkit/ComponentsPage.client.js
+++ b/src/features/admin/devkit/ComponentsPage.client.js
@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import {
   Button,
   Card,
@@ -9,12 +10,37 @@ import {
   Select,
   Textarea,
   Switch,
+  TagInput,
   StatCard,
   Loading,
 } from '@zen/core/shared/components';
 import { UserCircle02Icon } from '@zen/core/shared/icons';
 import AdminHeader from '../components/AdminHeader.js';
 
+const ROLE_OPTIONS = [
+  { value: 'admin', label: 'Admin', color: '#6366f1' },
+  { value: 'editor', label: 'Éditeur', color: '#f59e0b' },
+  { value: 'viewer', label: 'Lecteur', color: '#10b981' },
+  { value: 'support', label: 'Support', color: '#3b82f6' },
+  { value: 'billing', label: 'Facturation', color: '#ec4899' },
+];
+
+function TagInputDemo({ label, description, error, renderTag }) {
+  const [value, setValue] = useState([]);
+  return (
+    <TagInput
+      label={label}
+      description={description}
+      error={error}
+      placeholder="Ajouter un rôle..."
+      options={ROLE_OPTIONS}
+      value={value}
+      onChange={setValue}
+      renderTag={renderTag}
+    />
+  );
+}
+
 function PreviewBlock({ title, children }) {
   return (
     <div className="flex flex-col gap-3">
@@ -165,6 +191,19 @@ export default function ComponentsPage() {
         </div>
       </PreviewBlock>
 
+      <PreviewBlock title="TagInput">
+        <div className="w-72 flex flex-col gap-3">
+          <TagInputDemo label="Rôles" description="Sélectionnez un ou plusieurs rôles." />
+          <TagInputDemo
+            label="Avec pastilles colorées"
+            renderTag={(opt, onRemove) => (
+              <Badge key={opt.value} color={opt.color} dot onRemove={onRemove}>{opt.label}</Badge>
+            )}
+          />
+          <TagInputDemo label="Avec erreur" error="Ce champ est requis." />
+        </div>
+      </PreviewBlock>
+
       <PreviewBlock title="Loading">
         <Loading />
       </PreviewBlock>