A type-safe Swift package that renders Pines UI components through Elementary, the HTML renderer for Swift server-side frameworks including Vapor and Hummingbird.
import ElementaryPines pinesCard { div(.class("p-7")) { h2 { "Featured" } p { "Rendered server-side." } button { "Add to cart" } .pinesButtonStyle(.solid, color: .blue) span { "New" } .pinesBadgeStyle(.light, color: .green) pinesProgress(75, color: .blue) } }
8 components
Button, Badge, Icon, Card, Progress, Quote, Banner, Alert — the building blocks across all 11 colors.
8 components
Input, Textarea, Select, Checkbox, Switch, RadioGroup, RangeSlider, Rating — Alpine.js drives the interactive ones.
1 component
A data-driven breadcrumb for Vapor and Hummingbird sites. Manual or site-map derivation, three separator styles.
Category
Building blocks — buttons, badges, icons, cards, progress, quotes, banners, and alerts. Every variant, every color.
button { "..." }.pinesButtonStyle(_:color:)
import ElementaryPines button { } .pinesButtonStyle(., color: .)
span { "..." }.pinesBadgeStyle(_:color:)
import ElementaryPines span { } .pinesBadgeStyle(., color: .)
pinesIcon(_:size:color:)
import ElementaryPines pinesIcon(., size: ., color: .)
pinesCard(_:image:content:)
A short description of the destination.
Image left, content right.
1,234
Total users
Border, rounded corners, subtle shadow. The default.
import ElementaryPines pinesCard(., image: "photo.jpg") { // user content }
pinesProgress(_:of:color:size:)
import ElementaryPines pinesProgress(, color: ., size: .)
pinesQuote(_:avatar:content:)
“This is a great quote.”
import ElementaryPines pinesQuote(., avatar: "avatar.jpg") { blockquote { p { "“This is a great quote.”" } } figcaption { "— Author Name, Role" } }
pinesBanner(icon:dismissible:content:)
import ElementaryPines pinesBanner(icon: .kind(.), dismissible: true) { p { } }
pinesAlert(_:icon:content:)
import ElementaryPines pinesAlert(.) { h5 { } div(.class("text-sm opacity-70")) { } }
Category
Inputs, selects, switches, sliders, ratings. Interactive pieces include Alpine.js state for the preview.
pinesInput(type:color:placeholder:name:value:id:disabled:)
import ElementaryPines pinesInput(color: ., placeholder: , disabled: true)
pinesTextarea(color:placeholder:name:id:rows:disabled:)
import ElementaryPines pinesTextarea(color: ., placeholder: , rows: )
pinesSelect(items:placeholder:width:)
import ElementaryPines pinesSelect(items: [ PinesSelectItem(title: "Apple", value: "apple"), PinesSelectItem(title: "Banana", value: "banana"), PinesSelectItem(title: "Cherry", value: "cherry"), PinesSelectItem(title: "Date", value: "date", disabled: true), ], placeholder: "Select a fruit")
pinesCheckbox(checked:color:name:variant:labelClasses:)
import ElementaryPines pinesCheckbox( checked: , color: ., variant: . )
pinesSwitch(color:size:name:)
import ElementaryPines pinesSwitch(color: ., size: .small)
pinesRadioGroup(options:name:disabled:)
import ElementaryPines pinesRadioGroup(options: [ PinesRadioOption(title: "Free", value: "free"), PinesRadioOption(title: "Pro", value: "pro"), PinesRadioOption(title: "Team", value: "team", disabled: true), ], name: )
pinesRangeSlider(color:name:id:min:max:value:)
import ElementaryPines pinesRangeSlider(color: ., value: )
pinesRating(variant:icon:color:emptyStyle:max:disabled:)
import ElementaryPines pinesRating(variant: ., icon: ., color: ., emptyStyle: .)