WebberUI

Project Kanban App

Kanban project management UI: multi-column task cards, filter bar, member avatars, progress stats.

ProApp UIapp7 sections
See it liveSee the plans

Install

npx shadcn@latest add "https://webberui.com/r/project-kanban-app.json?t=<install token>"

The whole page lands in app/templates/project-kanban-app/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Top Bar and Project Header

    Sticky top bar with a project switcher and search, over a project header carrying an overall completion ring.

    hero
  2. 2

    Kanban Columns

    Four-column board — to do, in progress, in review and done — with filterable task cards.

    gallery
  3. 3

    Sprint Progress Stats

    Milestone progress bar, stat cards, a bar chart of this week's throughput and per-member workload.

    stats
  4. 4

    Recent Activity

    Live timeline listing team actions and comments.

    timeline
  5. 5

    Project Members

    Member cards showing role, task count and workload.

    team
  6. 6

    Call-to-Action Banner

    Gradient CTA band inviting teams to start using the board for free.

    cta
  7. 7

    Footer

    Footer with a brand intro, product and resource link columns, and a copyright line.

    footer

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →