FLIN App

Basic Tabs

Simple text tabs for switching between content views.

Overview

Features

Pricing

FAQ

Settings Tabs

Tabs with leading icons for settings and configuration pages.

Profile

Security

Notifications

Billing

Content Management

Filter content by status with tab navigation.

All Posts

Published

Drafts

Archived

Dashboard Sections

Analytics dashboard with icon tabs for different data views.

Analytics

Revenue

Customers

Products

Developer Tools

Code editor style tabs for switching between views.

Code

Preview

Console

Debug

Product Details

Product page tabs for description, reviews, and specifications.

Description

Reviews

Specifications

Shipping

Usage

<Tabs> <Tab active="true">Overview</Tab> <Tab>Features</Tab> <Tab>Pricing</Tab> <Tab>FAQ</Tab></Tabs><Tabs> <Tab active="true"><Icon name="user" size="14" /> Profile</Tab> <Tab><Icon name="lock" size="14" /> Security</Tab> <Tab><Icon name="bell" size="14" /> Notifications</Tab></Tabs>

Props

Prop	Type	Description
`children`	content	Tab components to display in the tab bar

Tabs

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

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

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

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

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

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

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

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