> ## 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.

# Kanban

> Board view with columns for each status

<div className="img-showcase">
  <div className="kb-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 kb-mock-view-btn-active"><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"><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="kb-mock-board">
      <div className="kb-mock-col">
        <div className="kb-mock-col-header"><div className="kb-mock-col-header-left"><span className="kb-mock-col-name">To Do</span><span className="kb-mock-col-count">3</span></div><span className="kb-mock-col-add"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14" /><path d="M5 12h14" /></svg></span></div>

        <div className="kb-mock-col-body">
          <div className="kb-mock-card" style={{display:'flex',flexDirection:'column',gap:'2px'}}><div style={{display:'flex',alignItems:'center',justifyContent:'space-between',margin:0}}><span className="kb-mock-card-id">MOB-34</span><span className="kb-mock-priority"><svg width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="3" y="3.5" width="10" height="1.8" rx="0.9" fill="#e08007" /><rect x="3" y="7.1" width="10" height="1.8" rx="0.9" fill="#e08007" /><rect x="3" y="10.7" width="10" height="1.8" rx="0.9" fill="#e08007" /></svg></span></div><div className="kb-mock-card-title" style={{margin:0}}><span>Design onboarding flow for new users</span></div><div style={{display:'flex',alignItems:'center',margin:0}}><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" /><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" /></div></div>
          <div className="kb-mock-card" style={{display:'flex',flexDirection:'column',gap:'2px'}}><div style={{display:'flex',alignItems:'center',justifyContent:'space-between',margin:0}}><span className="kb-mock-card-id">MOB-38</span><span className="kb-mock-priority"><svg width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="3" y="3.5" width="10" height="1.8" rx="0.9" className="kb-mock-bar-dim" /><rect x="3" y="7.1" width="10" height="1.8" rx="0.9" fill="#65a30d" /><rect x="3" y="10.7" width="10" height="1.8" rx="0.9" fill="#65a30d" /></svg></span></div><div className="kb-mock-card-title" style={{margin:0}}><span>Add push notification settings</span></div><div style={{display:'flex',alignItems:'center',margin:0}}>          <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" /></div></div>
          <div className="kb-mock-card" style={{display:'flex',flexDirection:'column',gap:'2px'}}><div style={{display:'flex',alignItems:'center',justifyContent:'space-between',margin:0}}><span className="kb-mock-card-id">MOB-41</span><span className="kb-mock-priority"><svg width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="3" y="3.5" width="10" height="1.8" rx="0.9" className="kb-mock-bar-dim" /><rect x="3" y="7.1" width="10" height="1.8" rx="0.9" className="kb-mock-bar-dim" /><rect x="3" y="10.7" width="10" height="1.8" rx="0.9" fill="#0ea5e9" /></svg></span></div><div className="kb-mock-card-title" style={{margin:0}}><span>Localize date formats</span></div><div style={{display:'flex',alignItems:'center',margin:0}}>          <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" /></div></div>
        </div>
      </div>

      <div className="kb-mock-col">
        <div className="kb-mock-col-header"><div className="kb-mock-col-header-left"><span className="kb-mock-col-name">In Progress</span><span className="kb-mock-col-count">2</span></div><span className="kb-mock-col-add"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14" /><path d="M5 12h14" /></svg></span></div>

        <div className="kb-mock-col-body">
          <div className="kb-mock-card" style={{display:'flex',flexDirection:'column',gap:'2px'}}><div style={{display:'flex',alignItems:'center',justifyContent:'space-between',margin:0}}><span className="kb-mock-card-id">MOB-29</span><span className="kb-mock-priority"><svg width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="3" y="2" width="10" height="1.8" rx="0.9" fill="#e11d48" /><rect x="3" y="5.3" width="10" height="1.8" rx="0.9" fill="#e11d48" /><rect x="3" y="8.6" width="10" height="1.8" rx="0.9" fill="#e11d48" /><rect x="3" y="11.9" width="10" height="1.8" rx="0.9" fill="#e11d48" /></svg></span></div><div className="kb-mock-card-title" style={{margin:0}}><span>Fix crash on deep-link redirect</span></div><div style={{display:'flex',alignItems:'center',margin:0}}>          <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" /></div></div>
          <div className="kb-mock-card" style={{display:'flex',flexDirection:'column',gap:'2px'}}><div style={{display:'flex',alignItems:'center',justifyContent:'space-between',margin:0}}><span className="kb-mock-card-id">MOB-31</span><span className="kb-mock-priority"><svg width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="3" y="3.5" width="10" height="1.8" rx="0.9" fill="#e08007" /><rect x="3" y="7.1" width="10" height="1.8" rx="0.9" fill="#e08007" /><rect x="3" y="10.7" width="10" height="1.8" rx="0.9" fill="#e08007" /></svg></span></div><div className="kb-mock-card-title" style={{margin:0}}><span>Implement biometric auth gate</span></div><div style={{display:'flex',alignItems:'center',margin:0}}><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" /><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" /></div></div>
        </div>
      </div>

      <div className="kb-mock-col">
        <div className="kb-mock-col-header"><div className="kb-mock-col-header-left"><span className="kb-mock-col-name">In Review</span><span className="kb-mock-col-count">2</span></div><span className="kb-mock-col-add"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14" /><path d="M5 12h14" /></svg></span></div>

        <div className="kb-mock-col-body">
          <div className="kb-mock-card" style={{display:'flex',flexDirection:'column',gap:'2px'}}><div style={{display:'flex',alignItems:'center',justifyContent:'space-between',margin:0}}><span className="kb-mock-card-id">MOB-26</span><span className="kb-mock-priority"><svg width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="3" y="3.5" width="10" height="1.8" rx="0.9" className="kb-mock-bar-dim" /><rect x="3" y="7.1" width="10" height="1.8" rx="0.9" fill="#65a30d" /><rect x="3" y="10.7" width="10" height="1.8" rx="0.9" fill="#65a30d" /></svg></span></div><div className="kb-mock-card-title" style={{margin:0}}><span>Refactor settings screen layout</span></div><div style={{display:'flex',alignItems:'center',margin:0}}>          <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" /></div></div>
          <div className="kb-mock-card" style={{display:'flex',flexDirection:'column',gap:'2px'}}><div style={{display:'flex',alignItems:'center',justifyContent:'space-between',margin:0}}><span className="kb-mock-card-id">MOB-33</span><span className="kb-mock-priority"><svg width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="3" y="3.5" width="10" height="1.8" rx="0.9" className="kb-mock-bar-dim" /><rect x="3" y="7.1" width="10" height="1.8" rx="0.9" className="kb-mock-bar-dim" /><rect x="3" y="10.7" width="10" height="1.8" rx="0.9" fill="#0ea5e9" /></svg></span></div><div className="kb-mock-card-title" style={{margin:0}}><span>Update empty state illustrations</span></div><div style={{display:'flex',alignItems:'center',margin:0}}><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" /></div></div>
        </div>
      </div>

      <div className="kb-mock-col">
        <div className="kb-mock-col-header"><div className="kb-mock-col-header-left"><span className="kb-mock-col-name">Done</span><span className="kb-mock-col-count">2</span></div><span className="kb-mock-col-add"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14" /><path d="M5 12h14" /></svg></span></div>

        <div className="kb-mock-col-body">
          <div className="kb-mock-card" style={{display:'flex',flexDirection:'column',gap:'2px'}}><div style={{display:'flex',alignItems:'center',justifyContent:'space-between',margin:0}}><span className="kb-mock-card-id">MOB-22</span><span className="kb-mock-priority"><svg width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="3" y="3.5" width="10" height="1.8" rx="0.9" fill="#e08007" /><rect x="3" y="7.1" width="10" height="1.8" rx="0.9" fill="#e08007" /><rect x="3" y="10.7" width="10" height="1.8" rx="0.9" fill="#e08007" /></svg></span></div><div className="kb-mock-card-title" style={{margin:0}}><span>Set up CI pipeline for staging</span></div><div style={{display:'flex',alignItems:'center',margin:0}}>          <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" /></div></div>
          <div className="kb-mock-card" style={{display:'flex',flexDirection:'column',gap:'2px'}}><div style={{display:'flex',alignItems:'center',justifyContent:'space-between',margin:0}}><span className="kb-mock-card-id">MOB-24</span><span className="kb-mock-priority"><svg width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="3" y="2" width="10" height="1.8" rx="0.9" fill="#e11d48" /><rect x="3" y="5.3" width="10" height="1.8" rx="0.9" fill="#e11d48" /><rect x="3" y="8.6" width="10" height="1.8" rx="0.9" fill="#e11d48" /><rect x="3" y="11.9" width="10" height="1.8" rx="0.9" fill="#e11d48" /></svg></span></div><div className="kb-mock-card-title" style={{margin:0}}><span>Patch token refresh race condition</span></div><div style={{display:'flex',alignItems:'center',margin:0}}>          <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" /></div></div>
        </div>
      </div>
    </div>
  </div>
</div>

Visualize your project as a board with columns for each status. Reorder tickets, drag and drop between columns to update their status, reorder and see titles, assignees, priorities at a glance. Filter and sort tickets by assignee, status, priority, issue type, tags, due date, and more.