Component documentation

<%- include('../ui/button', {
  label: 'Save',
  variant: 'regular',
  color: 'primary',
  size: 'md',
  shape: 'default',
  iconName: 'check',
  customSize: '3rem',
  type: 'button',
  href: '/action',
  id: 'save-button',
  pressAnimation: true,
  iconLeft: 'save',
  iconRight: 'arrow-right',
  attrs: { 'data-action': 'save', 'aria-label': 'Save' },
  class: 'w-full sm:w-auto',
  disabled: false,
  loading: false,
}) %>

<%- include('../ui/badge', {
  label: 'New',
  variant: 'soft',
  color: 'success',
  iconName: 'sparkles',
  class: 'w-full',
}) %>

<%- include('../ui/alert', {
  variant: 'warning',
  title: 'Warning',
  message: '<p><strong>HTML</strong> content.</p>',
  dismissible: true,
  dismissLabel: 'Close alert',
  class: 'w-full',
}) %>

<%- include('../ui/spinner', {
  size: "md",
  class: 'w-full',
}) %>

<%- include('../ui/skeleton', {
  type: 'custom',
  lines: 4,
  items: 3,
  body: '<div class="ui-skeleton h-12 w-full"></div>',
  class: 'w-full',
}) %>

<%- include('../ui/card', {
  title: 'Component title',
  subtitle: 'Secondary description',
  image: { src: '/images/example.jpg', alt: 'Illustration', position: 'top', aspect: '16 / 9', class: 'object-cover', mediaClass: 'bg-muted', loading: 'lazy' },
  imageAlt: 'Illustration',
  imagePosition: 'top',
  imageAspect: '16 / 9',
  imageClass: 'object-cover',
  imageMediaClass: 'bg-muted',
  footer: '<button type="button" class="ui-btn ui-btn-regular ui-btn-md">Confirm</button>',
  body: '<p>Component HTML content.</p>',
  class: 'w-full',
}) %>

<%- include('../ui/modal', {
  id: 'example-modal',
  title: 'Component title',
  titleIcon: 'info',
  body: '<p>Component HTML content.</p>',
  size: 'lg',
  class: 'w-full',
  footerHidden: false,
  buttons: [
      { label: 'Cancel', variant: 'ghost', color: 'muted', size: 'sm', close: true },
      { label: 'Save', variant: 'regular', color: 'primary', size: 'md', shape: 'default', iconLeft: 'save', iconRight: 'arrow-right', type: 'submit', id: 'save', class: 'font-semibold', attrs: { 'data-action': 'save' }, disabled: false },
    ],
  footer: '<button type="button" class="ui-btn ui-btn-regular ui-btn-md">Confirm</button>',
}) %>

<%- include('../ui/drawer', {
  id: 'example-drawer',
  title: 'Component title',
  titleIcon: 'info',
  body: '<p>Component HTML content.</p>',
  side: { base: 'right', lg: 'left' },
  width: { base: 'calc(100vw - 2rem)', sm: '24rem', lg: '32rem' },
  bodyClass: '',
  responsive: { source: '#drawer-content', breakpoints: ['base', 'sm', 'md'], media: '(max-width: 1023px)', controls: true },
  class: 'w-full',
}) %>

<%- include('../ui/sliding-drawer', {
  id: 'example-sliding-drawer',
  body: '<p>Component HTML content.</p>',
  side: 'right',
  size: 'full',
  overlay: true,
  handle: 'icon',
  handleIcon: 'panel-right',
  handleText: 'Open',
  handleAriaLabel: 'Open panel',
  radiusClass: 'rounded-l-xl',
  radius: '1rem',
  edgeInset: '1rem',
  responsive: { source: '#sliding-content', breakpoints: ['base', 'sm', 'md'], controls: true },
  class: 'w-full',
}) %>

<%- include('../ui/anchor-nav', {
  id: 'example-anchor-nav',
  title: 'Component title',
  items: [
      { id: 'overview', label: 'Overview' },
      { id: 'api', label: 'API' },
    ],
  targetSelector: 'section[id]',
  scrollContainer: '#scroll-container',
  offsetSelector: 'header',
  rootMargin: '-80px 0px -70% 0px',
  sticky: true,
  mobileDrawer: { id: 'page-nav-drawer', title: 'Sections', side: 'right' },
  class: 'w-full',
}) %>

