Login Upload
Ui4free Design system Generic styleguide + UI kit

Generic styleguide + UI kit

love btn
2021-04-28 22:50:54 Post in category

Generic styleguide + UI kit

Well, this is an attempt to gather as much as possible UI elements inside a styleguide as part of a design document and share it for free 100%.


Many sections also contain an "In the Lab" part where I tweak the component's instance to demonstrate how it works.



  • Reworked the form control items to use the same base component
  • Reworked the tabs
  • Reworked the menu
  • Media component



  • Fixed some icon issues in breadcrumb
  • 3 Hero image styles added



  • Typography for Mobile
  • Icon sizes (16px, 24px)
  • Mobile menu (In the lab)
  • Tooltips


Currently (v1.0) contains the following elements:

  • Colours
  • Typography
  • Dividers/spacers
  • Icons
  • Buttons
  • Text input
  • Select
  • Label
  • Checkbox
  • Radio buttons
  • Toggle
  • Switch
  • Menu and submenu
  • Tabs (Horizontal & vertical)
  • Simple list
  • Rich list
  • User
  • Photography
  • Post/Teaser
  • Tables
  • Section headers
  • Breadcrumbs
  • Page headers
  • Pagination
  • Steps


I know there are much more to add but I had to start from somewhere. (I'll try to update this twice a week). Please feel free to comment and propose new elements!

Add a new comment

Post comment


  • File name: ...
  • Version: ...
  • Total page: ...
  • Last modified: ...

Similar Ui templates

View more

plugin elements for figma