20 Free Top Shelf UI Kits for Web Designers

June 6th, 2011

When it comes to web design, the UI elements that are included can, at times, make or effectively break (in more ways than one) the overall piece. Compromising the aesthetics and even the functionality of the design rendering it virtually useless. So we have to choose the UI elements carefully. Too subtle, and some users may not pick up on them. Too bold, and you risk compromising the fine balance between elements that can really tie the entire piece together.

So today we have brought our web design readers a little treat. We have collected 20 top shelf UI kits that can help you add that special touch of class to your web design projects. All of these fantastic kits are available for free for both personal and commercial use. Most of the downloads consist of layered psd files unless otherwise noted.

Get Your Kit On!

Got Wood UI Design Elements by Tony Thomas

UI Kit by Raj Ramamurthy – The link will take you to the comment where you can download the UI kit. The kit is almost entirely CSS (only two small images are used)

Black UI Kit by Alex Patrascu

Moonify UI by jlofstedt

Black UI Kit by Jonathan Moreira

Fuel UI Design Kit by Jeff Olson

Snow Modern UI Kit by MediaLoot

Web Elements by Dillen Verschoor

Dark UI Element Set by Ryan Forgan

Sepia GUI Elements by takuji ikeda

Light UI PSD by Matt Wadsworth

Simple UI Elements by Adrian Pelletier

Spring GUI by Jon Ovander

E-Commerce Steps UI by Mateusz Dembek

Web Kit Interface Layout Pack by Gianluca Giacoppo – Comes in 6 colors (blue, yellow, gray, green, red and purple)

Modern Web UI Set by Dimi Arhontidis

Soft UI Kit by Design Kindle

UI Kit by Dany Duchaine

Big Block UI by Adrian Pelletier

A Hand Coded Designer CSS UI Kit – Another CSS kit using HTML5 and CSS3


Robert Bowen is an emerging author, celebrated podcaster and poet, and most recently the co-founder and imaginative co-contributor of the creative design and blogging duo at the Arbenting and Dead Wings Designs.

Tags: ,

31 comments for „20 Free Top Shelf UI Kits for Web Designers
  1. Ryan Forgan on June 6th, 2011 at 1:53 pm

    Thanks for including my Dark Purple Ui set :)

    This is a very nice collection and i hope to make more clean light designs,thanks

    • Robert Bowen on June 6th, 2011 at 7:26 pm

      Glad that we could feature it! Awesome work!

  2. Nathan on June 6th, 2011 at 2:13 pm

    Very nice collection! Moonify UI by jlofstedt is definitely my favourite, great work.

  3. Mateusz Dembek on June 6th, 2011 at 2:24 pm

    E-Commerce Steps UI by PixelsDaily – This ui is not made ??by PixelDaily – just by me ;) ! Please change this!

    • Robert Bowen on June 6th, 2011 at 7:32 pm

      Thanks for the heads up, Mateusz (not to mention the awesome work). It has been changed. ;)

      • Mateusz Dembek on June 6th, 2011 at 8:05 pm

        Thanks Robert :)

      • Robert Bowen on June 6th, 2011 at 8:09 pm

        No, I thank you. I completely overlooked the icon on the site indicating who made it. It wasn’t until seeing your avatar here on your comment that I recognized the icon on PixelsDaily for what it was. :)

  4. Justin on June 6th, 2011 at 3:49 pm

    This is a very handy resource, especially for the less design orientated web developers among us!

    I like the E-Commerce Steps UI form validation styles.

    • Robert Bowen on June 6th, 2011 at 7:33 pm

      Glad that it comes in handy. These designers have really created some stellar work to make our lives easier. Always nice to be able to shine a spotlight on them!

    • Mateusz Dembek on June 6th, 2011 at 8:10 pm

      Thanks Justin :) (check my other freebies form ;)

      • Justin on June 7th, 2011 at 12:20 pm

        Thanks for that link. That login form looks great, something I could use. Good idea releasing some free PSD designs.

        Mmmm, cheesecake :-)

      • Mateusz Dembek on June 14th, 2011 at 8:47 pm

        No prob Justin ;) btw. Soon it available PSD file of this work: ;)

  5. Mason Hipp on June 6th, 2011 at 5:05 pm

    Hey Guys,

    Thanks for including so many MediaLoot resources on the list! Freebies are pretty awesome :-)

    Also, in case anyone is interested, the “Got Wood” UI kit at the top is designed by Tony Thomas.


    — Mason

    • Robert Bowen on June 6th, 2011 at 7:44 pm

      Thanks, Mason. MediaLoot certainly has some great resources!

      Also, I appreciate the name of the designer. I looked around on the site but didn’t see it anywhere. I’m glad you dropped that by!! :)

  6. nik on June 6th, 2011 at 6:25 pm

    Uhm, Scrollbars?

    • Robert Bowen on June 6th, 2011 at 7:47 pm

      Yup! And buttons, and progress bars, and menu elements, oh my!

  7. Dimi on June 6th, 2011 at 8:47 pm

    Thanks for including my Modern web UI kit hope you guys find it useful! Cheers!

  8. George Dina on June 7th, 2011 at 1:51 am

    Thank you very much for sharing these resources.
    As always, you on noupe are awesome.

  9. appsease on June 7th, 2011 at 4:23 am

    this is really cool, heaven for me

  10. inspirationfeed on June 7th, 2011 at 5:01 pm

    Great collection, wish our UI PSD we recently published would be mentioned.

  11. Robert Kleffner on June 7th, 2011 at 5:22 pm

    Really great stuff here, I’ll definitely think about using some of these in my future projects. Much credit to all the great designers.

  12. Crowdfinch on June 8th, 2011 at 7:36 am

    I’m impressed very informative.thank you for this blog.

  13. Mario on June 8th, 2011 at 10:31 pm

    Any suggestion what UI kit should I use to design a social network for travel? Thanks

  14. Paul on June 16th, 2011 at 7:11 pm

    sick, thanks!

  15. Bindi on June 17th, 2011 at 9:21 am

    Nice collection! and very useful.. thanks

  16. darryl brocklesby on June 17th, 2011 at 8:36 pm

    Been looking for these sort of UI for ages and then you get them all on one website

  17. Sarah Meares on June 24th, 2011 at 7:08 pm

    These are beautiful. Thanks for the time-savers! Great work everyone.

  18. alex on March 27th, 2012 at 7:25 pm


  19. Jack on April 10th, 2012 at 6:41 am

    thanks for this share.
    i like the silver and red one.

  20. Robert Bowen on June 6th, 2011 at 7:38 pm

    ;) Gotcha! Not sure how I missed that, but I appreciate it. Taken care of.

    And thanks for the awesome set!

  21. Robert Bowen on June 7th, 2011 at 1:20 am

    You save the images you want to use from the PSD file, upload them, and point to them in your CSS. If you need a more in depth breakdown, then you are going to need a tutorial to glance through. :)