<%# Associated subcomponents %>
<%- include('../ui/anchor-nav-trigger', {
  target: 'page-nav-drawer',
  label: 'Label',
  iconName: 'list',
  class: 'w-full',
}) %>

<%- include('../ui/nav', {
  items: [
      { label: 'Home', href: '/', iconLeft: 'home', active: true },
      { label: 'Action', type: 'button', iconRight: 'arrow-right', attrs: { 'data-action': 'open' } },
      { label: 'Information', type: 'text', disabled: true },
    ],
  orientation: "horizontal",
  variant: "pill",
  size: "md",
  gap: "sm",
  activeMode: "exact",
  wrap: true,
  overflowX: true,
  overflowPosition: "start",
  overflowFade: true,
  id: 'example-nav',
  ariaLabel: "Navigation",
  listClass: '',
  itemClass: '',
  linkClass: '',
  attrs: { 'data-example': 'complete' },
  class: 'w-full',
}) %>

<%- include('../ui/breadcrumbs', {
  id: 'example-breadcrumbs',
  ariaLabel: "Breadcrumb",
  items: [
      { label: 'Home', href: '/', icon: 'home' },
      { label: 'Components', href: '/components', icon: 'blocks' },
      { label: 'Current page', current: true },
    ],
  activeMode: "exact",
  mobileBehavior: "scroll",
  overflowPosition: "start",
  overflowFade: true,
  separatorIcon: "chevron-right",
  separator: 'separator',
  separatorHtml: 'separatorHtml',
  maxItems: 1,
  ellipsisLabel: "Pages masquees",
  class: 'w-full',
  listClass: '',
  itemClass: '',
  linkClass: '',
  currentClass: '',
  separatorClass: '',
  attrs: { 'data-example': 'complete' },
}) %>

<%- include('../ui/mega-menu', {
  id: 'example-mega-menu',
  items: [
      { label: 'Home', href: '/', iconLeft: 'home' },
      { label: 'Products', icon: 'package', children: [
        { label: 'Platform', href: '/platform', description: 'Overview', icon: 'layers', badge: 'New', children: [
          { label: 'API', href: '/api', icon: 'braces', active: true },
        ] },
      ] },
    ],
  ariaLabel: "Navigation",
  orientation: "horizontal",
  variant: "pill",
  size: "md",
  gap: "sm",
  activeMode: "exact",
  wrap: true,
  overflowX: true,
  overflowPosition: "start",
  overflowFade: true,
  mobileTrigger: 'mobileTrigger',
  drawerMode: 'drawerMode',
  drawerBreakpoints: "base sm md",
  drawerMedia: 'drawerMedia',
  drawer: {},
  allLabel: "Tout voir",
  mobileTitle: 'mobileTitle',
  mobileThumbnails: true,
  linkAdapter: (item) => item.href,
  deobfuscate: true,
  panelClass: '',
  gridClass: '',
  rootClass: '',
  class: 'w-full',
  listClass: '',
  itemClass: '',
  linkClass: '',
  attrs: { 'data-example': 'complete' },
  openMode: "click",
}) %>

<%- include('../ui/accordion', {
  items: [
      { id: 'general', title: 'General', content: '<p>HTML content</p>', open: true },
      { id: 'advanced', title: 'Advanced', content: '<p>More content</p>' },
    ],
  mode: 'multiple',
  class: 'w-full',
}) %>

<%- include('../ui/collapse', {
  id: 'example-collapse',
  label: 'Label',
  trigger: '<button type="button" class="ui-btn ui-btn-outline ui-btn-md">Show</button>',
  body: '<p>Component HTML content.</p>',
  open: true,
  showIcon: true,
  duration: 200,
  responsive: { open: { base: false, lg: true } },
  class: 'w-full',
  triggerClass: '',
  panelClass: '',
  contentClass: '',
  disabled: false,
}) %>

