variant Intent {
style Button {
paddingLeft: 10
paddingRight: $theme_sizes_xl
[Intent=Positive] {
color: green
[Intent=Negative] {
color: red
Elodin lets you write type-safe component styles in a simple and familiar way.
It unifies the way we write styles for cross-platform components.

Styles are authored on component-base and fully encapsulated from other styles accounting for predictable styling without side-effects. It also enables automatic code-splitting where each component is rendered to a new file.

Write Once, Use Everywhere

Elodin compiles to a variety of different languages, platforms and libraries without having to change a single line. It's truly one file for all targets!

Type-safe Properties

The compiler will validate every property-value pair and throw on invalid rules resulting in solid code and bulletproof output. If it compiles, it works!

Quick Learning-curve

The syntax is a mix of CSS and JavaScript with some concepts from ReasonML and thus already familiar to many developers. It is declarative and unlike CSS only supports one value per property.

Elodin is written with ❤︎ by @robinweser.