Kanbien Design System

Reusable Component Artifacts

These are the shared interface pieces people use to move around the app and find what they need.

Component

TopNavShell

The main header people use to move between the app's top-level areas, open navigation on mobile, and reach account actions.

Component

SubNavRow

The secondary row people use to understand where they are and quickly search within the current area.

Component

FloatingTabHeader

The sticky in-context status or board switcher with counter cards, overflow paging, optional subtabs, attention states, and a single-select category drawer.

Component

ListRecordCard

The selectable summary-card seam extracted from `List Page`, with dedicated canonicals for full-width, half-page, and mobile review.

Component

ListDetailPanel

The open detail-surface seam extracted from `List Page`, with dedicated canonicals for boundary, long-content, local-error, and narrow-panel review.

Component

ListDetailSplitLayout

The master-detail lane seam extracted from `List Page`, with dedicated canonicals for desktop open/closed rhythm, mobile overlay posture, RTL mirroring, and split-lane pressure review.

Component

DrawerForm

The shared create/edit form body for drawer-hosted entity entry workflows, composed from approved form-control seams.

Component

IconGrid

The searchable icon-picker seam extracted from `Form Template`, with dedicated canonicals for full-catalog review, filtering, selection sync, RTL, and compact stress states.

Component

AsyncActivityDrawer

The persistent shell activity seam for running, waiting, retryable-error, and completed background job states.

Component

UploadFile

The file-attachment seam extracted from `Form Template`, with governed drop, browse, preview, upload status, progress, and local error-state behavior for feature forms.

Component

FormImageCard

The square image relationship card extracted from `Form Template`, with picture-only, name-only, and full identity variants for feature forms.