<%- include('../ui/dropdown', {
  id: 'example-dropdown',
  trigger: '<button class="ui-btn ui-btn-outline ui-btn-md">Actions</button>',
  items: [
      { label: 'Edit', icon: 'pencil', href: '/edit' },
      { label: 'Move to', icon: 'folder', children: [
        { label: 'Archives', href: '/archives' },
        { label: 'Projects', href: '/projects' },
      ] },
      { type: 'separator' },
      { label: 'Delete', icon: 'trash-2', danger: true, attrs: { 'data-action': 'delete' } },
    ],
  placement: "bottom-start",
  class: 'w-full',
  portal: true,
  portalBreakpoints: [],
  portalMedia: 'portalMedia',
}) %>

<%- include('../ui/tooltip', {
  id: 'example-tooltip',
  content: 'Additional information',
  placement: 'top',
  trigger: '<button type="button" class="ui-btn ui-btn-ghost ui-btn-sm">Help</button>',
  class: 'w-full',
}) %>

<%- include('../ui/popover', {
  id: 'example-popover',
  trigger: '<button type="button" class="ui-btn ui-btn-outline ui-btn-md">Details</button>',
  body: '<p>Component HTML content.</p>',
  placement: 'bottom-start',
  class: 'w-full',
  portal: true,
  portalBreakpoints: ['base', 'sm'],
  portalMedia: '(max-width: 639px)',
}) %>

<%- include('../ui/toast-container') %>

<script type="module">
window.UI.toast({
  title: 'Save complete',
  message: 'Your changes have been saved.',
  variant: 'success',
  duration: 4000,
  position: 'top-right',
});
</script>

<%- include('../ui/tabs', {
  id: 'example-tabs',
  items: [
      { id: 'account', label: 'Account', icon: 'user', iconPosition: 'start', content: '<p>Account</p>', active: true },
      { id: 'security', label: 'Security', icon: 'lock', iconPosition: 'end', content: '<p>Security</p>' },
    ],
  class: 'w-full',
}) %>

<%- include('../ui/table', {
  id: 'example-table',
  columns: [
      { key: 'name', label: 'Name', sortable: true, align: 'left', width: '16rem', personalization: { hideable: false, pinnable: true, defaultVisible: true, defaultPin: 'left' } },
      { key: 'status', label: 'Status', align: 'center', personalization: { hideable: true, pinnable: true } },
    ],
  rows: [
      { name: 'Alice', status: 'Active', rowDataAttributes: { url: '/users/1' }, cellDataAttributes: { status: { state: 'active' } } },
    ],
  tableTitle: {},
  tableTitleAs: "h2",
  sort: {},
  selectable: { key: 'id', name: 'selected[]', selected: ['1'], disabledKey: 'locked', dataAttribute: 'selectionValue', sticky: true },
  rowsLimit: { value: 25, defaultValue: 25, options: [10, 25, 50, 100], name: 'limit', label: 'Rows', persist: true, storageKey: 'users:limit' },
  personalization: { persist: true, storageKey: 'users:columns', label: 'Columns', resetLabel: 'Reset', titleLabel: 'Customize', description: 'Choose columns', pinLabels: { free: 'Free', left: 'Left', right: 'Right' } },
  ariaLabels: {},
  sticky: { header: true, topRows: 1, leftColumns: 1, rightColumns: 1, maxScrollHeight: '32rem', breakpoints: { base: { header: true }, lg: { leftColumns: 2 } } },
  striped: true,
  compact: true,
  caption: 'caption',
  empty: "No data",
  class: 'w-full',
}) %>

<%- include('../ui/code', {
  id: 'example-code',
  language: 'ejs',
  code: '<h1>Title</h1>',
  title: 'Component title',
  copyLabel: "Copy",
  copiedLabel: "Copied!",
  copyAriaLabel: 'copyAriaLabel',
  copyIconLeft: 'copy',
  copyIconRight: 'check',
  copyButtonVariant: "outline",
  copyButtonColor: "primary",
  copyButtonSize: "sm",
  copyButtonClass: '',
  copyButton: true,
  languageBadgeVariant: "primary-soft",
  lineNumbers: true,
  wrap: true,
  wrapButton: true,
  wrapButtonLabel: "Automatic line wrapping",
  preClass: '',
  class: 'w-full',
}) %>

