Components

Hypen provides a set of built-in components for building UIs. This guide covers all available components.

Layout Components

Column

Arranges children vertically.

Column {
    Text("First")
    Text("Second")
    Text("Third")
}
.gap(12)

Row

Arranges children horizontally.

Row {
    Text("Left")
    Spacer()
    Text("Right")
}
.gap(12)

Box / Container

Generic container with z-axis stacking (overlay).

Box {
    Image("background.jpg")
    Text("Overlay")
}

Center

Centers content both horizontally and vertically.

Center {
    Spinner()
}
.fillMaxSize(true)

Stack

Overlays children on the z-axis.

Stack {
    Card { Text("Base") }
    Badge("New")
}

Grid

Arranges children in a grid.

Grid {
    Card { Text("1") }
    Card { Text("2") }
    Card { Text("3") }
    Card { Text("4") }
}
.gridColumns(2)
.gap(16)

List

Scrollable container for items.

List {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

Spacer

Flexible empty space.

Row {
    Text("Left")
    Spacer()
    Text("Right")
}

Divider

Visual separator line.

Column {
    Text("Section 1")
    Divider()
    Text("Section 2")
}

Content Components

Text

Displays text.

Text("Hello World")
    .fontSize(18)
    .fontWeight("bold")
    .color("#333333")

Heading

Heading text with larger default styling.

Heading("Page Title")
    .fontSize(32)

Paragraph

Paragraph text with appropriate line spacing.

Paragraph("Long text content that spans multiple lines...")
    .lineHeight(1.6)

Image

Displays an image.

Image("https://example.com/photo.jpg")
    .width(200)
    .height(200)
    .borderRadius(8)

Input Components

Button

Clickable button.

Button {
    Text("Submit")
}
.onClick(@actions.submit)
.backgroundColor("#3B82F6")
.padding(12)
.borderRadius(6)

Input

Single-line text input.

Input(placeholder: "Enter your name")
    .value(${state.name})
    .onInput(@actions.updateName)
    .padding(12)
    .borderRadius(4)

Textarea

Multi-line text input.

Textarea(placeholder: "Enter message...")
    .onInput(@actions.updateMessage)
    .height(100)

Checkbox

Toggle checkbox.

Checkbox {}
    .checked(${state.agreed})
    .onChange(@actions.toggleAgreed)

Switch

Toggle switch.

Switch {}
    .checked(${state.darkMode})
    .onChange(@actions.toggleDarkMode)

Select

Dropdown selection.

Select {}
    .value(${state.country})
    .onChange(@actions.updateCountry)

Slider

Range slider.

Slider {}
    .value(${state.volume})
    .onChange(@actions.updateVolume)

Display Components

Card

Container with elevation and rounded corners.

Card {
    Column {
        Text("Card Title")
        Text("Card content")
    }
    .padding(16)
}

Badge

Small label indicator.

Badge("3")
    .backgroundColor("#EF4444")

Avatar

User avatar display.

Avatar("https://example.com/user.jpg")
    .size(48)
    .borderRadius(24)

Spinner

Loading indicator.

Spinner()
    .size(24)

ProgressBar

Progress indicator.

ProgressBar(value: ${state.progress})
    .height(4)

Media Components

Video

Video player.

Video("https://example.com/video.mp4")
    .width(640)
    .height(360)

Audio

Audio player.

Audio("https://example.com/audio.mp3")

Link

Navigation link.

Link(href: "/about") {
    Text("About Us")
}

Router / Route

Application routing.

Router {
    Route(path: "/") {
        HomePage()
    }
    Route(path: "/about") {
        AboutPage()
    }
}

Control Flow Components

ForEach

Iterates over a collection and renders children for each item. Use @item to reference each item.

ForEach(items: @state.todos) {
    Row {
        Text(@item.title)
        Checkbox {}
            .checked(@item.completed)
    }
}

Arguments:

items: Collection to iterate over (array)
key (optional): Property name to use as unique key for reconciliation

When

Pattern matching on a value with multiple cases.

When(value: @state.status) {
    Case(match: "loading") {
        Spinner()
    }
    Case(match: "error") {
        Text("Error occurred")
    }
    Case(match: "success") {
        Text("Complete!")
    }
    Else {
        Text("Unknown")
    }
}

Arguments:

value: The value to match against

Children:

Case(match: ...): One or more case branches
Else: Optional fallback branch

Match Patterns:

Exact values: "loading", 200, true
Multiple values: [200, 201, 204]
Wildcards: "_" or "*"
Expressions: "${value >= 1 && value <= 100}"

If

Boolean conditional for simple branching.

If(condition: @state.isLoggedIn) {
    ProfileMenu()
    Else {
        LoginButton()
    }
}

Arguments:

condition: Boolean expression to evaluate

Children:

Main content (rendered when true)
Else: Optional fallback (rendered when false)

Platform Support

Component	Web	Android	iOS
Column, Row, Box	Yes	Yes	Yes
Center, Stack, Grid	Yes	Yes	Yes
List, Spacer, Divider	Yes	Yes	Yes
Text, Heading, Paragraph	Yes	Yes	Yes
Image	Yes	Yes	Yes
Button, Input, Textarea	Yes	Yes	Yes
Checkbox, Switch, Select	Yes	Yes	Yes
Slider	Yes	Yes	Yes
Card, Badge, Avatar	Yes	Yes	Yes
Spinner, ProgressBar	Yes	Yes	Yes
Video, Audio	Yes	Yes	Yes
Link, Router, Route	Yes	Yes	Yes
ForEach, When, If	Yes	Yes	Yes

Next Steps

Layout - Deep dive into layout components
Styling - Complete applicator reference
Inputs - Forms and user interaction

Components

On this page