FLIN App

Basic Board

Three-column workflow board with cards in each stage.

To Do

Design homepage

Write docs

In Progress

Build API

Done

Setup CI/CD

Create repo

With Icons and Badges

Kanban board with priority badges and status icons for issue tracking.

Backlog

P1 Fix auth flow

P2 Update icons

P3 Add dark mode

Working

P1 Refactor DB layer

Complete

Done Setup project

Done Design schema

Two-Column Board

Simplified two-column layout for active/archived workflow.

Active

User dashboard

Settings page

Notification system

Archived

Landing page v1

Legacy API

Usage

<Kanban> <div> <h4>To Do</h4> <Card><p>Design homepage</p></Card> <Card><p>Write docs</p></Card> </div> <div> <h4>In Progress</h4> <Card><p>Build API</p></Card> </div> <div> <h4>Done</h4> <Card><p>Setup CI/CD</p></Card> </div></Kanban>

Props

Prop	Type	Default	Description
`children`	content	-	Column divs, each containing a heading and Card items

Kanban

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Basic Board

To Do

In Progress

Done

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } With Icons and Badges

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Backlog

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Working

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Complete

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Two-Column Board