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

Declarative routing driven by module state. Routes are matched by the platform renderer based on state.location. For a complete routing guide, see Routing.

Router(initialRoute: "/home") {
    Route(path: "/home") {
        HomePage()
    }
    Route(path: "/users/:id") {
        UserProfile(userId: ${state.params.id})
    }
    Route(path: "/settings", guard: @actions.requireAuth) {
        SettingsPage()
    }
    Route.fallback {
        NotFoundPage()
    }
}

Router Arguments:

initialRoute: Default route on mount

Route Arguments:

path: URL pattern (supports :param segments)
guard (optional): Async action to run before entering the route
exact (optional): Only match the exact path

Control flow components are first-class constructs in the engine. They don't create DOM elements — their children render directly into the parent container. For a complete guide with patterns, performance tips, and end-to-end examples, see Control Flow.

ForEach

Iterates over a collection and renders children for each item. Use @item to reference each item, and always provide key for dynamic lists.

ForEach(items: @state.todos, key: "id") {
    Row {
        Checkbox {}
            .checked(@item.completed)
            .onChange(@actions.toggleTodo)

        Text(@item.title)
            .fontSize(16)
            .color("${item.completed ? '#9CA3AF' : '#111827'}")
            .flex(1)

        Button { Text("Delete") }
            .onClick(@actions.deleteTodo)
            .color("#EF4444")
    }
    .padding(12)
    .gap(12)
    .verticalAlignment("center")
}

Arguments:

Argument	Required	Default	Description
`items` or `in`	Yes	—	Array binding from state
`key`	No	index	Property name for stable identity across updates
`as`	No	`"item"`	Custom variable name for each element

When

Pattern matching on a value with multiple cases. Great for loading/error/success states.

When(value: @state.status) {
    Case(match: "loading") {
        Center { Spinner() }
    }
    Case(match: "error") {
        Column {
            Text("Something went wrong")
            Button { Text("Retry") }
                .onClick(@actions.reload)
        }
    }
    Case(match: "success") {
        ContentView()
    }
    Else {
        Text("Unknown status")
    }
}

Arguments:

value: The value to match against

Children:

Case(match: ...): One or more case branches
Else: Optional fallback when no Case matches

Match Patterns:

Exact values: "loading", 200, true
Multiple values (OR): [200, 201, 204]
Wildcards: "_" or "*"
Expressions: "${value >= 90}"

If

Boolean conditional for simple true/false branching. Under the hood it's syntactic sugar over When.

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

// Without Else — just hide/show
If(condition: @state.hasNotifications) {
    Badge("New")
        .backgroundColor("#EF4444")
}

Arguments:

condition: Boolean binding or expression

Children:

Main content (rendered when truthy)
Else: Optional fallback (rendered when falsy)

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

Control Flow — Deep dive into ForEach, When, If with patterns and performance tips
Routing — Navigation, route guards, and nested routing
Layout — Layout components and alignment
Styling — Complete applicator reference
Inputs — Forms and user interaction

Components

On this page