SwiftUI-inspired layout components for building modern, responsive web interfaces
Arrange elements horizontally with customizable alignment and spacing.
// Basic HStack
HStack {
Button("Previous")
Button("Next")
}
// With spacing and alignment
HStack(alignment: .center, spacing: 20) {
Img(src: "/icon.png", alt: "Icon")
.style("width", "40px")
.style("height", "40px")
Text("User Profile")
Spacer()
Button("Edit")
}
// Different alignments
HStack(alignment: .top, spacing: 16) {
Div { Text("Tall Box") }.style("height", "100px")
Div { Text("Short Box") }.style("height", "60px")
Div { Text("Medium Box") }.style("height", "80px")
}<div style="display: flex; flex-direction: row; align-items: center;">
<button>Previous</button>
<button>Next</button>
</div>
<!-- With spacing and alignment -->
<div style="display: flex; flex-direction: row; align-items: center; gap: 20px;">
<img src="/icon.png" alt="Icon" style="width: 40px; height: 40px;">
User Profile
<div style="flex: 1;"></div>
<button>Edit</button>
</div>Basic HStack:
Profile bar with Spacer:
Alignment variations:
alignment: .top
alignment: .center
alignment: .bottom
Arrange elements vertically with customizable alignment and spacing.
// Basic VStack
VStack {
H3("Settings")
P("Configure your preferences")
}
// Form with VStack
VStack(alignment: .leading, spacing: 16) {
Label("Username")
Input(type: "text", name: "username")
Label("Email")
Input(type: "email", name: "email")
Button("Save Changes")
}
// Card with centered content
VStack(alignment: .center, spacing: 24) {
Img(src: "/logo.png", alt: "Logo")
H2("Welcome Back!")
P("Sign in to continue")
Button("Sign In")
}<div style="display: flex; flex-direction: column;">
<h3>Settings</h3>
<p>Configure your preferences</p>
</div>
<!-- Form with VStack -->
<div style="display: flex; flex-direction: column; align-items: flex-start; gap: 16px;">
<label>Username</label>
<input type="text" name="username">
<label>Email</label>
<input type="email" name="email">
<button>Save Changes</button>
</div>Configure your preferences below
Sign in to continue to your dashboard
Layer elements on top of each other with precise alignment control.
// Card with badge overlay
ZStack(alignment: .topTrailing) {
Div {
Img(src: "/product.jpg", alt: "Product")
H4("Premium Package")
P("$99/month")
}
.class("product-card")
Span("NEW")
.class("badge")
.style("margin", "10px")
}
// Hero section with overlay
ZStack(alignment: .center) {
Img(src: "/hero.jpg", alt: "Hero")
.style("width", "100%")
.style("height", "400px")
VStack(spacing: 16) {
H1("Welcome to Swiftlets")
P("Build beautiful web apps with Swift")
Button("Get Started")
}
.style("color", "white")
.style("text-align", "center")
}<div style="position: relative;">
<div class="product-card">
<img src="/product.jpg" alt="Product">
<h4>Premium Package</h4>
<p>$99/month</p>
</div>
<span class="badge" style="position: absolute; top: 0; right: 0; margin: 10px;">NEW</span>
</div>Product cards with overlay badges:
$9/month
$29/month
$99/month
Hero section with centered overlay:
Create beautiful web experiences with SwiftUI-style syntax
Create powerful grid layouts with flexible column configurations.
// Fixed column count
Grid(columns: .count(3), spacing: 20) {
ForEach(1...6) { i in
Card(number: i)
}
}
// Responsive columns
Grid(columns: .custom("repeat(auto-fit, minmax(250px, 1fr))"), spacing: 16) {
ForEach(features) { feature in
FeatureCard(feature)
}
}
// Custom grid template
Grid(
columns: .custom("2fr 1fr"),
rowGap: 20,
columnGap: 30
) {
MainContent()
Sidebar()
}<!-- Fixed columns -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
<!-- cards -->
</div>
<!-- Responsive columns -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px;">
<!-- features -->
</div>Dashboard stats grid:
Responsive feature grid (resize window to see reflow):
Lightning quick performance
Enterprise-grade security
Works on all devices
Modern, clean design
Highly customizable
Grows with your needs
Responsive containers with predefined breakpoints for consistent layouts.
// Small container (max-width: 576px)
Container(maxWidth: .small) {
H2("Article Title")
P("Perfect for blog posts and focused reading.")
}
// Medium container (max-width: 768px)
Container(maxWidth: .medium, padding: 20) {
ContactForm()
}
// Large container (max-width: 1140px)
Container(maxWidth: .large) {
NavigationBar()
HeroSection()
Features()
}
// Full-width section with contained content
Section {
Container(maxWidth: .medium) {
H2("Contained within full-width section")
}
}
.style("background", "#f8f9fa")<!-- Small container -->
<div style="max-width: 576px; margin: 0 auto;">
<h2>Article Title</h2>
<p>Perfect for blog posts and focused reading.</p>
</div>
<!-- Large container with padding -->
<div style="max-width: 1140px; margin: 0 auto; padding: 20px;">
<!-- content -->
</div>Container.small • max-width: 576px
Use for: Blog posts, articles
Container.medium • max-width: 768px
Use for: Forms, focused content
Container.large • max-width: 1140px
Use for: Main site content
Flexible space that expands to push adjacent content apart.
// Navigation bar
HStack {
H3("Logo")
Spacer()
Link(href: "/", "Home")
Link(href: "/about", "About")
Link(href: "/contact", "Contact")
}
// Center content
HStack {
Spacer()
Button("Centered")
Spacer()
}
// Spacer with minimum length
HStack {
Text("Left")
Spacer(minLength: 100)
Text("Right")
}<div style="display: flex; align-items: center;">
<h3>Logo</h3>
<div style="flex: 1;"></div>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</div>Combine layout components to build sophisticated, responsive interfaces.
Container(maxWidth: .large) {
VStack(spacing: 24) {
// Header
HStack {
H1("Dashboard")
Spacer()
HStack(spacing: 12) {
Button("Settings")
Button("Profile")
}
}
// Stats Grid
Grid(columns: .count(4), spacing: 16) {
ForEach(stats) { stat in
StatCard(stat)
}
}
// Main Content
HStack(alignment: .top, spacing: 24) {
// Main area
VStack(spacing: 16) {
ForEach(posts) { post in
PostCard(post)
}
}
.style("flex", "2")
// Sidebar
VStack(spacing: 16) {
ActivityFeed()
QuickActions()
}
.style("flex", "1")
}
}
}<div style="max-width: 1140px; margin: 0 auto;">
<!-- Complex nested layout -->
</div>