FLIN App

All Variants

Four semantic types with left accent borders, icons, titles, and messages.

Custom Icons

Any Lucide icon name works with the icon prop.

Custom Content

Use children for richer body content.

You last logged in 3 days ago. Check out what is new.

Unusual login detected from a new device.

Usage

<Notification type="info" title="System Update" message="New version available." icon="bell" /><Notification type="success" title="Payment" message="Payment processed." icon="check-circle" /><Notification type="info" title="Welcome" icon="sparkles"> You last logged in 3 days ago.</Notification>

Props

Prop	Type	Default	Description
`type`	text	"info"	Variant: info, success, warning, error
`title`	text	""	Notification heading
`message`	text	""	Description text
`icon`	text	"bell"	Lucide icon name
`children`	content	-	Custom body content

Notification

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

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

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

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

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

All Variants

Custom Icons

Custom Content

Usage

Props