An easy way to create and layout UI components for iOS (Swift version).
Switch branches/tags
Nothing to show
Clone or download
Latest commit 5f9a85b Oct 11, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
Cupcake-Demo compatible with Swift 4.2 Oct 11, 2018
Cupcake.xcodeproj Set minimum deployment target to 8.0 Mar 26, 2018
Cupcake compatible with Swift 4.2 Oct 11, 2018
res init project Jun 8, 2017
.gitignore Carthage support Mar 26, 2018
.swift-version compatible with iOS 11 Oct 13, 2017
Cupcake.podspec compatible with Swift 4.2 Oct 11, 2018
LICENSE Initial commit Jun 8, 2017 Install instructions Mar 26, 2018


Language Swift4 Platform Version License


Cupcake is a framework that allow you to easily create and layout UI components for iOS 8.0+. It use chaining syntax and provides some frequent used functionalities that are missing in UIKit.

Easy way to create UIFont, UIImage and UIColor objects

You can create UIFont object with Font() function.

Font(15)                    //UIFont.systemFontOfSize(15)
Font("15")                  //UIFont.boldSystemFontOfSize(15)
Font("body")                //UIFontTextStyle.body
Font("Helvetica,15")        //helvetica with size of 15

You can create UIImage object with Img() function.

Img("imageName")            //image with name
Img("#imageName")           //prefixed with # will return a stretchable image
Img("$imageName")           //prefixed with $ will return a template image
Img("red")                  //1x1 size image with red color

You can create UIColor object with Color() function.

Color("red")                //
Color("0,0,255")            //RGB color
Color("#0000FF")            //Hex color
Color("random")             //random color

Color("red,0.5")            //even with alpha

Color(Img("pattern"))       //or image

Easy way to create NSAttributedString objects and String manipulations

You can create NSAttributedString object with AttStr() function.

AttStr("hello").color("red")                        //red color string
AttStr("hello, 101").select("[0-9]+").underline     //101 with underline
AttStr("A smile ", Img("smile"), " !!")             //insert image attachment

String manipulations:

Str(1024)                                           //convert anything to string
Str("1 + 1 = %d", 2)                                //formatted string

"hello world".subFrom(2).subTo("ld")                //"llo wor"
"hello world".subAt(1..<4)                          //"ell"
"hello 12345".subMatch("\\d+")                      //"12345"

4 basic UI components

You can create UIView, UILabel, UIImageView and UIButton objects simply by using View, Label, ImageView and Button variables."red").border(1).radius(4).shadow(0.7, 2)



Button.str("kitty").font("20").color("#CFC8AC").highColor("darkGray").onClick({ _ in
}).img("cat").padding(10).border(1, "#CFC8AC")

As you can see, .font(), .img() and .color() can take the same parameters as Font(), Img() and Color(). Also you can pass String, NSAttributedString or any other values to .str().


You can add click handler and adjust click area to any view.
To round a view with half height no matter what size it is, simply use .radius(-1).

ImageView.img("mario").radius(-1).touchInsets(-40).onClick({ _ in
    print("extending touch area")

You can add line spacing and link handling to UILabel.

let str = "Lorem ipsum 20 dolor sit er elit lamet, consectetaur cillium #adipisicing pecu, sed do #eiusmod tempor incididunt ut labore et 3.14 dolore magna aliqua."
let attStr = AttStr(str).select("elit", .number, .hashTag, .range(-7, 6)).link()

Label.str(attStr).lineGap(10).lines().onLink({ text in

.bg() allow you to set background for any view with color or image.
.highBg() allow you to set highlighted background for UIButton (which is very useful).
Also you can add spacing to title and image within button or even exchange their position.


You can add placeholder and limit text input to UITextField and UITextView.

TextField.hint("placeholder").maxLength(10).padding(0, 10).keyboard(.numberPad)

TextView.hint("placeholder").maxLength(140).padding(10).onChange({ textView in

Easy way to Setup Constraints

You use .pin() to setup simple constraints relative to self or superview.

.pin(200)                       //height constriant
.pin(100, 200)                  //width and height constraints			
.pin(.xy(50, 50))               //left and top constraints relative to superview
.pin(.maxXY(50, 50))            //right and bottom constraints relative to superview
.pin(.center)                   //center equals to superview
.pin(.lowHugging)               //low content hugging priority, useful when embed in StackView
.pin(.lowRegistance)            //low content compression resistance priority, useful when embed in StackView

You use .makeCons() and .remakeCons() to setup any constraints just like SnapKit.

    $, 50)
    $0.size.equal(view2).multiply(0.5, 0.7)

.remakeCons({ make in
    make.origin.equal(view2).offset(10, 20)

You use .embedIn() to embed inside superview with edge constriants.

.embedIn(superview)                     //top: 0,  left: 0,  bottom: 0,  right: 0
.embedIn(superview, 10)                 //top: 10, left: 10, bottom: 10, right: 10
.embedIn(superview, 10, 20)             //top: 10, left: 20, bottom: 10, right: 20
.embedIn(superview, 10, 20, 30)         //top: 10, left: 20, right: 30
.embedIn(superview, 10, 20, 30, 40)     //top: 10, left: 20, bottom: 30, right: 40
.embedIn(superview, 10, 20, nil)        //top: 10, left: 20

Easy way to Layout

Setup constraints for every views manually could be tedious. Luckily, you can build most of the layouts by simply using HStack() and VStack() (which are similar to UIStackView) and hopefully without creating any explicit constirants.

indexLabel = Label.font(17).color("darkGray").align(.center).pin(.w(44))
iconView =, 64).radius(10).border(1.0 / UIScreen.main.scale, "#CCC")
titleLabel = Label.font(15).lines(2)
categoryLabel = Label.font(13).color("darkGray")
ratingLabel = Label.font(11).color("orange")
countLabel = Label.font(11).color("darkGray")
actionButton = Button.font("15").color("#0065F7").border(1, "#0065F7").radius(3)
actionButton.highColor("white").highBg("#0065F7").padding(5, 10)
iapLabel = Label.font(9).color("darkGray").lines(2).str("In-App\nPurchases").align(.center)
let ratingStack = HStack(ratingLabel, countLabel).gap(5)
let midStack = VStack(titleLabel, categoryLabel, ratingStack).gap(4)
let actionStack = VStack(actionButton, iapLabel).gap(4).align(.center)
HStack(indexLabel, iconView, 10, midStack, "<-->", 10, actionStack).embedIn(self.contentView, 10, 0, 10, 15)


Lightweight Style

Some of the chainable properties can be set as style.

//local style
let style1 = Styles.color("darkGray").font(15)
Label.styles(style1).str("hello world")

//global style
Styles("style2").bg("red").padding(10).border(3, "#FC6560").radius(-1)
Button.styles(style1, "style2").str("hello world")

//copy style from view
let style3 = Styles(someButton)
Button.styles(someButton).str("hello world")


You can create static tableView with PlainTable() or GroupTable() functions.

let titles = ["Basic", "Enhancement", "Stack", "StaticTable", "Examples"]
PlainTable(titles).onClick({ row in

You can present Alert And ActionSheet using the chaining syntax as well.

Alert.title("Alert").message("message go here").action("OK").show()

ActionSheet.title("ActionSheet").message("message go here").action("Action1", {
}).action("Action2", {



Cupcake can be added to your project using CocoaPods by adding the following line to your Podfile:

pod "Cupcake"


If you're using Carthage you can add a dependency on Cupcake by adding it to your Cartfile:

github "nerdycat/Cupcake"