FLIN App

With Messages

Inbox layout populated with a list of recent conversations.

Messages

Alice Chen

Hey, can you review the PR?

Bob Miller

Meeting notes from today...

Team FLIN

Welcome to the team!

Select a conversation

Extended Inbox

Inbox with more conversations showing varied message previews.

Messages

Sarah Johnson

The design mockups are ready for review

Dev Team

Sprint retrospective summary attached

Support Bot

Ticket #4521 has been resolved

Juste A.

Great work on the release!

Select a conversation

Empty State

Inbox with no messages showing the default empty state.

Messages

Select a conversation

Usage

<InboxLayout> <div> <strong>Alice Chen</strong> <p>Hey, can you review the PR?</p> </div> <div> <strong>Bob Miller</strong> <p>Meeting notes from today...</p> </div></InboxLayout>

Props

Prop	Type	Default	Description
`children`	content	-	Message items shown in the sidebar list

InboxLayout

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

Messages

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

Messages

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

Messages

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

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

With Messages

Extended Inbox

Empty State

Usage

Props