or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

data-display-components.md feedback-components.md form-components.md index.md javascript-utilities.md layout-components.md plugin-configuration.md theme-system.md utility-classes.md

tile.json

Feedback Components

User feedback components including alerts, modals, tooltips, loading states, and toast notifications for providing user feedback and interaction.

Capabilities

Alert Component

Alert messages for displaying information, warnings, and notifications.

<!-- Basic alerts -->
<div class="alert">
  <span>Default alert message</span>
</div>

<div class="alert alert-info">
  <svg class="w-6 h-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
  <span>Info: Here's some information for you.</span>
</div>

<div class="alert alert-success">
  <svg class="w-6 h-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
  <span>Success: Your purchase has been confirmed!</span>
</div>

<div class="alert alert-warning">
  <svg class="w-6 h-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.864-.833-2.632 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z"></path></svg>
  <span>Warning: Invalid email address!</span>
</div>

<div class="alert alert-error">
  <svg class="w-6 h-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
  <span>Error: Something went wrong!</span>
</div>

<!-- Alert with actions -->
<div class="alert">
  <svg class="w-6 h-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
  <span>We use cookies for no reason.</span>
  <div>
    <button class="btn btn-sm">Deny</button>
    <button class="btn btn-sm btn-primary">Accept</button>
  </div>
</div>

Modal Component

Modal dialogs for displaying content over the main page.

<!-- Basic modal -->
<dialog id="my_modal_1" class="modal">
  <div class="modal-box">
    <h3 class="font-bold text-lg">Hello!</h3>
    <p class="py-4">Press ESC key or click the button below to close</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

<!-- Modal with backdrop -->
<dialog id="my_modal_2" class="modal">
  <div class="modal-box">
    <h3 class="font-bold text-lg">Hello!</h3>
    <p class="py-4">Press ESC key or click outside to close</p>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</dialog>

<!-- Modal sizes -->
<dialog class="modal">
  <div class="modal-box w-11/12 max-w-5xl">
    <h3 class="font-bold text-lg">Hello!</h3>
    <p class="py-4">This modal is wider</p>
  </div>
</dialog>

<!-- Modal with form -->
<dialog class="modal">
  <div class="modal-box">
    <h3 class="font-bold text-lg">Login</h3>
    <div class="py-4">
      <div class="form-control">
        <label class="label">
          <span class="label-text">Email</span>
        </label>
        <input type="email" placeholder="email" class="input input-bordered" />
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text">Password</span>
        </label>
        <input type="password" placeholder="password" class="input input-bordered" />
      </div>
    </div>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn btn-primary">Login</button>
        <button class="btn">Cancel</button>
      </form>
    </div>
  </div>
</dialog>

Tooltip Component

Tooltips for providing additional information on hover.

<!-- Basic tooltips -->
<div class="tooltip" data-tip="hello">
  <button class="btn">Hover me</button>
</div>

<!-- Tooltip positions -->
<div class="tooltip tooltip-open tooltip-top" data-tip="hello">
  <button class="btn">Top</button>
</div>
<div class="tooltip tooltip-open tooltip-bottom" data-tip="hello">
  <button class="btn">Bottom</button>
</div>
<div class="tooltip tooltip-open tooltip-left" data-tip="hello">
  <button class="btn">Left</button>
</div>
<div class="tooltip tooltip-open tooltip-right" data-tip="hello">
  <button class="btn">Right</button>
</div>

<!-- Tooltip colors -->
<div class="tooltip tooltip-primary" data-tip="primary">
  <button class="btn btn-primary">Primary</button>
</div>
<div class="tooltip tooltip-secondary" data-tip="secondary">
  <button class="btn btn-secondary">Secondary</button>
</div>
<div class="tooltip tooltip-accent" data-tip="accent">
  <button class="btn btn-accent">Accent</button>
</div>
<div class="tooltip tooltip-info" data-tip="info">
  <button class="btn btn-info">Info</button>
</div>
<div class="tooltip tooltip-success" data-tip="success">
  <button class="btn btn-success">Success</button>
</div>
<div class="tooltip tooltip-warning" data-tip="warning">
  <button class="btn btn-warning">Warning</button>
</div>
<div class="tooltip tooltip-error" data-tip="error">
  <button class="btn btn-error">Error</button>
</div>

Toast Component

Toast notifications for temporary messages.

<!-- Basic toast -->
<div class="toast">
  <div class="alert alert-info">
    <span>New message arrived.</span>
  </div>
</div>

<!-- Toast positions -->
<div class="toast toast-top toast-start">
  <div class="alert alert-info">
    <span>New message arrived.</span>
  </div>
</div>

<div class="toast toast-top toast-center">
  <div class="alert alert-info">
    <span>New message arrived.</span>
  </div>
</div>

<div class="toast toast-top toast-end">
  <div class="alert alert-info">
    <span>New message arrived.</span>
  </div>
</div>

<div class="toast toast-middle toast-start">
  <div class="alert alert-info">
    <span>New message arrived.</span>
  </div>
</div>

<div class="toast toast-middle toast-center">
  <div class="alert alert-info">
    <span>New message arrived.</span>
  </div>
</div>

<div class="toast toast-middle toast-end">
  <div class="alert alert-info">
    <span>New message arrived.</span>
  </div>
</div>

<div class="toast toast-bottom toast-start">
  <div class="alert alert-info">
    <span>New message arrived.</span>
  </div>
