getting started

core concepts

configuration

life cycle

default styles

properties

Overview
@adjust
@animate
- delay
- direction
- duration
- enter
- exit
- fade
- flow
- loop
- mode
- name
- preset
- slide
- spin
- state
- zoom
@bg
@border
@filter
@flex
- base
- content
- flow
- grow
- items
- justify
- order
- place
- preset
- self
- shrink
- wrap
@form
@grid
- col
- cols
- content
- flow
- items
- justify
- order
- place
- preset
- row
- rows
- self
@layout
- blend
- box
- float
- hide
- is
- isolate
- layer
- object
- opacity
- overflow
- ratio
- shadow
- show
- theme
@list
- align
- marker
@live
@mask
@phase
@position
- is
- inset
- top
- bottom
- left
- right
- x
- y
@size
- h
- is
- max
- min
- w
@space
- gap
- m
- p
@svg
- fill
- stroke
@table
@text
- align
- break
- case
- color
- content
- family
- gap
- h
- line
- lines
- move
- nums
- overflow
- shadow
- size
- space
- style
- thick

mixins

components

values

best practices

changelog

alpha.0

SVG Intent Overview

SVG intent contains svg related utilities.

Utilities available in @svg intent are listed below.

Utility	Description	Documentation
`fill-*`	Set SVG element's fill color and opacity.	fill
`stroke-*`	Set SVG element's stroke thickness (width), color, opacity and scaling effect.	stroke

Published at: Apr 20, 2026

Last updated at: Jun 15, 2026