Layout
Responsive layout primitives — Box, Stack, Flex, Grid, Container and more
Stack
Vertical/horizontal flex container with gap — responsive direction support
Vertical (default)
Horizontal
Flex
Full flexbox control — direction, wrap, gap, align, justify
Grid
CSS Grid with responsive columns — supports 1–12 cols with gap control
Responsive: 1 → 2 → 4 cols
SimpleGrid
Simplified grid — auto-calculates columns from min child width
Card A
SimpleGrid auto-distributes cards evenly
Card B
Responsive columns via breakpoint map
Card C
Consistent gap between all items
Center
Centering utility — horizontally and/or vertically center content
Centered content
Both axes
Container
Max-width wrapper for page content — responsive padding included
Content is centered within a max-width container with responsive horizontal padding.
Wrap
Flex-wrap container with gap — items flow to next line automatically
Spacer
Flexible space filler — pushes siblings apart in flex containers
DescriptionList
Key-value pairs — common for detail/settings views
- Full Name
- Ana Costa
- ana@phiaui.dev
- Role
- Frontend Engineer
- Status
-
Active
- Joined
- March 2025
PageHeader
Page title + description + optional actions — common pattern for admin pages
Team Members
Manage your organization's team members and their roles.
Section
Content section with title, description, and optional footer
Notification Preferences
Choose how you want to be notified about updates.
MediaObject
Classic media object pattern — image/icon alongside text content
Ana Costa
Frontend Engineer at PhiaUI. Building beautiful interfaces with Elixir and LiveView.
Deployment Successful
v0.1.16 deployed to production 2 minutes ago.
SplitLayout
Two-column split layout — sidebar + main content area
Main Content
Primary content area
ResponsiveStack
Stack that switches from vertical to horizontal at a breakpoint