Skip to main content

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.

Kael’s styling system is modeled after Tailwind CSS but expressed as Rust method chains. Every element that implements the Styled trait gains a full set of utility methods for layout, spacing, color, typography, and more. Under the hood, Kael uses Taffy — a Rust implementation of the web layout standard — to compute positions and sizes, then submits draw calls directly to the GPU. The result is native-performance layout with a familiar, expressive API.

​
The Styled trait

The Styled trait is the entry point for all styling in Kael. Any element that calls self.style() to expose a mutable StyleRefinement automatically inherits every method in the trait: 
pub trait Styled: Sized {
    fn style(&mut self) -> &mut StyleRefinement;

    // All layout, color, and typography helpers are defined here.
}
All built-in elements — div(), img(), svg(), canvas() — implement Styled. Your own components get the same methods automatically when they delegate to an inner Styled element.

​
Flexbox layout

Kael’s flex model matches CSS flexbox. Call .flex() to enter flex layout, then configure direction, wrapping, alignment, and justification: 
div()
    .flex()             // display: flex
    .flex_row()         // flex-direction: row (default)
    .items_center()     // align-items: center
    .justify_between()  // justify-content: space-between
    .gap(px(12.0))

​
Flex alignment and justification

MethodCSS equivalent
.items_start()align-items: flex-start
.items_center()align-items: center
.items_end()align-items: flex-end
.items_baseline()align-items: baseline
.justify_start()justify-content: flex-start
.justify_center()justify-content: center
.justify_end()justify-content: flex-end
.justify_between()justify-content: space-between
.justify_around()justify-content: space-around

​
Flex item sizing

div().flex_1()         // flex: 1 1 0%
div().flex_auto()      // flex: 1 1 auto
div().flex_none()      // flex: 0 0 auto (no grow, no shrink)
div().flex_grow()      // flex-grow: 1
div().flex_shrink()    // flex-shrink: 1
div().flex_shrink_0()  // flex-shrink: 0

​
Flex wrapping

div().flex_wrap()          // flex-wrap: wrap
div().flex_wrap_reverse()  // flex-wrap: wrap-reverse
div().flex_nowrap()        // flex-wrap: nowrap

​
Grid layout

Call .grid() to enter grid layout. Grid column and row templates are specified with separate methods: 
div()
    .grid()
    .grid_cols(3)      // grid-template-columns: repeat(3, 1fr)
    .gap(px(16.0))
    .children(items.iter().map(|item| render_card(item)))
Grid support follows the Taffy layout engine’s implementation. For complex multi-track templates, refer to Taffy’s grid documentation.

​
Sizing

Kael provides px() for absolute pixel values and rems() for root-em–relative values: 
div().w(px(320.0)).h(px(48.0))     // fixed pixel size
div().w(rems(20.0)).h(rems(3.0))   // rem-relative size
div().w_full().h_full()            // width/height: 100%
div().min_w(px(200.0)).max_w(px(800.0))
MethodDescription
.w(length)Sets width
.h(length)Sets height
.w_full()width: 100%
.h_full()height: 100%
.min_w(length)Sets min-width
.max_w(length)Sets max-width
.min_h(length)Sets min-height
.max_h(length)Sets max-height

​
Spacing: padding, margin, and gap

div().p(px(16.0))          // all sides
div().px(px(24.0))         // horizontal (left + right)
div().py(px(12.0))         // vertical (top + bottom)
div().pt(px(8.0))          // top only
div().pb(px(8.0))          // bottom only
div().pl(px(8.0))          // left only
div().pr(px(8.0))          // right only

​
Colors and backgrounds

Colors in Kael use the Hsla type (hue, saturation, lightness, alpha), which maps directly to GPU color values. The bg() method accepts anything that converts into a Fill: 
use kael::Hsla;

div().bg(Hsla {
    h: 0.6,   // hue: 0.0–1.0
    s: 0.8,
    l: 0.5,
    a: 1.0,
})

div().bg(gpui::blue())   // named color helpers from kael::colors
div().text_color(Hsla { h: 0.0, s: 0.0, l: 0.2, a: 1.0 })
MethodDescription
.bg(fill)Sets background color or gradient
.text_color(color)Sets text color (cascades to children)
.text_bg(color)Sets text highlight background

​
Borders

div()
    .border_1()           // 1px border on all sides
    .border_color(color)  // set border color
    .rounded()            // small border-radius
    .rounded_lg()         // larger border-radius

div().border_t()          // top border only
div().border_b()          // bottom border only
div().border_l()          // left border only
div().border_r()          // right border only
div().border_dashed()     // dashed border style

​
Shadows

div().shadow()      // small drop shadow
div().shadow_md()   // medium drop shadow

​
Positioning

By default elements participate in normal flow. For absolute or relative positioning: 
div()
    .relative()       // position: relative (establishes containing block)

div()
    .absolute()       // position: absolute
    .top(px(0.0))
    .right(px(0.0))
    .w(px(200.0))
    .h(px(48.0))

div()
    .absolute()
    .bottom(px(16.0))
    .left(px(16.0))

​
Overflow

div().overflow_hidden()    // clip content to bounds
div().overflow_scroll()    // enable scrolling

​
Opacity

div().opacity(0.5)   // 50% opacity (0.0–1.0)

​
Typography

The Styled trait also controls text presentation. These properties cascade to child elements: 
div()
    .text_sm()          // 0.875rem
    .text_base()        // 1.0rem
    .text_lg()          // 1.125rem
    .text_xl()          // 1.25rem
    .text_2xl()         // 1.5rem
    .font_weight(FontWeight::BOLD)
    .italic()
    .underline()
    .text_color(color)
    .text_center()
    .truncate()         // overflow: hidden + white-space: nowrap + ellipsis

​
Implicit style transitions

Kael automatically animates certain style properties when they change between frames, without any additional code. The properties that transition implicitly are:
  • opacity
  • background (when colors are interpolatable)
  • border_color
  • rotate
  • scale
The default transition duration is 150ms. This means hover states, selection highlights, and loading indicators gain smooth visual feedback for free.
To animate other properties explicitly, use the animation module and the keyframe builder API. Implicit transitions are only applied to the properties listed above.

​
Backdrop effects

For frosted-glass and blur effects behind an element: 
div()
    .backdrop_blur(px(20.0))       // blur behind this element
    .backdrop_saturate(1.5)        // boost saturation of blurred content
    .bg(Hsla { a: 0.6, .. })       // semi-transparent background

​
Blend modes

div().blend_mode(BlendMode::Multiply)
div().blend_mode(BlendMode::Screen)

​
Continuous (squircle) corners

For Apple-style smooth corners that match the system aesthetic: 
div()
    .rounded_lg()
    .continuous_corners()   // squircle instead of circular radius

Build docs developers (and LLMs) love

Get started for freeTalk to us