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.