EJSUI-KIT

Components

Interactive previews of all available UI components.

Button

Variants

Soft colors

Sizes

With icons

Round icon buttons

Badge

Variants

Default Muted Success Warning Danger Info

With icons

Active Warning Error Info New

Soft colors

Primary Secondary Muted Success Warning Danger Info

Alert

Spinner

Tailles

sm
md
lg

Bouton — prop loading (SSR)

Bouton — toggle JS setLoading()

Cliquer pour simuler un chargement de 2s

Skeleton

Text

Card

List

Custom — classe .ui-skeleton directement

Card

Card title

Card subtitle or description

Card body content goes here. It can contain any HTML.

Simple card with inline padding, no header/footer slots needed.

Bright workspace with desks and chairs

Image card

Optional media slot

Use the image prop for editorial cards, products, articles or dashboard previews.

Drawer

Responsive content

Filtres

Le même bloc DOM passe dans le drawer sur mobile.

Responsive

Sliding Drawer

side="right"

side="left"

side="bottom"

side="top"

size="full"

side="right" size="full"

side="bottom" size="full"

handle variants

handle="arrow"

handle="icon"

handle="text"

Anchor Nav

Overview

This fake documentation block gives the preview real anchor targets. Click the nav items to jump between sections inside the sandbox.

Usage

The nav stays sticky while this panel scrolls, and the active link follows the visible fake section.

API

Items are explicit, so the nav stays predictable even when the page contains headings that should not appear in the sidebar.

items: [{ id, label }]

Mega Menu

Click "Products" or "Company" to open a desktop panel. On small screens, use the drawer trigger.

Mega Menu vertical

Même composant, avec la nav affichée en vertical.

La navigation principale se lit en colonne, tout en gardant le même panneau méga-menu.

Accordion

mode: "single" — un seul panneau ouvert à la fois

A shadcn/ui-inspired design system for Express + EJS. No React, no Bootstrap — pure Tailwind CSS and Vanilla JS.

No bundler needed. Tailwind CSS is compiled via the CLI. JavaScript uses native ES modules loaded directly by the browser.

Create an EJS partial in src/views/ui/, a JS module in public/ui/components/, register it in the loader map, and add CSS in assets/css/input.css.

mode: "multiple" — plusieurs panneaux peuvent rester ouverts simultanément

Orders are shipped within 2 business days. Express delivery is available at checkout.

Items can be returned within 30 days of purchase. Contact support to initiate a return.

We accept Visa, Mastercard, PayPal, and bank transfers. All transactions are secured.

open: true — panneau ouvert au chargement

Ce panneau est ouvert par défaut grâce à open: true.

Ce panneau est fermé au chargement.

Ce panneau est fermé au chargement.

Collapse

closed by default

open: true

Le contenu ouvert utilise une hauteur automatique apres la transition, ce qui permet au contenu dynamique de grandir normalement.

external triggers

rich content

disabled

Tooltip

Popover

Toast

Variants

Positions

Tabs

Sans icône

Manage your account settings and preferences.

Avec icônes

Paramètres du compte.

Onglet actif par défaut (2e)

Historique des actions récentes.

Table

Personnalisation des colonnes

Essayez de masquer des colonnes ou de les épingler à gauche / à droite. La configuration est persistée par table grâce à localStorage.

Catalogue

Responsable Région Stock Mise à jour Statut
Widget A Lina Moreau FR 128 Hier En stock
Widget B Hugo Bernard BE 42 Il y a 2 j Faible
Widget C Nora Klein DE 0 Aujourd’hui Rupture
Widget D Marc Vidal ES 86 Hier En stock

Basique

Email Rôle Statut
Alice Martin alice@example.com Admin Actif
Bob Dupont bob@example.com Éditeur Actif
Clara Schmidt clara@example.com Lecteur En attente
David Leroy david@example.com Éditeur Inactif
Eva Nguyen eva@example.com Lecteur Actif

Tri actif et limite persistée (name asc)

Abonnements
Alice Martin Pro 12 jan. 2024 29,00 €
Bob Dupont Gratuit 03 mar. 2024 0,00 €
Clara Schmidt Entreprise 27 nov. 2023 99,00 €

Striped + compact

Pays Code Utilisateurs
France FR 12 483
Allemagne DE 9 201
Espagne ES 7 654
Italie IT 6 890
Pays-Bas NL 4 312
Belgique BE 3 107

Sélection de lignes

Nom Email Équipe Statut
Alice Martin alice@example.com Produit Actif
Bob Dupont bob@example.com Support Actif
Clara Schmidt clara@example.com Finance En attente
David Leroy david@example.com Ops Verrouillé

Lignes + colonnes figées

Équipe Owner Jan Fév Mar Avr Mai Juin Juil Août Total
Total Toutes équipes 1 245 1 382 1 517 1 604 1 721 1 890 1 943 2 031 13 333
Acquisition Lina Moreau 182 210 238 249 272 301 318 330 2 100
Activation Hugo Bernard 154 168 191 207 225 248 263 276 1 732
Retention Nora Klein 203 229 251 268 294 327 341 359 2 272
Support Marc Vidal 121 137 145 153 166 181 194 202 1 299
Finance Emma Rossi 98 104 116 123 131 144 149 155 1 020
Produit Sofia Martin 173 192 216 229 244 267 281 296 1 898
Data Noah Dubois 133 148 167 178 191 209 218 231 1 475
Ops Iris Lefèvre 94 106 118 129 141 153 160 169 1 070
Partenariats Tom Alvarez 87 88 75 68 57 60 19 13 467

