Get things done, quickly

Chico UI is a free and open source collection of easy-to-use UI components for designers and developers.

Get started now!Ninja image

Mesh

Provides a set of CSS columns that makes the laying out of a website easy and fast.

Check it out!

UI Components

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec ipsum tellus, quis ultricies nunc. Vestibulum ornare porta nunc, vitae tincidunt massa ornare vel. Nam ut felis odio.

Nam porta nunc vitae orci sollicitudin a ullamcorper purus dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed libero eget purus dictum fringilla non sed lectus. Etiam commodo quam in neque vehicula dapibus.

Phasellus ornare lacus ut purus elementum eget sodales dui placerat. Nunc ultrices porttitor mi, eu varius quam tristique in. Etiam tempor porta sodales.

Phasellus dui nisi, hendrerit a porta vel, tempus bibendum mauris.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus bibendum consectetur dignissim.

MercadoLibre

MercadoPago

MercadoShops

MercadoClics

Lists

Description

MercadoLibre
Donde compras y vendes de todo!
MercadoPago
La forma más simple de recibir pagos!

Container Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit adipiscing. Donec sit amet purus in sapien luctus sodales adipiscing.

Box Lite

Lorem ipsum dolor sit amet, consectetur adipiscing elit adipiscing. Donec sit amet purus in sapien luctus sodales adipiscing.

Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit adipiscing. Donec sit amet purus in sapien luctus sodales adipiscing.

Box Error

Oops, something wrong happened.

Box Help

Do you need any help?

Box Info

Here's more information

Box Warn

Warning! something might be wrong

Box Ok

Everything is great!

Messages boxes (with icons)

This is a big warning message, be careful!

Information

Here's more information.

Oops, something wrong happened
Do you need any help?
Here's more information
Warning! something might be wrong
Everything is great!

Wizard

  1. Step 1
  2. Step 2
  3. Step 3
  4. Step 4

Caption heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet purus in sapien luctus sodales. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.

Secondary Action

Spinner control

Disabled Buttons

Link button disabled

Autocomplete

This is working with the MercadoLibre API

Pagination

Table
DataOperationSellerDescriptionPriceStatusActions
02/04/2011Salemail@example.comShopping at MercadoLibre$1200,30Pendingselect
02/04/2011Purchasemail@example.comShopping at MercadoLibre$1200,30Pendingselect
02/04/2011Salemail@example.comShopping at MercadoLibre$1200,30Pendingselect
02/04/2011Salemail@example.comShopping at MercadoLibre$1200,30Pendingselect
Table
DataOperationSellerDescriptionPriceStatusActions
02/04/2011Salemail@example.comShopping at MercadoLibre$1200,30Pendingselect
02/04/2011Purchasemail@example.comShopping at MercadoLibre$1200,30Pendingselect
02/04/2011Salemail@example.comShopping at MercadoLibre$1200,30Pendingselect
02/04/2011Salemail@example.comShopping at MercadoLibre$1200,30Pendingselect

Expandable

Lorem ipsum dolor sit amet.

Lorem

ipsum dolor sit amet, consectetur adipiscing elit. Duis nec ipsum tellus, quis ultricies nunc. Vestibulum ornare porta nunc, vitae tincidunt massa ornare vel. Nam ut felis odio.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec ipsum tellus, quis ultricies nunc. Vestibulum ornare porta nunc, vitae tincidunt massa ornare vel. Nam ut felis odio.

Lorem ipsum dolor sit amet.

Default

  • MercadoLibre
  • MercadoPago
  • MercadoShops
  • MercadoClics
  • With skin

  • MercadoLibre
  • MercadoPago
  • MercadoShops
  • MercadoClics
  • Tooltip

    Bottom

    This is a tooltipThis is a tooltipThis is a tooltip

    Top

    This is a tooltipThis is a tooltipThis is a tooltip

    Right

    This is a tooltipThis is a tooltipThis is a tooltip

    Left

    This is a tooltipThis is a tooltipThis is a tooltip

    Layer

    Validation Bubble

    Modal

    Caption heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet purus in sapien luctus sodales. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.

    Secondary Action

    Transition window

    Zoom

    HTML5

    Tabs

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet purus in sapien luctus sodales. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.

    Vestibulum posuere purus non enim pharetra vel vulputate eros hendrerit. Ut pulvinar placerat risus quis interdum. Mauris eget tempus risus. Aenean accumsan dolor in lorem elementum ac tincidunt urna rutrum. Sed sit amet nunc velit, vitae tincidunt ipsum. Fusce mattis elementum justo, et lacinia odio pharetra a.

    Sed sit amet nunc velit, vitae tincidunt ipsum. Fusce mattis elementum justo, et lacinia odio pharetra a. Donec egestas imperdiet eros a interdum. Suspendisse sodales, ligula vitae pulvinar aliquam, elit justo pretium urna, ut hendrerit arcu dolor vitae ipsum.

    Badges

    Icons

    Calendar

    Date Picker

    Countdown

    Forms and Validations

    Inputs
     
     Add your category
    Numbers and dot symbol
    It will be your login name
    Between 8 to 10
    It's a unknown use case
    Selects
    Misc
      
     
     
    Checkbox

    Label of checkboxs group:*

    Legend of required group*
    Legend of checkboxs group

    Label of required group:*

    Radio buttons
    Radio buttons required*
    Legend of radio group

    Radios required:*

    Textarea
    Big inputs