</div>

<div class="toast toast-bottom toast-center">
  <div class="alert alert-info">
    <span>New message arrived.</span>
  </div>
</div>

<div class="toast toast-bottom toast-end">
  <div class="alert alert-info">
    <span>New message arrived.</span>
  </div>
</div>

<!-- Multiple toasts -->
<div class="toast toast-end">
  <div class="alert alert-info">
    <span>New mail arrived.</span>
  </div>
  <div class="alert alert-success">
    <span>Message sent successfully.</span>
  </div>
</div>

Skeleton Component

Loading placeholder skeletons.

<!-- Basic skeleton -->
<div class="flex flex-col gap-4 w-52">
  <div class="skeleton h-32 w-full"></div>
  <div class="skeleton h-4 w-28"></div>
  <div class="skeleton h-4 w-full"></div>
  <div class="skeleton h-4 w-full"></div>
</div>

<!-- Skeleton with avatar -->
<div class="flex w-52 flex-col gap-4">
  <div class="flex items-center gap-4">
    <div class="skeleton w-16 h-16 rounded-full shrink-0"></div>
    <div class="flex flex-col gap-4">
      <div class="skeleton h-4 w-20"></div>
      <div class="skeleton h-4 w-28"></div>
    </div>
  </div>
  <div class="skeleton h-32 w-full"></div>
</div>

<!-- Card with skeleton -->
<div class="card w-96 bg-base-100 shadow-xl">
  <div class="skeleton h-48 w-full"></div>
  <div class="card-body">
    <div class="skeleton h-6 w-3/4 mb-4"></div>
    <div class="skeleton h-4 w-full mb-2"></div>
    <div class="skeleton h-4 w-2/3 mb-4"></div>
    <div class="card-actions justify-end">
      <div class="skeleton h-10 w-20"></div>
    </div>
  </div>
</div>

Indicator Component

Small indicators for notifications and status.

<!-- Basic indicator -->
<div class="indicator">
  <span class="indicator-item badge badge-secondary">new</span>
  <button class="btn">Inbox</button>
</div>

<!-- Indicator positions -->
<div class="indicator">
  <span class="indicator-item indicator-top indicator-start badge badge-secondary">top+start</span>
  <div class="grid w-32 h-32 bg-base-300 place-items-center">content</div>
</div>

<div class="indicator">
  <span class="indicator-item indicator-top indicator-center badge badge-secondary">top+center</span>
  <div class="grid w-32 h-32 bg-base-300 place-items-center">content</div>
</div>

<div class="indicator">
  <span class="indicator-item indicator-top indicator-end badge badge-secondary">top+end</span>
  <div class="grid w-32 h-32 bg-base-300 place-items-center">content</div>
</div>

<!-- Indicator on avatar -->
<div class="avatar indicator">
  <span class="indicator-item badge badge-primary">99+</span>
  <div class="w-20 h-20 rounded-full">
    <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
  </div>
</div>

<!-- Indicator on button -->
<div class="indicator">
  <span class="indicator-item badge badge-error"></span>
  <button class="btn">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5v-5zM7.07 11.2L4 8.13 8.13 4l3.07 3.07M19.95 21L2.81 3.86l1.42-1.42L18.37 19.58l1.42 1.42z"/>
    </svg>
  </button>
</div>

Usage Examples:

// JavaScript for modal control
function openModal(modalId) {
  document.getElementById(modalId).showModal();
}

function closeModal(modalId) {
  document.getElementById(modalId).close();
}

// JavaScript for toast notifications
function showToast(message, type = 'info') {
  const toast = document.createElement('div');
  toast.className = 'toast toast-end';
  toast.innerHTML = `
    <div class="alert alert-${type}">
      <span>${message}</span>
    </div>
  `;
  document.body.appendChild(toast);
  
  setTimeout(() => {
    toast.remove();
  }, 3000);
}

// Usage
showToast('Message sent successfully!', 'success');
showToast('Error occurred!', 'error');

Types

// Alert component types
type AlertType = "alert-info" | "alert-success" | "alert-warning" | "alert-error";

interface AlertClasses {
  "alert": string;
  "alert-info": string;
  "alert-success": string;
  "alert-warning": string;
  "alert-error": string;
}

// Modal component types
interface ModalClasses {
  "modal": string;
  "modal-box": string;
  "modal-action": string;
  "modal-backdrop": string;
  "modal-open": string;
}

// Tooltip component types
type TooltipPosition = 
  | "tooltip-top" | "tooltip-bottom" | "tooltip-left" | "tooltip-right";
  
type TooltipColor = 
  | "tooltip-primary" | "tooltip-secondary" | "tooltip-accent"
  | "tooltip-info" | "tooltip-success" | "tooltip-warning" | "tooltip-error";

interface TooltipClasses {
  "tooltip": string;
  "tooltip-open": string;
}

// Toast component types
type ToastPosition = 
  | "toast-top" | "toast-middle" | "toast-bottom"
  | "toast-start" | "toast-center" | "toast-end";

interface ToastClasses {
  "toast": string;
}

// Skeleton component types
interface SkeletonClasses {
  "skeleton": string;
}

// Indicator component types
type IndicatorPosition = 
  | "indicator-top" | "indicator-middle" | "indicator-bottom"
  | "indicator-start" | "indicator-center" | "indicator-end";

interface IndicatorClasses {
  "indicator": string;
  "indicator-item": string;
}