<%- include('../ui/pagination', {
  id: 'example-pagination',
  page: 1,
  totalPages: 1,
  totalItems: 1,
  itemsPerPage: 1,
  siblings: 1,
  boundaries: 1,
  showAllThreshold: 10,
  name: 'pagination',
  href: '/destination',
  showSummary: true,
  summaryLabel: "of",
  ariaLabel: "Pagination",
  previousLabel: "Previous",
  nextLabel: "Next",
  previousAriaLabel: "Previous page",
  nextAriaLabel: "Next page",
  class: 'w-full',
}) %>

<%- include('../ui/filters', {
  method: "GET",
  submitMode: "form",
  submitOnChange: true,
  showReset: true,
  showTitle: true,
  responsive: { drawer: true, breakpoints: ['base', 'sm', 'md'], drawerId: 'filters-drawer', drawerTitle: 'Filters', side: 'right', width: { base: 'calc(100vw - 2rem)', sm: '26rem' }, submitOnChange: false },
  componentFallbacks: { selectSearch: 'select', autocomplete: 'text' },
  debounce: 150,
  asyncTarget: "",
  responseType: 'responseType',
  id: 'example-filters',
  action: "",
  fields: [
      { type: 'search', name: 'q', label: 'Search', placeholder: 'Keyword' },
      { type: 'select-search', name: 'status', label: 'Status', options: [{ value: 'active', label: 'Active' }] },
      { type: 'autocomplete', name: 'owner', label: 'Owner', fetchUrl: '/api/users' },
      { type: 'datepicker', name: 'period', label: 'Period', mode: 'range' },
      { type: 'switch', name: 'active', label: 'Active only' },
      { type: 'custom', name: 'custom', html: '<strong>Custom field</strong>' },
    ],
  activeFilters: [{ label: 'Status', value: 'Active', href: '/users', name: 'status', class: 'font-medium' }],
  fieldsClass: '',
  actionsClass: '',
  activeFiltersClass: '',
  labels: {},
  resetHref: "action to GET",
  class: 'w-full',
}) %>

<%- include('../ui/datepicker', {
  mode: 'range',
  type: 'datetime',
  rangeDisplay: "full",
  compactSeparator: ",",
  panelMonths: 2,
  locale: "fr-FR",
  firstDayOfWeek: 1,
  timePrecision: 'minute',
  id: 'example-datepicker',
  name: 'datepicker',
  startName: "${name}_start",
  endName: "${name}_end",
  label: 'Label',
  value: '',
  startValue: '',
  endValue: '',
  placeholder: 'Select…',
  startPlaceholder: "Start",
  endPlaceholder: "End",
  rangeSeparator: "-",
  min: 'min',
  max: 'max',
  clearable: true,
  required: true,
  disabled: false,
  readonly: false,
  helpText: 'Help text',
  errorText: '',
  triggerClass: '',
  panelClass: '',
  attrs: { 'data-context': 'booking' },
  labels: { clear: 'Clear', today: 'Today', previousMonth: 'Previous month', nextMonth: 'Next month' },
  class: 'w-full',
}) %>

<%- include('../ui/planning', {
  id: 'example-planning',
  items: [{ id: 'event-1', title: 'Service call', subtitle: 'Customer', start: '2026-07-21T09:00', end: '2026-07-21T10:30', resourceId: 'tech-1', color: '#2563eb', status: 'planned', movable: true, class: 'priority', href: '/events/1', dataAttrs: { customerId: '42' } }],
  resources: [{ id: 'tech-1', label: 'Alice Martin', avatar: 'AM', color: '#2563eb' }],
  view: "week",
  currentDate: "today",
  minDate: 'minDate',
  maxDate: 'maxDate',
  firstDayOfWeek: 1,
  showWeekNumber: true,
  dayStartHour: 7,
  dayEndHour: 20,
  slotMinutes: 60,
  locale: "fr-FR",
  timezone: "timezone browser",
  compact: { base: true, lg: false },
  compactViews: [],
  dayCompactMode: "resource-focus",
  legend: true,
  enableFullscreen: true,
  fullscreenCompact: true,
  fullscreenToolbarSticky: true,
  dragDrop: true,
  loading: false,
  errorText: '',
  labels: { today: 'Today', empty: 'Available', moving: 'Updating...', retry: 'Retry' },
  cta: { label: 'New service call', href: '/events/new', iconLeft: 'plus', variant: 'regular', color: 'primary' },
  resourceFilters: "",
  class: 'w-full',
  resourceSticky: { base: false, md: true },
  hourSticky: { base: true },
  surfaceMaxHeight: { base: '24rem', md: '40rem' },
}) %>

