EJSUI-KIT

Components

Interactive previews of all available UI components.

Internationalization preview

This page uses the active UI locale. Explicit demo labels remain final application text.

Use a fixed locale to verify a deterministic export.

Active locale: en

Buttons

Variants

Soft colors

Sizes

With icons

Round icon buttons

Badges

Variants

Default Muted Success Warning Danger Info

With icons

Active Warning Error Info New

Soft colors

Primary Secondary Muted Success Warning Danger Info

Alerts

Spinner

Sizes

sm
md
lg

Button — loading prop (SSR)

Button — JS toggle (setLoading())

Click to simulate a 2-second loading state

Skeleton

Text

Card

List

Custom — classe .ui-skeleton directement

Cards

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

Filters

The same DOM block moves into the drawer on 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 documentation block gives the preview real anchor targets.

Usage

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

API

Items are explicit, so the nav stays predictable.

items: [{ id, label }]

Mega Menu

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

Vertical mega menu

Same component, with the navigation displayed vertically.

The main navigation is displayed as a column while keeping the same mega-menu panel.

Accordion

mode: "single" — one panel open at a time

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" — several panels can remain open at once

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 — panel open on load

This panel is open by default thanks to open: true.

This panel is closed on load.

This panel is closed on load.

Collapse

closed by default

open: true

The open content uses automatic height after the transition, allowing dynamic content to grow normally.

external triggers

rich content

disabled

Tooltip

Popover

Toast

Variants

Positions

Tabs

Without icons

Manage your account settings and preferences.

With icons

Account settings.

Second tab active by default

Recent activity.

Table

Column personalization

Hide columns or pin them left or right. The configuration is persisted per table through localStorage.

Catalogue

Owner Region Stock Updated Status
Widget A Lina Moreau FR 128 Yesterday In stock
Widget B Hugo Bernard BE 42 2 days ago Low
Widget C Nora Klein DE 0 Today Out of stock
Widget D Marc Vidal ES 86 Yesterday In stock

Basic

Email Role Status
Alice Martin alice@example.com Admin Actif
Bob Dupont bob@example.com Editor Active
Clara Schmidt clara@example.com Reader Pending
David Leroy david@example.com Editor Inactive
Eva Nguyen eva@example.com Reader Active

Active sort and persisted limit (name asc)

Subscriptions
Alice Martin Pro Jan 12, 2024 €29.00
Bob Dupont Free Mar 03, 2024 €0.00
Clara Schmidt Enterprise Nov 27, 2023 €99.00

Striped + compact

Country Code Users
France FR 12 483
Germany DE 9 201
Spain ES 7 654
Italy IT 6 890
Netherlands NL 4 312
Belgium BE 3 107

Row selection

Name Email Team Status
Alice Martin alice@example.com Product Active
Bob Dupont bob@example.com Support Actif
Clara Schmidt clara@example.com Finance Pending
David Leroy david@example.com Ops Locked

Sticky rows and columns

Team Owner Jan Feb Mar Apr May Jun Jul Aug Total
Total All teams 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
Product 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 Lefevre 94 106 118 129 141 153 160 169 1 070
Partnerships Tom Alvarez 87 88 75 68 57 60 19 13 467

Empty state

Name Email Role
No users found.

Code

Example

src/app.js Javascript 
const app = express();
const message = 'This intentionally long line tests automatic wrapping without depending on the window width.';
app.get('/', (req, res) => {
  res.send(message);
});

Pagination

Paginated results

Faible volume (10 pages)

Grand volume

Filters

submitOnChange: true (default)

User filters

Reset

submitMode: "event" + submitOnChange: false

Clear

responsive drawer on selected breakpoints

Catalog filters

Clear all

responsive collapse on all breakpoints

Advanced filters

Clear

Datepicker

Single date

Range

Month / year

Time

Planning

Bounded example with a limited daily time range.

Sticky resource column (responsive, enabled from md).

Compact responsive example — dense mobile preview, full view from md.

Examples: customize the scrollable surface max height.

Global example — fixed height 40rem.

Responsive example — base:24rem / md:38rem.

Unbounded example — the surface uses its natural height (max-height: none).

Forms

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

Suggestions appear after one character.

Resolved through fetchByIdUrl on load.

Upload

Your resume will be sent to recruiters. Accepted format: PDF.

Edit mode — existing file

The preloaded file is shown during server rendering. Removing it clears the hidden field value. Selecting a new file automatically replaces the existing one.

  • contrat-2024.pdf 181.9 Ko

Edit mode — multiple existing files

Each existing file produces a <input type="hidden" name="photos_existing[]">. The value is cleared when the user removes the entry. New files are added to the list.

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

Signature

Sign here

Sign in the area. The submitted value is a PNG image as a data URL.

Quick signature
Sign here
Sign here

The component can be rendered read-only or disabled.

Timeline

Vertical — statuses & icons

Order placed

Payment confirmed by card.

Preparing

Your package is being prepared.

Shipped

Tracking number: FR123456789.

Delivery

Estimated slot: 9 AM–1 PM.

Vertical — simple dots

Foundation

Company founded in Lyon.

Series A

Raised €2M.

Expansion

Opened offices in Paris and Bordeaux.

Scale

Team growth: 40 employees.

International

Entered the Belgian and Swiss markets.

Alternating

Foundation

Company founded.

Series A

Raised €2M.

Expansion

Offices in Paris and Bordeaux.

Scale

40 employees.

International

Belgian and Swiss markets.

Horizontal — process steps

Cart

Delivery

Payment

Confirmation

Free markup — custom HTML body

Signed contract

Contract No. 2025-042 signed by both parties.

Access created

Credentials sent by email to alice@example.com.

Onboarding

Session scheduled for May 22, 2025.

Numbered steps — automatic ascending

1

Create account

Enter your information.
2

Verify email

Click the link you received.
3

Configure profile

Complete your profile.
4

Invite members

Add your teammates.
5

First publication

Publish your project.

Numbered steps — automatic descending

4

v3 launch

Production release completed.
3

Load tests

Performance validated.
2

Code freeze

Code freeze — critical fixes only.
1

QA review

Validation in progress.

Horizontal — custom nodeStep

1

Cart

2

Delivery

3

Payment

4

Confirmation

Progress Bar

Colors

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

Sizes

Small 60%
Medium 60%
Large 60%

Text position — outside

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

Text position — inside (short labels)

File upload · 70%
Processing · 70%
Synchronization · 70%

Stripes

Striped 60%
Striped + animated 75%

Indeterminate mode

Loading...
Synchronizing

Charts

Line

Bar

Area (line preset)

Stacked bar

Stacked 100%

Doughnut

Gauge

Horizontal bar

Combo (bar + line)

Editor

Full toolbar (default)

Minimal toolbar

Basic formatting only.

Initial value + error state

Disabled (read-only)