> ## Documentation Index
> Fetch the complete documentation index at: https://docs.janet.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# List

> List view with tickets grouped by status

<div className="img-showcase">
  <div className="list-mock">
    <div className="kb-mock-header">
      <div className="kb-mock-header-left">
        <span className="kb-mock-header-back">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M19 12H5" />

            <path d="M12 19l-7-7 7-7" />
          </svg>
        </span>

        <span className="kb-mock-header-name">Mobile App</span>
        <span className="kb-mock-header-id">MOB</span>
      </div>

      <div className="kb-mock-header-right">
        <div className="kb-mock-view-toggle">
          <span className="kb-mock-view-btn">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <rect x="3" y="3" width="7" height="9" />

              <rect x="14" y="3" width="7" height="5" />

              <rect x="14" y="12" width="7" height="9" />

              <rect x="3" y="16" width="7" height="5" />
            </svg>

            <span>Kanban</span>
          </span>

          <span className="kb-mock-view-btn kb-mock-view-btn-active">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M3 6h18" />

              <path d="M3 12h18" />

              <path d="M3 18h18" />
            </svg>

            <span>List</span>
          </span>

          <span className="kb-mock-view-btn">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M2 12h2M6 8v8M10 4v16M14 6v12M18 9v6M22 12h-2" />
            </svg>

            <span>Signals</span>
            <span className="kb-mock-new-badge">New</span>
          </span>
        </div>

        <span className="kb-mock-create-btn">
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 5v14M5 12h14" />
          </svg>

          <span>Create</span>
        </span>

        <span className="kb-mock-icon-btn">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" />

            <path d="m21 21-4.35-4.35" />
          </svg>
        </span>

        <span className="kb-mock-icon-btn">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M22 3L2 3 10 12.46 10 19 14 21 14 12.46z" />
          </svg>
        </span>
      </div>
    </div>

    <div className="list-mock-inner">
      <div className="list-mock-group">
        <svg className="list-mock-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M4.5 6L8 9.5L11.5 6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>

        <span className="list-mock-status-icon">
          <svg className="list-mock-icon-todo" width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path data-ring="" d="M7 1.5A5.5 5.5 0 1 1 1.5 7 5.5 5.5 0 0 1 7 1.5Z" />
          </svg>
        </span>

        <span className="list-mock-group-name">To Do</span>
        <span className="list-mock-group-count">2</span>
      </div>

      <div className="list-mock-rows">
        <div className="list-mock-row">
          <span className="list-mock-priority">
            <svg className="list-mock-pri-low" width="18" height="18" viewBox="0 0 16 16" fill="none">
              <rect className="pri-dim" x="3" y="3.5" width="10" height="1.8" rx="0.9" />

              <rect className="pri-dim" x="3" y="7.1" width="10" height="1.8" rx="0.9" />

              <rect className="pri-active" x="3" y="10.7" width="10" height="1.8" rx="0.9" />
            </svg>
          </span>

          <span className="list-mock-id">SW-131</span>
          <span className="list-mock-title">Write API documentation for webhook endpoints</span>

          <span className="list-mock-right">
            <span className="list-mock-empty">—</span>
            <span className="list-mock-date">Apr 12</span>
          </span>
        </div>

        <div className="list-mock-row">
          <span className="list-mock-priority">
            <span className="list-mock-pri-none">—</span>
          </span>

          <span className="list-mock-id">SW-128</span>
          <span className="list-mock-title">Research SSO providers for enterprise plan</span>

          <span className="list-mock-right">
            <img className="kb-mock-avatar-img" src="https://mintcdn.com/janetai-2e23a3d0/AicC1Vk0hC-6wzlT/headshot.jpeg?fit=max&auto=format&n=AicC1Vk0hC-6wzlT&q=85&s=988a826f2341ee7c6932a28952f470b4" alt="" width="400" height="400" data-path="headshot.jpeg" />

            <span className="list-mock-date list-mock-date-empty">—</span>
          </span>
        </div>
      </div>

      <div className="list-mock-group list-mock-group-gap">
        <svg className="list-mock-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M4.5 6L8 9.5L11.5 6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>

        <span className="list-mock-status-icon">
          <svg className="list-mock-icon-inprogress" width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path data-ring="" d="M7 1.5A5.5 5.5 0 1 1 1.5 7 5.5 5.5 0 0 1 7 1.5Z" />

            <path data-fill="" d="M7 1.5A5.5 5.5 0 0 1 12.5 7 5.5 5.5 0 0 1 7 12.5V1.5Z" />
          </svg>
        </span>

        <span className="list-mock-group-name">In Progress</span>
        <span className="list-mock-group-count">3</span>
      </div>

      <div className="list-mock-rows">
        <div className="list-mock-row">
          <span className="list-mock-priority">
            <svg className="list-mock-pri-critical" width="18" height="18" viewBox="0 0 16 16" fill="none">
              <rect x="3" y="2" width="10" height="1.8" rx="0.9" />

              <rect x="3" y="5.3" width="10" height="1.8" rx="0.9" />

              <rect x="3" y="8.6" width="10" height="1.8" rx="0.9" />

              <rect x="3" y="11.9" width="10" height="1.8" rx="0.9" />
            </svg>
          </span>

          <span className="list-mock-id">SW-142</span>
          <span className="list-mock-title">Fix authentication token refresh on mobile</span>

          <span className="list-mock-right">
            <img className="kb-mock-avatar-img" src="https://mintcdn.com/janetai-2e23a3d0/AicC1Vk0hC-6wzlT/headshot.jpeg?fit=max&auto=format&n=AicC1Vk0hC-6wzlT&q=85&s=988a826f2341ee7c6932a28952f470b4" alt="" width="400" height="400" data-path="headshot.jpeg" />

            <span className="list-mock-date">Apr 3</span>
          </span>
        </div>

        <div className="list-mock-row">
          <span className="list-mock-priority">
            <svg className="list-mock-pri-high" width="18" height="18" viewBox="0 0 16 16" fill="none">
              <rect x="3" y="3.5" width="10" height="1.8" rx="0.9" />

              <rect x="3" y="7.1" width="10" height="1.8" rx="0.9" />

              <rect x="3" y="10.7" width="10" height="1.8" rx="0.9" />
            </svg>
          </span>

          <span className="list-mock-id">SW-139</span>
          <span className="list-mock-title">Migrate billing service to Stripe v3 API</span>

          <span className="list-mock-right">
            <span style={{display: 'flex'}}>
              <img className="kb-mock-avatar-img" src="https://mintcdn.com/janetai-2e23a3d0/AicC1Vk0hC-6wzlT/adhit.jpg?fit=max&auto=format&n=AicC1Vk0hC-6wzlT&q=85&s=b73da57eff7a0da56c77a646fe8f33cb" alt="" width="400" height="400" data-path="adhit.jpg" />

              <img className="kb-mock-avatar-img" src="https://mintcdn.com/janetai-2e23a3d0/AicC1Vk0hC-6wzlT/headshot.jpeg?fit=max&auto=format&n=AicC1Vk0hC-6wzlT&q=85&s=988a826f2341ee7c6932a28952f470b4" alt="" width="400" height="400" data-path="headshot.jpeg" />
            </span>

            <span className="list-mock-date">Apr 7</span>
          </span>
        </div>

        <div className="list-mock-row">
          <span className="list-mock-priority">
            <svg className="list-mock-pri-medium" width="18" height="18" viewBox="0 0 16 16" fill="none">
              <rect className="pri-dim" x="3" y="3.5" width="10" height="1.8" rx="0.9" />

              <rect className="pri-active" x="3" y="7.1" width="10" height="1.8" rx="0.9" />

              <rect className="pri-active" x="3" y="10.7" width="10" height="1.8" rx="0.9" />
            </svg>
          </span>

          <span className="list-mock-id">SW-136</span>
          <span className="list-mock-title">Add real-time presence indicators to editor</span>

          <span className="list-mock-right">
            <img className="kb-mock-avatar-img" src="https://mintcdn.com/janetai-2e23a3d0/AicC1Vk0hC-6wzlT/adhit.jpg?fit=max&auto=format&n=AicC1Vk0hC-6wzlT&q=85&s=b73da57eff7a0da56c77a646fe8f33cb" alt="" width="400" height="400" data-path="adhit.jpg" />

            <span className="list-mock-date list-mock-date-empty">—</span>
          </span>
        </div>
      </div>

      <div className="list-mock-group list-mock-group-gap">
        <svg className="list-mock-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M4.5 6L8 9.5L11.5 6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>

        <span className="list-mock-status-icon">
          <svg className="list-mock-icon-done" width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path data-bg="" d="M7 1A6 6 0 1 1 1 7 6 6 0 0 1 7 1Z" />

            <path data-check="" d="M4.5 7L6.2 8.7L9.5 5.3" />
          </svg>
        </span>

        <span className="list-mock-group-name">Done</span>
        <span className="list-mock-group-count">1</span>
      </div>

      <div className="list-mock-rows">
        <div className="list-mock-row">
          <span className="list-mock-priority">
            <svg className="list-mock-pri-high" width="18" height="18" viewBox="0 0 16 16" fill="none">
              <rect x="3" y="3.5" width="10" height="1.8" rx="0.9" />

              <rect x="3" y="7.1" width="10" height="1.8" rx="0.9" />

              <rect x="3" y="10.7" width="10" height="1.8" rx="0.9" />
            </svg>
          </span>

          <span className="list-mock-id">SW-124</span>
          <span className="list-mock-title list-mock-title-resolved">Set up CI pipeline for staging deployments</span>

          <span className="list-mock-right">
            <img className="kb-mock-avatar-img" src="https://mintcdn.com/janetai-2e23a3d0/AicC1Vk0hC-6wzlT/adhit.jpg?fit=max&auto=format&n=AicC1Vk0hC-6wzlT&q=85&s=b73da57eff7a0da56c77a646fe8f33cb" alt="" width="400" height="400" data-path="adhit.jpg" />

            <span className="list-mock-date">Mar 28</span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

View all tickets in a flat, scannable list. Drag to reorder tickets and see titles, assignees, priorities, and due dates at a glance. Filter and sort tickets by assignee, status, priority, issue type, tags, due date, and more.