FlinUI
589 production-ready components. No npm install. Just use them like HTML tags.
352
Core Components
237
PRO Components
0
Dependencies
✨ No Import Needed
FlinUI components work like HTML tags. Just use <Button>, <Card>, <Modal> — FLIN finds them automatically.
Usage
Components are auto-imported when used. No configuration required.
// No imports needed!
count = 0
<Button click={count++}>
Clicked {count} times
</Button>
<Card>
<CardHeader>My Card</CardHeader>
<CardBody>Content here</CardBody>
</Card>Core Categories (352 components)
Basic
33 components
Button, Input, Switch, Avatar...
Layout
24 components
Container, Stack, Grid, Flex...
Data Display
33 components
Card, Table, List, DataTable...
Forms
39 components
DatePicker, FileUpload, OTPInput...
Feedback
17 components
Modal, Toast, Alert, Drawer...
Navigation
19 components
Navbar, Sidebar, Tabs, Breadcrumb...
Charts
13 components
BarChart, LineChart, PieChart...
Templates
22 components
DashboardLayout, LoginForm...
E-commerce
46 components
ProductCard, Cart, Checkout...
PRO Categories (237 components)
PRO/AI
26 components
AIChatbot, ChatInput, AICodeBlock...
PRO/Auth
20 components
LoginCard, SocialLogin, OTPInput...
PRO/Data
35 components
DataGrid, VirtualList, TreeView...
PRO/Shells
20 components
AppShell, DashboardLayout...
PRO/Pages
30 components
Full page templates and layouts
PRO/Navigation
25 components
MegaMenu, SidebarCollapsible...
FLIN-Native Components
Unique components that leverage FLIN's memory-native features:
TimeTravel
Navigate through variable history. Unique to FLIN's memory-native architecture.
MemoryInspector
Visual FlinDB debugger with zero-config persistence inspection.
Theme & Tokens
FlinUI includes 185+ design tokens for consistent styling:
// Colors, typography, spacing
--flin-primary: #8b5cf6
--flin-text-primary: #ffffff
--flin-space-4: 1rem
--flin-radius-md: 0.5rem
// Dark mode support
data-theme="dark" or "light"i18n Built-In
Internationalization is included with simple syntax:
translations = [
"en": ["welcome": "Welcome!"],
"fr": ["welcome": "Bienvenue !"]
]
<h1>{t("welcome")}</h1>
<button click={set_language("fr")}>Francais</button>vs Other Frameworks
| Aspect | React + shadcn | Vue + Vuetify | FlinUI |
|---|---|---|---|
| Import needed | import { Button } |
import Button |
None |
| Install | npm install |
npm install |
Built-in |
| Config files | tailwind.config.js, etc. | vuetify.config.js | None |
| Bundle size | Varies (tree-shake) | Large | Zero (native) |
📖 Full Documentation
For complete component API, props, and examples, visit flinui.flin.dev