Cards
Card variants for every content type — from profiles to pricing.
Basic Card
Default Card
Standard card with header and content
Cards are the primary container for grouped content. They provide visual separation and structure.
With Footer
Card with action footer
Cards can include a footer section for actions or additional metadata.
Highlighted Card
Primary color accent variant
Use color accents to draw attention to featured or important cards.
SelectableCard
ReceiptCard
PhiaUI Store
Order #4521
Profile Cards
Ana Costa
Frontend Engineer
ana@acme.com
42
PRs
128
Reviews
1.2k
Stars
Bruno Lima
Backend Engineer
bruno@acme.com
387
Commits
64
PRs
890
Stars
Carla Souza
Design Lead
carla@acme.com
215
Designs
94
Reviews
2.1k
Stars
StatCard & MetricGrid
Revenue
Users
Orders
Churn
SparklineCard
Weekly Revenue
$12,400
+8% vs last weekActive Sessions
1,842
+12% todayError Rate
0.4%
-0.1% vs last weekArticleCard
Getting Started with Phoenix
A comprehensive guide to building real-time web applications with Phoenix LiveView.
Understanding OTP Patterns
Deep dive into GenServers, Supervisors, and the building blocks of fault-tolerant systems.
PhiaUI 1.0 Released
Announcing the first stable release of the Phoenix LiveView component library.
PricingCard
Starter
- 1 project
- 5 team members
- — Priority support
- — Custom domains
Pro
Everything you need for growing teams.
- Unlimited projects
- Priority support
- Custom domains
- Analytics
Enterprise
- Unlimited projects
- Priority support
- Custom domains
- Analytics
- SSO / SAML
- Dedicated support
TestimonialCard
PhiaUI has transformed our development workflow. The component quality is outstanding.
Sarah Chen
CTO at Acme
Clean, well-documented components that just work. Saved us weeks of development time.
Marcus Lee
Lead Engineer, NovaTech
The best Phoenix component library I have used. Period.
Ana Ferreira
TeamCard
Alex Rivera
Lead Engineer
Mei Zhang
Product Designer
Design
Jordan Cole
DevOps
jordan@acme.com
Sara Nunes
Backend Engineer
Platform
ColorSwatchCard
Primary Blue
59, 130, 246
Emerald
160, 84%, 39%
Amber
Rose
FileCard
LinkPreviewCard
Comprehensive Phoenix LiveView component library with 623+ components.
hexdocs.pm
tailwindcss.com