FlinUI
180 beautiful, embedded components. Zero imports. Zero config. Just works.
180 Components1,667 IconsDark Mode
Zero Imports
Components are embedded in the binary. Just use them.
Dark Mode
All components support light and dark themes.
Design Tokens
Consistent styling with CSS custom properties.
1,667 Icons
Embedded Lucide icons, ready to use.
The 3-Level Hierarchy
Level 1
HTML Native
lowercase
Level 2
FLIN Built-in
PascalCase, embedded in binary
Level 3
Custom Developer
PascalCase, in your components/ folder
Resolution order: your components/ folder > embedded built-in > error
All 180 Components
Actions
Data Input
Input
Text field with label and binding
Textarea
Multiline text input
Checkbox
Boolean toggle with label
Radio
Radio button group
Select
Dropdown selector
Switch
Toggle switch control
Slider
Range slider input
NumberInput
Numeric input with controls
SearchInput
Search with icon
PasswordInput
Password with show/hide
DatePicker
Date selection calendar
TimePicker
Time selection
FileUpload
File drag and drop
ColorPicker
Color selection
TagsInput
Multi-tag input
Autocomplete
Auto-suggest input
PinInput
PIN/OTP code input
RatingInput
Star rating input
Form
Form container
FormField
Labeled field with error
Data Display
Card
Elevated content container
CardHeader
Card title section
CardBody
Card content area
CardFooter
Card actions area
Badge
6 semantic status variants
Avatar
User initials with color
Table
Data table
DataTable
Sortable data table
List
Vertical list container
ListItem
Single list row
Progress
Progress bar
Skeleton
Loading placeholder
Empty
Empty state display
Stat
Statistic metric
Accordion
Expandable sections
Timeline
Event timeline
Calendar
Month calendar view
Carousel
Image slider
Code
Inline code
CodeBlock
Multi-line code block
Kbd
Keyboard shortcut
Feedback
Alert
Contextual message
Spinner
Loading spinner
Toast
Toast notification
Modal
Dialog overlay
ModalHeader
Modal title section
ModalBody
Modal content area
ModalFooter
Modal actions area
Drawer
Side panel drawer
Popover
Floating popover
Tooltip
Hover tooltip
AlertDialog
Confirmation dialog
Sheet
Bottom sheet
Notification
Persistent notification
HoverCard
Hover preview card
Popconfirm
Confirm before action
Result
Success/error result
Tour
Guided tour
BackTop
Scroll-to-top button
Affix
Sticky positioned element
Navigation
Navbar
Top navigation bar
Sidebar
Side navigation
Tabs
Tab switcher
Tab
Single tab panel
Breadcrumb
Navigation path
Pagination
Page navigation
Menu
Dropdown menu
Stepper
Step-by-step wizard
BottomNav
Mobile bottom nav
Link
Styled anchor link
ContextMenu
Right-click menu
Dropdown
Click dropdown
UserMenu
Avatar user dropdown
Layout
Row
Horizontal flex
Container
Max-width container
Stack
Vertical stack
Grid
CSS grid layout
Flex
Flexbox container
Box
Generic box
Divider
Horizontal divider
Spacer
Vertical spacing
Center
Centering wrapper
AspectRatio
Aspect ratio box
Section
Page section
Hero
Hero banner
Collapse
Collapsible section
Footer
Page footer
ScrollArea
Custom scrollbar
Wrap
Flex wrap container
ResizablePanels
Resizable split panels
Typography
Heading
Section heading
Text
Text paragraph
Blockquote
Block quotation
Highlight
Highlighted text
Mark
Text annotation
Prose
Long-form content
Advanced Forms
MultiSelect
Multi-item selector
DateRangePicker
Start/end date pair
InputMask
Masked format input
PhoneInput
Phone number input
ImageUpload
Image upload preview
RichTextEditor
WYSIWYG editor
MarkdownEditor
Markdown editor
SignaturePad
Signature drawing
CodeEditor
Code input with lines
Mentions
@mention input
Advanced Data
AvatarGroup
Stacked avatar row
Comment
User comment
Descriptions
Key-value pairs
StatsGrid
Grid of stat cards
Masonry
Masonry layout
QRCode
QR code display
Segmented
Segmented control
InfiniteScroll
Infinite scroll list
Watermark
Background watermark
BadgeGroup
Grouped badges
Charts
BarChart
Bar chart
LineChart
Line chart
PieChart
Pie chart
SparkLine
Mini sparkline
DonutChart
Donut ring chart
AreaChart
Filled area chart
RadarChart
Spider/radar chart
ScatterChart
Scatter plot
HeatmapChart
Color heatmap
TreemapChart
Treemap chart
GanttChart
Gantt timeline
ChartLegend
Chart legend
ChartTooltip
Chart hover tooltip
Collections
TreeView
Tree hierarchy
Combobox
Searchable select
VirtualList
Virtual scroll list
DragDrop
Drag and drop zone
Kanban
Kanban board
CommandPalette
Cmd+K search
Templates
LoginForm
Login form
RegisterForm
Registration form
SettingsLayout
Settings page
ProfileCard
User profile card
PricingTable
Pricing plans table
LandingHero
Landing page hero
ErrorPage
Error page
DashboardLayout
Dashboard shell
AuthLayout
Centered auth card
EmailClient
Email inbox layout
AnalyticsDashboard
Analytics dashboard
BlogLayout
Blog post layout
FileManager
File browser
InboxLayout
Message inbox
E-commerce
ProductCard
Product display
CartItem
Cart line item
CartSummary
Order total
CheckoutForm
Checkout form
OrderSummary
Order confirmation
ProductGallery
Image gallery
CouponCode
Coupon input
CheckoutSteps
Checkout progress
Marketing
CTASection
Call-to-action
FeatureGrid
Feature grid
LogoCloud
Partner logos
NewsletterForm
Email subscribe
TestimonialGrid
Testimonials grid
TeamGrid
Team member grid
TeamMember
Team member card
PricingToggle
Price toggle
Dashboard
StatCard
Stat metric card
StatCardGroup
Stat cards row
KPIWidget
KPI with sparkline
ActivityFeed
Activity timeline
GaugeChart
Circular gauge
NotificationCenter
Notification panel
QuickActions
Quick action grid
AI / Chat
ChatBubble
Chat message bubble
ChatInput
Chat text input
ChatMessages
Message container
AIResponseCard
AI response card
AIPromptInput
AI prompt input
AILoadingState
AI thinking state