Uilora Kanban
Project-management Kanban skeleton with multi-column layout, varied card heights, tag pills, avatar stacks, and a dashed add-card button.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color palette. "dark" uses deep navy column backgrounds; "light" uses off-white panels. |
| accentColor | string | "#f59e0b" | Brand accent tinting the shimmer gradient at low opacity and the board title accent. |
| columns | number | 4 | Number of Kanban columns to render (clamped 2–5). |
| cardsPerColumn | number | 3 | Number of skeleton cards per column (clamped 2–5). Cards cycle through 4 visual variants for natural height variation. |
When to Use
Use as the loading state for Linear-style boards, Jira sprint views, CRM pipeline screens, and any drag-and-drop task manager. The varied card heights make it indistinguishable from a real board loading.
Best Practices
Match columns to your actual board column count. Leave cardsPerColumn at 3 for the best visual balance — too many cards per column creates an artificially uniform skeleton that looks templated.
Why This Component Matters
Kanban boards have complex, varied card heights. A skeleton that mirrors this variance (full cards, minimal cards, tagged cards) tells users that real varied content is coming — not a uniform placeholder grid.
FAQ
QHow do the card variants work?
Cards cycle through 4 patterns via (colIdx + cardIdx) % 4: full (tags + content + footer), minimal (title + footer), compact (title + content), tagged (3 tags + footer). This produces organic height variation across every column.
QCan I add a board header above the columns?
Yes — the board header with title and action buttons is already rendered above the column grid. Fork the component and update the BOARD_TITLE constant.
QDoes it support horizontal scrolling?
Yes — the column container uses overflow-x-auto, so adding more columns than fit the viewport triggers native horizontal scroll.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.