Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Augani/kael/llms.txt
Use this file to discover all available pages before exploring further.
The div() function returns a Div — the workhorse of every Kael UI tree. Much like an HTML <div>, it is a generic container that holds children and controls how they are laid out, sized, colored, and how they respond to input. All layout properties, visual styles, and interaction handlers are set through a fluent builder API on Div. Because Div implements the Styled and InteractiveElement traits, every style method and every event handler you reach for is available on the same value without any wrapping.
Constructing a div
use kael::div;
let container = div()
.flex()
.flex_col()
.gap_4()
.p_6()
.bg(theme.surface)
.rounded_lg()
.child("Hello, world!");
div() takes no arguments. You configure it entirely through builder methods and then pass children via .child() or .children().
Flex layout
Div defaults to block layout. Call .flex() to switch to a flex container.
| Method | Effect |
|---|
flex() | display: flex |
flex_col() | flex-direction: column |
flex_row() | flex-direction: row (default when flex is enabled) |
flex_wrap() | flex-wrap: wrap |
flex_none() | flex: none on this element (no grow/shrink) |
flex_1() | flex: 1 1 0 — fills remaining space |
grow() | flex-grow: 1 |
shrink() | flex-shrink: 1 |
items_start() | align-items: flex-start |
items_center() | align-items: center |
items_end() | align-items: flex-end |
justify_start() | justify-content: flex-start |
justify_center() | justify-content: center |
justify_end() | justify-content: flex-end |
justify_between() | justify-content: space-between |
gap_N() | Gap between children, e.g. gap_2(), gap_4() |
div()
.flex()
.items_center()
.justify_between()
.gap_3()
.child(label_element)
.child(value_element)
Sizing
| Method | Effect |
|---|
w(length) | Fixed width |
h(length) | Fixed height |
w_full() | width: 100% |
h_full() | height: 100% |
min_w(length) | Minimum width |
max_w(length) | Maximum width |
min_h(length) | Minimum height |
max_h(length) | Maximum height |
size_full() | width: 100%; height: 100% |
px(n), relative(n) (percentage), and Tailwind-style shorthand like w_64().
div()
.w_full()
.min_h(px(48.0))
.max_w(px(640.0))
Padding and margin
Padding and margin follow the same naming pattern:
| Method | Applies to |
|---|
p(length) | All sides |
px(length) | Horizontal (left + right) |
py(length) | Vertical (top + bottom) |
pt(length) | Top |
pr(length) | Right |
pb(length) | Bottom |
pl(length) | Left |
m(length) | All sides (margin) |
mx(length) | Horizontal margin |
my(length) | Vertical margin |
mt(length) | Top margin |
p_4() and px_2() map to multiples of the base spacing unit.
Borders
div()
.border_1() // 1 px border on all sides
.border_color(theme.border) // border color
.rounded_md() // border-radius: medium
.rounded_lg() // border-radius: large
.rounded_full() // border-radius: 9999px
.border_t_1(), .border_r_1(), .border_b_1(), .border_l_1().
Colors and backgrounds
div()
.bg(theme.surface) // background color (Hsla or Fill)
.text_color(theme.text) // inheritable text color
.opacity(0.5) // element opacity 0.0–1.0
Shadows and overflow
div()
.shadow_sm()
.shadow_md()
.shadow_lg()
.overflow_hidden() // clip children
.overflow_x_hidden()
.overflow_y_scroll() // scrollable axis
div()
.relative() // position: relative
.absolute() // position: absolute
.top(px(0.0))
.left(px(0.0))
.z_index(10)
.rotate(std::f32::consts::PI / 4.0) // radians
.scale(Point { x: 1.5, y: 1.5 })
.opacity(0.8)
rotate and scale animate implicitly when their values change. Kael detects the change between frames and interpolates over 150 ms using an ease-out curve.
Hover, focus, and active states
State-dependent styles are applied through callbacks that receive a StyleRefinement:
div()
.hover(|style| style.bg(theme.hover_surface))
.active(|style| style.bg(theme.active_surface))
.focus_visible(|style| style.outline(theme.focus_ring))
Children
div()
.child("plain text") // &'static str implements IntoElement
.child(another_div)
.children(items.iter().map(|item| render_item(item)))
Event handlers
div()
.id("my-button") // required for stateful handlers
.on_click(|event, window, cx| {
// handle click
})
.on_mouse_move(|event, window, cx| {
// handle mouse move
})
.on_key_down(|event, window, cx| {
// handle key press
})
You must call .id(...) on a Div before attaching stateful event handlers like on_click. The id is used to persist per-element state across frames.
Accessibility
div()
.accessibility(
AccessibilityAttributes::new(AccessibilityRole::Button)
.label("Close dialog")
)
.focusable()
.tab_stop(true)
Cursor
div().cursor_pointer() // pointer cursor on hover
div().cursor_default() // system default cursor
div().cursor_text() // text cursor