<%- include('../ui/input', {
  label: 'Label',
  type: "text",
  class: 'w-full',
  inputClass: '',
  attrs: { 'data-example': 'complete' },
  id: 'example-input',
  name: 'input',
  placeholder: 'Select…',
  value: '',
  helpText: 'Help text',
  errorText: '',
  required: true,
  disabled: false,
}) %>

<%- include('../ui/textarea', {
  id: 'example-textarea',
  name: 'textarea',
  label: 'Label',
  placeholder: 'Select…',
  value: '',
  rows: [],
  helpText: 'Help text',
  errorText: '',
  required: true,
  disabled: false,
  inputClass: '',
  class: 'w-full',
}) %>

<%- include('../ui/select', {
  id: 'example-select',
  name: 'select',
  label: 'Label',
  options: [
      { value: '', label: 'Select…' },
      { label: 'Group', options: [{ value: 'one', label: 'Option 1' }, { value: 'two', label: 'Option 2', disabled: true }] },
    ],
  value: '',
  helpText: 'Help text',
  errorText: '',
  required: true,
  disabled: false,
  inputClass: '',
  attrs: { 'data-action': 'change-status' },
  class: 'w-full',
}) %>

<%- include('../ui/checkbox', {
  id: 'example-checkbox',
  name: 'checkbox',
  label: 'Label',
  checked: true,
  disabled: false,
  helpText: 'Help text',
  value: '',
  class: 'w-full',
}) %>

<%- include('../ui/switch', {
  value: '',
  labelPosition: "right",
  attrs: { 'data-example': 'complete' },
  class: 'w-full',
  id: 'example-switch',
  name: 'switch',
  label: 'Label',
  description: 'description',
  errorText: '',
  checked: true,
  disabled: false,
  required: true,
  inputClass: '',
  trackClass: '',
  thumbClass: '',
  labelClass: '',
  descriptionClass: '',
}) %>

<%- include('../ui/radio', {
  name: 'radio',
  label: 'Label',
  options: [
      { value: 'email', label: 'E-mail', checked: true },
      { value: 'sms', label: 'SMS', disabled: true },
    ],
  class: 'w-full',
}) %>

<%- include('../ui/select-search', {
  id: 'example-select-search',
  name: 'select-search',
  label: 'Label',
  options: [
      { value: 'active', label: 'Active' },
      { value: 'paused', label: 'Paused', disabled: true },
    ],
  value: '',
  placeholder: 'Select…',
  searchPlaceholder: "Search…",
  emptyText: "No results",
  portal: true,
  portalBreakpoints: ['base', 'sm'],
  portalMedia: '(max-width: 639px)',
  class: 'w-full',
  helpText: 'Help text',
  errorText: '',
  required: true,
  disabled: false,
}) %>

<%- include('../ui/autocomplete', {
  id: 'example-autocomplete',
  name: 'autocomplete',
  label: 'Label',
  value: '',
  selectedId: '',
  fetchUrl: 'fetchUrl',
  fetchByIdUrl: 'fetchByIdUrl',
  keyName: "label",
  idKey: "id",
  minChars: 1,
  debounce: 300,
  emptyText: "No results",
  portal: true,
  portalBreakpoints: [],
  portalMedia: 'portalMedia',
  class: 'w-full',
  placeholder: 'Select…',
  helpText: 'Help text',
  errorText: '',
  required: true,
  disabled: false,
}) %>

<%- include('../ui/upload', {
  id: 'example-upload',
  name: 'upload',
  label: 'Label',
  accept: 'image/*,.pdf',
  multiple: true,
  maxSize: 5242880,
  placeholder: 'Select…',
  subtext: "based on accept",
  hint: 'hint',
  preview: true,
  existingFiles: [
      { name: 'document.pdf', size: 184200, url: '/uploads/document.pdf', type: 'application/pdf' },
    ],
  class: 'w-full',
  helpText: 'Help text',
  errorText: '',
  required: true,
  disabled: false,
}) %>