État vide

Nom Email Rôle
Aucun utilisateur trouvé.

Code

Exemple

src/app.js Javascript 
const app = express();
const message = 'Cette ligne volontairement longue permet de tester le bouton de retour à la ligne automatique sans dépendre de la largeur de la fenêtre.';
app.get('/', (req, res) => {
  res.send(message);
});

Pagination

Résultats paginés

Faible volume (10 pages)

Grand volume

Filters

submitOnChange: true (default)

Filtres utilisateurs

Réinitialiser

submitMode: "event" + submitOnChange: false

Effacer

responsive drawer on selected breakpoints

Filtres catalogue

Tout effacer

responsive collapse on all breakpoints

Filtres avancés

Effacer

Datepicker

Date simple

Plage

Mois / année

Temps

Planning

Exemple borne avec plage horaire jour limitee.

Exemple : colonne ressource sticky (responsive, active à partir de md).

Exemple compact responsive — aperçu dense sur mobile, vue complète à partir de md.

Exemples : personnaliser la hauteur max de la surface scrollable.

Exemple global — hauteur fixe 40rem.

Exemple responsive — base:24rem / md:38rem.

Exemple sans restriction — la surface occupe sa hauteur naturelle (`max-height: none`).

Form controls

Input

We'll never share your email.

Textarea & Select

Checkbox, Switch & Radio

Checkboxes

Receive product updates and news.

Switches

Receive critical account updates.

All available UI components

All available UI components

Notification preference

Input

Textarea

Select

Checkbox

Switch

Radio

Autocomplete

Les suggestions arrivent après 1 caractère.

Affichage résolu via fetchByIdUrl au chargement.

Upload

Votre CV sera transmis aux recruteurs. Formats acceptés : PDF.

Mode édition — fichier existant

Le fichier préchargé est affiché dès le rendu côté serveur. Supprimer le fichier efface la valeur du champ caché. Sélectionner un nouveau fichier remplace automatiquement l'existant.

  • contrat-2024.pdf 181.9 Ko

Mode édition — plusieurs fichiers existants

Chaque fichier existant produit un <input type="hidden" name="photos_existing[]">. La valeur est vidée si l'utilisateur supprime l'entrée. Les nouveaux fichiers s'ajoutent à la liste.

  • photo-1.jpg photo-1.jpg 82.2 Ko
  • photo-2.jpg photo-2.jpg 100.0 Ko

Signature

Signer ici

Signez dans la zone. La valeur soumise est une image PNG en data URL.

Signature rapide
Signer ici
Signer ici

Le composant peut être rendu en lecture seule ou désactivé.

Timeline

Vertical — statuts & icônes

Commande passée

Paiement confirmé par carte bancaire.

En préparation

Votre colis est en cours de conditionnement.

Expédié

Numéro de suivi : FR123456789.

Livraison

Créneau estimé : 9h–13h.

Vertical — dots simples

Fondation

Création de la société à Lyon.

Série A

Levée de fonds de 2 M€.

Expansion

Ouverture de bureaux à Paris et Bordeaux.

Scale

Croissance de l'équipe : 40 collaborateurs.

International

Entrée sur les marchés belge et suisse.

Alterné

Fondation

Création de la société.

Série A

Levée de fonds de 2 M€.

Expansion

Bureaux à Paris et Bordeaux.

Scale

40 collaborateurs.

International

Marchés belge et suisse.

Horizontal — étapes de processus

Panier

Livraison

Paiement

Confirmation

Markup libre — corps HTML personnalisé

Contrat signé

Contrat N° 2025-042 signé par les deux parties.

Accès créé

Identifiants envoyés par email à alice@example.com.

Onboarding

Session prévue le 22 mai 2025.

Étapes numérotées — auto ascendant

1

Création du compte

Renseignez vos informations.
2

Vérification e-mail

Cliquez sur le lien reçu.
3

Configuration du profil

Complétez votre fiche.
4

Invitation des membres

Ajoutez vos collaborateurs.
5

Première publication

Mettez votre projet en ligne.

Étapes numérotées — auto descendant

4

Lancement v3

Mise en production effectuée.
3

Tests de charge

Validation des performances.
2

Code freeze

Gel du code — correctifs critiques seulement.
1

Recette QA

Validation en cours.

Horizontal — nodeStep libre

1

Panier

2

Livraison

3

Paiement

4

Confirmation

Progress Bar

Couleurs

Primary 70%
Secondary 50%
Success 55%
Warning 40%
Danger 85%
Info 60%
Muted 35%

Tailles

Small 60%
Medium 60%
Large 60%

Position du texte — extérieur

top-left 65%
top-center 65%
top-right 65%
bottom-left 65%
bottom-center 65%
bottom-right 65%

Position du texte — intérieur (labels courts)

Envoi fichier · 70%
Traitement · 70%
Synchronisation · 70%

Rayures

Striped 60%
Striped + animated 75%

Mode indéterminé

Chargement...
Synchronisation en cours

Charts

Line

Bar

Area (line preset)

Stacked bar

Stacked 100%

Doughnut

Gauge

Horizontal bar

Combo (bar + line)

Editor

Toolbar complète (défaut)

Toolbar minimale

Mise en forme de base uniquement.

Valeur initiale + état d'erreur

Désactivé (lecture seule)