Lemon CSS

The definitive styling solution for modern Android applications. Create beautiful, responsive, and professional UIs with ease.

Download GitHub

Stunning UIs, Simplified

Lemon provides a set of pre-built components and a flexible theming system that enables you to build beautiful Android apps faster.

Featured Card

Jetpack Compose Example


import { Lemon } from "@/public/lemon";
export function LemonCard() {
  return (
  <div style={{...Lemon.display("flex"), ...Lemon.justifyContent("center")}}>
    <div style={{...Lemon.width(256), ...Lemon.height(480), ...Lemon.background("#ccc"), ...Lemon.borderRadius(22), ...Lemon.borderWidth(4), ...Lemon.overflow("hidden")}}>
      <div style={{...Lemon.width("100%"), ...Lemon.height("100%"), ...Lemon.background("#afafaf"), ...Lemon.padding(16)}}>
        <div>
          <div style={{...Lemon.width("100%"), ...Lemon.height(96), ...Lemon.background("royal-purple"), ...Lemon.borderRadius(20), ...Lemon.display("flex"), ...Lemon.justifyContent("center"), ...Lemon.color("white"), ...Lemon.fontWeight("bold"), ...Lemon.fontSize(18)}}>
                    Featured Card
          </div>
          <div style={{...Lemon.width("100%"), ...Lemon.height(40), ...Lemon.background("#ccc"), ...Lemon.borderRadius(15)}}></div>
          <div style={{...Lemon.width("75%"), ...Lemon.height(40), ...Lemon.background("#ccc"), ...Lemon.borderRadius(15)}}></div>
          <div style={{...Lemon.display("flex"), ...Lemon.gap(16)}}>
            <div style={{...Lemon.width("50%"), ...Lemon.height(64), ...Lemon.background("#ccc"), ...Lemon.borderRadius(20)}}></div>
            <div style={{...Lemon.width("50%"), ...Lemon.height(64), ...Lemon.background("#ccc"), ...Lemon.borderRadius(20)}}></div>
          </div>
        </div>
      </div>
    </div>
  </div>)
}

With Lemon's intuitive components, your code becomes cleaner and more readable.