Skip to content

Components

Every PhiaUI component — live demos, fully interactive, dark-mode ready.

v0.1.16
· 623 components · 13 categories

Inputs

42 components

Button, ButtonGroup, FancyButton, IconButton, SocialButton, Switch, Slider, Rating, Toggle, Chip, PasswordInput, ColorPicker, OTP, InputAddon, MultiSelect, Combobox, Checkbox, RadioGroup, DatePicker, TagsInput, FileUpload, CopyButton, AutocompleteInput, MentionInput, PhoneInput, SearchInput, CopyInput, ClearableInput, Editable, InputGroup, UrlInput, UnitInput, TextareaCounter, InlineSearch e mais

Display

38 components

Badge, Separator, Kbd, Tabs, TabsNav, Avatar, AvatarGroup, Card, SelectableCard, Timeline, ActivityFeed, Breadcrumb, Accordion, Skeleton, Table, Pagination, EmptyState, Icon, Tree, Direction, QrCode, ScrollArea, AspectRatio, ChatMessage, Typography, CodeSnippet, Article e mais

Feedback

32 components

Spinner, Progress, ProgressEnhanced, CircularProgress, StepTracker, Alert, Toast, Snackbar, Sheet, Dialog, AlertDialog, Drawer, Command, HoverCard, Tooltip, Popover, DropdownMenu, ContextMenu, Carousel, BackTop, FloatButton, DarkModeToggle, Sonner, Banner, Notification, ErrorDisplay, StatusIndicator, Popconfirm, LoadingOverlay, FeedbackWidget, ResultState, GlobalMessage

Data & Charts

52 components

ECharts (Line, Area, Bar, Pie, Donut, Scatter, Funnel, Heatmap, Treemap, Waterfall, Histogram), StatCard, MetricGrid, SparklineCard, GaugeChart, UptimeBar, FilterBar, DataGrid, Resizable, BarList, CategoryBar, BadgeDelta, BulletChart, MeterGroup, Leaderboard, Tracker e mais

Calendar

28 components

Calendar, BigCalendar, EventCalendar, HeatmapCalendar, WeekCalendar, RangeCalendar, MultiSelectCalendar, BadgeCalendar, StreakCalendar, BookingCalendar, DateRangePresets, DateCard, DateStrip, CountdownTimer, TimePicker, DateField, DateTimePicker, MonthPicker, YearPicker, WeekPicker, WeekDayPicker, DailyAgenda, MultiMonthCalendar, WheelPicker e mais

Cards

31 components

Card, SelectableCard, ReceiptCard, ProfileCard, FeatureCard, ArticleCard, CtaCard, EventCard, ImageCard, PricingCard, ProductCard, ProgressCard, TestimonialCard, TeamCard, NotificationCard, StatCard, SparklineCard, MetricGrid, ColorSwatchCard, FileCard, LinkPreviewCard — all card variants

Navigation

28 components

Breadcrumb, Tabs, TabsNav, Separator, Pagination, StepTracker, Accordion, Kbd, CommandPalette, MegaMenu, FloatingNav, SpeedDial, Dock, NavRail, Topbar, VerticalNav, BottomNavigation, StepperNav, Toolbar, ChipNav, DotNavigation, LinkGroup, Toc e mais

Tables

24 components

Table, DataGrid, DataTable, FilterBar, Tree, TreeEnhanced, BulkActionBar, ExpandableTable, ResponsiveTable, ComparisonTable, InlineEditTable, TimelineTable, KanbanBoard, PivotTable, TableGroup — sortable, filterable, expandable tables

Upload

10 components

ImageUpload, FileUpload, CopyButton, DropZone, DocumentUpload, AvatarUpload — all file upload patterns including drag-and-drop and progress indicators

Media

12 components

Carousel, QrCode, AspectRatio, ScrollArea, Resizable, Direction, AudioPlayer, ImageComparison, Watermark, Lightbox, VideoPlayer — media display and layout utilities

Animation

22 components

marquee, orbit, aurora, meteor_shower, shimmer_text, typewriter, word_rotate, text_scramble, fade_in, float, spotlight, tilt_card, number_ticker, typing_indicator, wave_loader, animated_border, pulse_ring, confetti_burst, particle_bg e mais

Visual Effects

20 components

gradient_mesh, retro_grid, wave_bg, hex_pattern, bokeh_bg, flicker_grid, flowing_lines, beam_bg — plus glass_card, glass_panel, acrylic_surface, liquid_glass, neon_glow_card, border_beam, shine_border, magic_card, card_spotlight, moving_border

Layout

22 components

Stack, Flex, Grid, SimpleGrid, Center, Container, Wrap, Spacer, DescriptionList, PageHeader, Section, MediaObject, SplitLayout, ResponsiveStack, MasonryGrid, ContainerQuery, Box, Cover, Divider, FixedBar, Sticky, ResponsiveVisibility

About PhiaUI

PhiaUI is a Phoenix LiveView component library built on Tailwind CSS v4 and Lucide icons. Components are fully server-rendered with minimal JavaScript — only progressive enhancement hooks. Dark mode is handled via CSS custom properties and the .dark class.