<%- include('../ui/signature', {
  value: '',
  height: 180,
  strokeColor: '#111827',
  strokeWidth: 2.5,
  backgroundColor: '#ffffff',
  outputType: 'image/png',
  id: 'example-signature',
  name: 'signature',
  label: 'Label',
  placeholder: 'Select…',
  clearLabel: "Clear",
  emptyMessage: "Signature required.",
  helpText: 'Help text',
  errorText: '',
  required: true,
  disabled: false,
  readonly: false,
  class: 'w-full',
}) %>

<%- include('../ui/timeline', {
  items: [
      { date: 'July 21', title: 'Created', body: '<p>Record created.</p>', nodeIcon: 'check', nodeStep: 1, status: 'success', active: true },
    ],
  body: include('../ui/timeline-item', { title: 'Free markup', body: '<strong>HTML</strong>' }),
  layout: "vertical",
  step: 'step',
  class: 'w-full',
}) %>

<%# Associated subcomponents %>
<%- include('../ui/timeline-item', {
  date: 'date',
  title: 'Component title',
  body: include('../ui/timeline-item', { title: 'Free markup', body: '<strong>HTML</strong>' }),
  nodeIcon: 'check',
  nodeStep: 1,
  status: 'success',
  active: true,
  class: 'w-full',
}) %>

<%- include('../ui/progress', {
  value: 65,
  size: "md",
  color: "primary",
  label: 'Label',
  showValue: true,
  textPosition: 'top-left',
  striped: true,
  animated: true,
  indeterminate: true,
  class: 'w-full',
  attrs: { 'data-task-id': '42' },
}) %>

<%- include('../ui/carousel', {
  id: 'example-carousel',
  slides: [
      { src: '/images/slide-1.jpg', fullSrc: '/images/slide-1-xl.jpg', thumbSrc: '/images/slide-1-thumb.jpg', width: 1600, height: 1200, alt: 'First image', caption: 'Caption' },
    ],
  label: 'Product gallery',
  aspectRatio: '4 / 3',
  height: 'height',
  maxWidth: '48rem',
  emblaOptions: { align: 'center', containScroll: 'trimSnaps', dragFree: true, duration: 30 },
  initialIndex: 0,
  loop: false,
  loopTransition: 'slide',
  arrows: true,
  dots: true,
  swipe: true,
  trackpad: true,
  thumbnails: { enabled: true, position: 'bottom', scrollable: true, visible: 5 },
  lightbox: true,
  imageClass: 'object-cover',
  class: 'w-full',
  attrs: { 'data-context': 'product' },
  value: '',
}) %>

<%- include('../ui/lightbox', {
  id: 'example-lightbox',
  items: [
      { src: '/images/photo-1-xl.jpg', thumbSrc: '/images/photo-1-thumb.jpg', width: 1600, height: 1200, alt: 'Photo 1', caption: 'Caption' },
    ],
  label: 'Team gallery',
  class: 'max-w-2xl',
  itemClass: 'rounded-xl',
  imageClass: 'aspect-video',
  attrs: { 'data-context': 'team' },
  value: '',
}) %>

<%- include('../ui/chart', {
  id: 'example-chart',
  type: "line",
  data: { labels: ['Jan', 'Feb'], datasets: [{ label: 'Sales', data: [12, 19], gaugeMax: 100 }] },
  options: { responsive: true, plugins: { legend: { display: true } } },
  preset: 'preset',
  height: 240,
  emptyText: "No data",
  ariaLabel: "Chart",
  lazy: true,
  class: 'w-full',
}) %>

<%- include('../ui/editor', {
  id: 'example-editor',
  name: 'editor',
  label: 'Label',
  value: '',
  toolbar: 'full',
  height: 220,
  resizable: true,
  lazy: true,
  labels: { tooltipVisit: 'URL:', tooltipEnterLink: 'Link:', tooltipEdit: 'Edit', tooltipSave: 'Apply', tooltipRemove: 'Remove' },
  class: 'w-full',
  placeholder: 'Select…',
  helpText: 'Help text',
  errorText: '',
  required: true,
  disabled: false,
}) %>