Accent

v0.3.000 · 28 components · 11 colors · 35 icons

Under heavy development · early stages

Pines UI rendered from Swift

A type-safe Swift package that renders Pines UI components through Elementary, the HTML renderer for Swift server-side frameworks including Vapor and Hummingbird.

Browse components View on GitHub

ProductPage.swift

import ElementaryPines

pinesCard {
    div(.class("p-7")) {
        h2 { "Featured" }
        p  { "Rendered server-side." }
        button { "Add to cart" }
            .pinesButtonStyle(.solid)
        span { "New" }
            .pinesBadgeStyle(.light)
        pinesProgress(75)
    }
}

This showcase is hand-written HTML — no Swift server renders it. Every component on this page is a 1:1 reflection of the markup the package produces, copied from elementary-pines so the classes, attributes and Alpine directives match exactly.

Primitives

12 components

Button, Badge, Icon, Card, Progress, Quote, Banner, Alert, Accordion, Tabs, Toast, and Tooltip.

Forms & controls

9 components

Input, Textarea, Select, DatePicker, Checkbox, Switch, RadioGroup, RangeSlider, Rating — Alpine.js drives the interactive ones.

Navigation

7 components

Breadcrumbs, dropdowns, popovers, menu bars, modals, slide-overs, and command panels powered by Alpine.js.

Primitives

Building blocks — buttons, badges, icons, cards, progress, quotes, banners, and alerts. Every variant, every color.

Button

button { "..." }.pinesButtonStyle(_:color:)

3 styles × 11 colors

Style

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")

Accordion

pinesAccordion(items:)

Alpine Collapse

import ElementaryPines

pinesAccordion(items: [
    .init(title: "What is Elementary?", body: "A type-safe HTML renderer."),
    .init(title: "Does it support Alpine?", body: "Yes, through elementary-alpine."),
])

Tabs

pinesTabs(tabs:)

Alpine.js · animated marker

Project overview

Recent activity

Workspace settings

import ElementaryPines

pinesTabs(tabs: [
    PinesTab(title: "Overview") { p { "Project overview" } },
    PinesTab(title: "Activity") { p { "Recent activity" } },
    PinesTab(title: "Settings") { p { "Workspace settings" } },
])

Toast

pinesToast(name:) — window.toast(message, {description, type, position, html})

6 positions · 7 types · html · expanded

Type Position Title Description Custom HTML (avatar) Expanded layout

Controls use the demo's control options — not a copy of Pines docs buttons. Changing any control updates the next window.toast(title, {description, type, position, html}) call.

import ElementaryPines

pinesToast()

// Type-safe via PinesToastType / PinesToastPosition (see below):
window.toast("", [description: , type: ., position: ., html: customHTML ])

Tooltip

pinesTooltip(text:position:arrow:content:)

hover and focus

Hover for details

import ElementaryPines

pinesTooltip(text: "Rendered on hover", position: .top, arrow: true) {
    button { "Hover for details" }
}

Badge

span { "..." }.pinesBadgeStyle(_:color:)

5 styles × 11 colors

Style

Color

Text

import ElementaryPines

span {  }
    .pinesBadgeStyle(., color: .)

Icon

pinesIcon(_:size:color:)

35 icons × 5 sizes × 11 colors

Icon

Size

Color

import ElementaryPines

pinesIcon(., size: ., color: .)

Card

pinesCard(_:image:content:)

4 variants

Variant

import ElementaryPines

pinesCard(., image: "photo.jpg") {
    // user content
}

Progress

pinesProgress(_:of:color:size:)

3 sizes × 11 colors

Value

Size

Color

import ElementaryPines

  pinesProgress()pinesProgress(, color: ., size: .)

Quote

pinesQuote(quote:author:role:avatar:)

optional avatar

This is a great quote.

Author Name
Role

Include avatar

import ElementaryPines

pinesQuote(
    quote: "This is a great quote.",
    author: "Author Name",
    role: "Role",
    avatar: 
)

Banner

pinesBanner(label:message:href:icon:dismissible:position:)

4 icon presets × dismissible

Icon

Label Message

Position

Auto-dismiss

Dismissible

Dismiss

import ElementaryPines

pinesBanner(
    label: ,
    message: ,
    href: "#",
    icon: .,
    dismissible: ,
    position: .
)

Alert

pinesAlert(_:icon:content:)

5 variants

Variant

Title Body

Color

Icon

import ElementaryPines

pinesAlert(.) {
    h5 {  }
    div(.class("text-sm opacity-70")) {
        
    }
}

Forms & controls

Inputs, selects, date pickers, switches, sliders, ratings. Interactive pieces include Alpine.js state for the preview.

DatePicker

pinesDatePicker(labelText:placeholder:format:width:disabled:attributes:)

Alpine.js · readonly input

Label Placeholder Format Width

Disabled

import ElementaryPines

pinesDatePicker(
    labelText: ,
    placeholder: ,
 format: ., width: , disabled: 
)

Input

pinesInput(type:color:placeholder:name:value:id:disabled:)

11 colors

Color

Placeholder

Type

Disabled

import ElementaryPines

pinesInput(type: , color: ., placeholder: , disabled: true)

Textarea

pinesTextarea(color:placeholder:name:id:rows:disabled:)

11 colors

Color

Rows Placeholder

import ElementaryPines

pinesTextarea(color: ., placeholder: , rows: )

Select

pinesSelect(items:placeholder:width:)

Alpine.js

Selected

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")

Checkbox

pinesCheckbox(labelText:color:checked:name:id:)

label · card · custom content

Variant

Color

Checked

import ElementaryPines

pinesCheckbox(
    labelText: "Accept terms",
    color: .,
    checked: ,
    name: "terms",
    id: "terms"
)

Switch

pinesSwitch(labelText:color:size:name:id:disabled:)

2 sizes × 11 colors

Enable feature

Size

Color

Label

import ElementaryPines

  pinesSwitch(labelText: "On", color: ., size: .small, name: "notifications", id: "notifications")

RadioGroup

pinesRadioGroup(options:name:disabled:)

Disabled-item support

Selected value

Name attribute

import ElementaryPines

pinesRadioGroup(options: [
    PinesRadioGroupOption(title: "Free",  value: "free"),
    PinesRadioGroupOption(title: "Pro",   value: "pro"),
    PinesRadioGroupOption(title: "Team",  value: "team", disabled: true),
], name: )

RangeSlider

pinesRangeSlider(color:name:id:min:max:value:step:disabled:)

11 colors

0100

Value Step

Disabled

Color

import ElementaryPines

pinesRangeSlider(
    color: .,
    name: "volume",
    id: "volume",
    min: 0, max: 100,
    value: , step: , disabled: 
)

Rating

pinesRating(icon:color:emptyStyle:maxStars:value:disabled:compactReset:)

2 variants × 2 icons × 2 empty styles

Rated Stars

Rated

Reset mode

Icon

Color

Empty style

Disabled

import ElementaryPines

pinesRating(
    icon: .,
    color: .,
    emptyStyle: .,
    maxStars: 5,
    value: ,
    disabled: ,
    compactReset: 
)

Navigation

Type-safe navigation, menus, overlays, and command surfaces for server-rendered Swift sites.

Breadcrumb

pinesBreadcrumb(items:) / pinesBreadcrumbItems(for:in:root:)

3 separators · site-map support

Separator

Mode

import ElementaryPines

pinesBreadcrumb(items: [
    .link("Home",       href: "/"),
    .link("Docs",       href: "/docs"),
    .link("Components", href: "/docs/components"),
    .current("Breadcrumb"),
 ], separator: ., homeIcon: )

let siteMap: [PinesSiteMapEntry] = [
    .init(path: "/",                  label: "Home"),
    .init(path: "/products",           label: "Products"),
    .init(path: "/products/laptops",  label: "Laptops"),
]

let items = pinesBreadcrumbItems(
    for: "/products/laptops/pinebook",
    in: siteMap
)

pinesBreadcrumb(items, separator: .)

Dropdown

pinesDropdown(color:position:width:showChevron:attributes:trigger:items:)

keyboard navigation

Profile⇧⌘P

Settings⌘S

Sign out

pinesDropdown(position: .belowCenter, width: .size(56), showChevron: , trigger: { span { "Account" } }, items: { [
    pinesDropdownItem(.init(title: "Profile")), pinesDropdownItem(.init(title: "Settings")), pinesDropdownSeparator(), pinesDropdownItem(.init(title: "Sign out", danger: true))
 ] })

Popover

pinesPopover(color:position:arrow:width:attributes:trigger:content:)

Alpine Focus

Popover content

This panel traps focus while it is open.

pinesPopover(position: .bottom, arrow: true, width: .size(64), trigger: { span { "Open popover" } }) { p { "Popover content" } }

MenuBar

pinesMenuBar(color:attributes:menus:)

hover switching

pinesMenuBar(menus: [
    PinesMenuBarMenu(title: "File", items: [.item(.init(title: "New")), .item(.init(title: "Open"))]),
    PinesMenuBarMenu(title: "Edit", items: [.item(.init(title: "Undo")), .item(.init(title: "Redo"))]),
])

Modal

pinesModal(color:attributes:trigger:content:)

Alpine Focus · teleport

pinesModal(trigger: { span { "Open modal" } }) {
    h2 { "Confirm action" }
    p { "The modal uses a focus-trapped dialog." }
}

SlideOver

pinesSlideOver(size:title:color:attributes:trigger:content:)

right-side panel

import ElementaryPines
pinesSlideOver(
    size: .default,
    title: "Panel title",
    trigger: { span { "Open slide-over" } }
) { p { "This panel slides in from the right." } }

Command

pinesCommand(color:items:placeholder:attributes:)

search and keyboard navigation

import ElementaryPines
pinesCommand(
    color: .,
    items: [
        PinesCommandItem(title: "Open settings", value: "settings", shortcut: "Cmd ,", category: "Actions"),
        PinesCommandItem(title: "Create new project", value: "new-project", shortcut: "Cmd N", category: "Actions"),
    ],
    placeholder: ""
)

Pines UI rendered from Swift

Primitives

Forms & controls

Navigation

Primitives

Button

Accordion

Tabs

Toast

Tooltip

Badge

Icon

Card

Mountain Trail

Side-by-side

Plain card

Progress

Quote

Banner

Alert

Forms & controls

DatePicker

Input

Textarea

Select

Checkbox

Switch

RadioGroup

RangeSlider

Rating

Navigation

Breadcrumb

Dropdown

Popover

MenuBar

Modal

Confirm action

SlideOver

Panel title

Command